Websocket 聊天工具

浅浅的花香味﹌ 2023-08-17 16:54 72阅读 0赞

**WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。**  
**WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。**  
**在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。**

**相关功能代码中有注释**

##### 下面是聊天功能的服务端代码，服务端代码使用java创建的Maven project编写，核心代码如下： #####

package edu;
    import java.io.IOException;
    import java.util.concurrent.CopyOnWriteArraySet;
    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    
    /** * @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端, * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端 */
    
    @ServerEndpoint("/hello")
    public class WebSocket { 
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;
     //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
    /** * 连接建立成功调用的方法 * @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据 */
    @OnOpen
    public void onOpen(Session session){ 
       this.session = session;
       webSocketSet.add(this);
       addOnlineCount();           //在线数加1
       System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
    }
     /** * 连接关闭调用的方法 */
    @OnClose
    public void onClose(){ 
       webSocketSet.remove(this);  //从set中删除
       subOnlineCount();           //在线数减1
       System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
    }
     /** * 收到客户端消息后调用的方法 * @param message 客户端发送过来的消息 * @param session 可选的参数 */
    @OnMessage
    public void onMessage(String message, Session session) { 
       System.out.println("来自客户端的消息:" + message);
       //群发消息
        for(WebSocket item: webSocketSet){ 
        try { 
        	System.out.println("向客户端发送消息:" + message);
        	item.sendMessage(message);
        } catch (IOException e) { 
        	e.printStackTrace();
        	continue;
        	}
        }
    }
    /** * 发生错误时调用 * @param session * @param error */
    @OnError
    public void onError(Session session, Throwable error){ 
    	System.out.println("发生错误");
    	error.printStackTrace();
    }
    
    /** * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。 * @param message * @throws IOException */
    public void sendMessage(String message) throws IOException{ 
    	this.session.getBasicRemote().sendText(message);
    	//this.session.getAsyncRemote().sendText(message);
    }
    public static synchronized int getOnlineCount() { 
    	return onlineCount;
    }
    public static synchronized void addOnlineCount() { 
    	WebSocket.onlineCount++;
    }
    
    public static synchronized void subOnlineCount() { 
    	WebSocket.onlineCount--;
    	}
    }

##### 下面是客户端代码，使用easyUI做的建议聊天页面样式（文件必须有JS脚本文件）： #####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Websocket</title>
    	<link rel="shortcut icon" href="./EasyUI/favicon.ico">
        <link rel="stylesheet" type="text/css" href="EasyUI/themes/black/easyui.css">
        <link rel="stylesheet" type="text/css" href="EasyUI/themes/icon.css">
        <script type="text/javascript" src="EasyUI/jquery.min.js"></script>
        <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
    </head>
    <body>
    <div style="margin-bottom: 30px">
        <input id="name" class="easyui-textbox" label="昵称:" labelPosition="left" style="width: 100%;">
        <input id="msgInfo" class="easyui-textbox" label="聊天:" labelPosition="left" style="width: 100%;">
    </div>
    <div style="margin-bottom: 5px; position:relative;left:30px"><a id="sendToServer" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">发送消息</a></div>
    <div id="message"></div>
    <script>
        var websocket = null;
        //判断当前浏览器是否支持websocket
        if('WebSocket' in window)
        { 
        	//ws://localhost:8080/com/hello 这里的地址记得修改，服务器是什么地址就用什么
            websocket = new WebSocket("ws://ws://localhost:8080/com/helloo");
        }
        else
        { 
            alert("当前浏览器 Not support websocket")
        }
        //连接发生错误的回调方法
        websocket.onerror = function () { 
            setMessageInnerHTML("WebSocket连接发生错误");
        };
        //连接成功建立的回调方法
        websocket.onopen = function () { 
            setMessageInnerHTML("WebSocket连接成功");
        };
        //接收到消息的回调方法
        websocket.onmessage = function (event) { 
            setMessageInnerHTML(event.data);
        }
        //连接关闭的回调方法
        websocket.onclose = function () { 
            setMessageInnerHTML("webSocket连接关闭");
        }
        //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket防止连接还没断开就关闭窗口,server端会抛异常.
        window.onbeforeunload = function () { 
            closeWebSocket();
        }
        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) { 
            document.getElementById('message').innerHTML += innerHTML +'<br/>';
        }
        function closeWebSocket() { 
            websocket.close();
    
        }
        //发送消息
        function send() { 
            var message = document.getElementById('name').value+":"+document.getElementById('msgInfo').value;
            websocket.send(message);
        }
        //快熟定位
        $("#sendToServer").click(
            function () { 
                send();
            });
    </script>
    </body>
    </html>