基于WebSocket的简易聊天室

最新推荐文章于 2022-05-18 08:22:06 发布

原创最新推荐文章于 2022-05-18 08:22:06 发布 · 727 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #聊天室

Java基础专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何使用WebSocket技术创建一个简易的聊天室。首先，查看了web程序的web.xml配置，接着详细阐述了服务端的实现过程。特别指出，实验环境中的Tomcat服务器版本为8。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web程序先看web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name>test</display-name>


  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

也可以没有。

再看服务端：

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.Set;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * Created by dushangkui on 2017/6/12.
 */
@ServerEndpoint("/websocket/chat")
public class ChatEndpoint {

    private static final String GUEST_PREFIX = "访客";
    private static final AtomicInteger connectionIds = new AtomicInteger(0);

    private static final Set<ChatEndpoint> clientSet = new CopyOnWriteArraySet<ChatEndpoint>();
    private final String nickName;
    private Session session;

    public ChatEndpoint() {
        nickName = GUEST_PREFIX + connectionIds.getAndIncrement();
    }

    @OnOpen
    public void start(Session session) {
        this.session = session;
        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 recieved(String message) {
        String filteredMessaged = String.format("[%s %s]", nickName, filter(message));
        broadcast(filteredMessaged);
    }

    public void onError(Throwable t) {
        System.out.println("WebSocket服务端错误 " + t);
    }

    private static void broadcast(String message) {
        for (ChatEndpoint client : clientSet) {
            try {
                synchronized (client) {
                    client.session.getBasicRemote().sendText(message);
                }
            } catch (Exception e) {
                System.out.println("聊天错误，向客户端" + client + "发送消息错误。");
                clientSet.remove(client);
                try {
                    client.session.close();
                } catch (Exception t) {
                    String msg = String.format("[%s %s]", client.nickName, "已经被断开了连接。");
                    broadcast(msg);
                }
            }
        }
    }

    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 sb = new StringBuilder(content.length + 50);
        for (int i = 0; i < content.length; i++) {
            switch (content[i]) {
                case '<':
                    sb.append("<");
                    break;
                case '>':
                    sb.append(">");
                    break;
                case '&':
                    sb.append("&");
                    break;
                case '"':
                    sb.append(""");
                    break;
                default:
                    sb.append(content[i]);
            }
        }
        return sb.toString();
    }
}

看页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用WebSocket通信</title>
    <script type="text/javascript">
        var websocket = new WebSocket("ws://127.0.0.1:8080/test/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(){
            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("sendBtn").onclick = sendMsg;
        }

        websocket.onclose = function(){
            document.getElementById("msg").onkeydown = null;
            document.getElementById("sendBtn").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" placeholder="输入聊天记录"/>
    <input type="button" value="发送" id="sendBtn"/>
</body>
</html>

运行结果：