WebSocket实现多人实时聊天

骑猪看日落 2022-07-13 01:16 237阅读 0赞

chat.html：

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title> 使用WebSocket通信 </title>  
    <script type="text/javascript">  
        // 创建WebSocket对象  
        var webSocket = new WebSocket("ws://127.0.0.1:8888/WebSocket/websocket/chat");  
        var sendMsg = function()  
        \{  
            var inputElement = document.getElementById('msg');  
            // 发送消息  
            webSocket.send(inputElement.value);  
            // 清空单行文本框  
            inputElement.value = "";  
        \}  
        var send = function(event)  
        \{  
            if (event.keyCode == 13)  
            \{  
                sendMsg();  
            \}  
        \};  
        webSocket.onopen = function()  
        \{  
            // 为onmessage事件绑定监听器，接收消息  
            webSocket.onmessage= function(event)  
            \{  
                var show = document.getElementById('show')  
                // 接收、并显示消息  
                show.innerHTML += event.data + "<br/>";  
                show.scrollTop = show.scrollHeight;  
            \}  
            document.getElementById('msg').onkeydown = send;  
            document.getElementById('sendBn').onclick = sendMsg;  
        \};  
        webSocket.onclose = function ()  
        \{  
            document.getElementById('msg').onkeydown = null;  
            document.getElementById('sendBn').onclick = null;  
            Console.log('WebSocket已经被关闭。');  
        \};  
    </script>  
</head>  
<body>  
<div style="width:600px;height:240px;  
    overflow-y:auto;border:1px solid \#333;" id="show"></div>  
<input type="text" size="80" id="msg" name="msg" placeholder="输入聊天内容"/>  
<input type="button" value="发送" id="sendBn" name="sendBn"/>  
</body>  
</html>

package lee;

import java.io.IOException;  
import java.util.Set;  
import java.util.concurrent.CopyOnWriteArraySet;  
import java.util.concurrent.atomic.AtomicInteger;  
  
import javax.websocket.\*;  
import javax.websocket.server.\*;  
  
@ServerEndpoint(value = "/websocket/chat")  
public class ChatEntpoint  
\{  
    private static final String GUEST\_PREFIX = "访客";  
    private static final AtomicInteger connectionIds = new AtomicInteger(0);  
    // 定义一个集合，用于保存所有接入的WebSocket客户端  
    private static final Set<ChatEntpoint> clientSet =  
        new CopyOnWriteArraySet<>();  
    // 定义一个成员变量，记录WebSocket客户端的聊天昵称  
    private final String nickname;  
    // 定义一个成员变量，记录与WebSocket之间的会话  
    private Session session;  
    public ChatEntpoint()  
    \{  
        nickname = GUEST\_PREFIX + connectionIds.getAndIncrement();  
    \}  
    // 当客户端连接进来时自动激发该方法  
    @OnOpen  
    public void start(Session session)  
    \{  
        this.session = session;  
        // 将WebSocket客户端会话添加到集合中  
        clientSet.add(this);  
        String message = String.format("【%s %s】"  
            , nickname, "加入了聊天室！");  
        // 发送消息  
        broadcast(message);  
    \}  
    // 当客户端断开连接时自动激发该方法  
    @OnClose  
    public void end()  
    \{  
        clientSet.remove(this);  
        String message = String.format("【%s %s】"  
            , nickname, "离开了聊天室！");  
        // 发送消息  
        broadcast(message);  
    \}  
    // 每当收到客户端消息时自动激发该方法  
    @OnMessage  
    public void incoming(String message)  
    \{  
        String filteredMessage = String.format("%s: %s"  
            , nickname, filter(message));  
        // 发送消息  
        broadcast(filteredMessage);  
    \}  
    // 当客户端通信出现错误时，激发该方法  
    @OnError  
    public void onError(Throwable t) throws Throwable  
    \{  
        System.out.println("WebSocket服务端错误 " + t);  
    \}  
    // 实现广播消息的工具方法  
    private static void broadcast(String msg)  
    \{  
        // 遍历服务器关联的所有客户端  
        for (ChatEntpoint client : clientSet)  
        \{  
            try  
            \{  
                synchronized (client)  
                \{  
                    // 发送消息  
                    client.session.getBasicRemote().sendText(msg);  
                \}  
            \}  
            catch (IOException e)  
            \{  
                System.out.println("聊天错误，向客户端 "  
                    + client + " 发送消息出现错误。");  
                clientSet.remove(client);  
                try  
                \{  
                    client.session.close();  
                \}  
                catch (IOException e1)\{\}  
                String message = String.format("【%s %s】",  
                    client.nickname, "已经被断开了连接。");  
                broadcast(message);  
            \}  
        \}  
    \}  
    // 定义一个工具方法，用于对字符串中的HTML字符标签进行转义  
    private static String filter(String message)  
    \{  
        if (message == null)  
            return null;  
        char content\[\] = new char\[message.length()\];  
        message.getChars(0, message.length(), content, 0);  
        StringBuilder result = new StringBuilder(content.length + 50);  
        for (int i = 0; i < content.length; i++)  
        \{  
            // 控制对尖括号等特殊字符进行转义  
            switch (content\[i\])  
            \{  
                case '<':  
                    result.append("<");  
                    break;  
                case '>':  
                    result.append(">");  
                    break;  
                case '&':  
                    result.append("&");  
                    break;  
                case '"':  
                    result.append(""");  
                    break;  
                default:  
                    result.append(content\[i\]);  
            \}  
        \}  
        return (result.toString());  
    \}  
\}