SpringBoot整合Websocket实现聊天室

最新推荐文章于 2024-09-06 16:50:52 发布

四面八方来

最新推荐文章于 2024-09-06 16:50:52 发布

阅读量421

点赞数 5

分类专栏： Java 文章标签： spring boot websocket 后端

本文链接：https://blog.csdn.net/candy___i/article/details/134082399

版权

Java 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.添加依赖：在pom.xml文件中添加WebSocket相关依赖。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2.创建WebSocket配置类：创建一个WebSocket配置类，用于配置WebSocket端点和处理器。

@Configuration
@EnableWebSocket
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpoint(){
        return new ServerEndpointExporter();
    }
}

3.创建WebSocket处理器：创建一个WebSocket处理器，用于处理WebSocket连接和消息。

@Component
@ServerEndpoint("/chat")
public class ChatService {
    /**
     * 连接会话池
     */
    private static ConcurrentHashMap<String, Session> SESSION_POOL = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(Session session) throws IOException {
        // 判断客户端对象是否存在
        if (SESSION_POOL.containsKey(session.getQueryString())) {
            CloseReason closeReason = new CloseReason(CloseReason.CloseCodes.CANNOT_ACCEPT, "ID冲突，连接拒绝");
            session.getUserProperties().put("reason", closeReason);
            session.close();
            return;
        }
        // 将客户端对象存储到会话池
        SESSION_POOL.put(session.getQueryString(), session);
        System.out.println("客户端（" + session.getQueryString() + "）：开启了连接");
    }

    @OnMessage
    public String onMessage(String msg, Session session) throws IOException {
        // 解析消息 ==> ID::消息内容
        String[] msgArr = msg.split("::", 2);
        // 处理群发消息，ID==all表示群发
        if ("all".equalsIgnoreCase(msgArr[0])) {
            for (Session one : SESSION_POOL.values()) {
                // 排除自己
                if (one == session) {
                    continue;
                }
                // 发送消息
                one.getBasicRemote().sendText(msgArr[1]);
            }
        }
        // 指定发送
        else {
            // 获取接收方
            Session target = SESSION_POOL.get(msgArr[0]);
            if (target != null) {
                target.getBasicRemote().sendText(msgArr[1]);
            }
        }
        return session.getQueryString() + "：消息发送成功";
    }

    @OnClose
    public void onClose(Session session) {
        // 连接拒绝关闭会话
        Object reason = session.getUserProperties().get("reason");
        if (reason instanceof CloseReason) {
            CloseReason creason = (CloseReason) reason;
            if (creason.getCloseCode() == CloseReason.CloseCodes.CANNOT_ACCEPT) {
                System.out.println("拒绝客户（" + session.getQueryString() + "）：关闭连接");
                return;
            }
        }
        // 从会话池中移除会话
        SESSION_POOL.remove(session.getQueryString());
        System.out.println("客户端（" + session.getQueryString() + "）：关闭连接");
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
        System.out.println("客户端（" + session.getQueryString() + "）错误信息：" + throwable.getMessage());
    }

    @SneakyThrows
    public void sendMessage(String id, Object message) {
        // 群发
        if ("all".equalsIgnoreCase(id)) {
            for (Session one : SESSION_POOL.values()) {
                // 发送消息
                one.getBasicRemote().sendText(JSONUtil.toJsonStr(message));
            }
        }
        // 指定发送
        else {
            // 获取接收方
            Session target = SESSION_POOL.get(id);
            if (target != null) {
                target.getBasicRemote().sendText(JSONUtil.toJsonStr(message));
            }
        }
    }
}

4.创建HTML页面：创建一个HTML页面，用于在浏览器中连接WebSocket并进行聊天。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室客户端</title>
</head>
<body>
<h1>Chat Client</h1>
<div>
    <input id="clientId" placeholder="输入ID" value="1">
    <input onclick="init()" value="连接服务器" type="button"><br><br>
    <input id="receiverId" placeholder="输入接收人ID" value="all"><br><br>
    <textarea id="message" style="margin: 0; height: 197px; width: 362px;"
              placeholder="发送消息内容"></textarea><br>
    <input onclick="send()" value="发送消息" type="button">
    <input onclick="closeConnect()" value="关闭连接" type="button">
</div>
<div id="output"></div>
<script type="text/javascript" language="JavaScript">
    //屏幕回显输出方法
    function writeToScreen(message) {
        let pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
        document.getElementById("output").appendChild(pre);
    }

    //初始化websocket
    let echo_websocket;
    function init() {
        let clientId = document.getElementById("clientId").value;
        let wsUri = "ws://localhost:10500/chat?" + clientId;
        writeToScreen("连接到" + wsUri);
        //1.创建WebSocket客户端对象
        echo_websocket = new WebSocket(wsUri);
        //2.开门握手完成回调
        echo_websocket.onopen = function (evt) {
            console.log(evt);
            writeToScreen("连接打开成功 !");
        };
        //3.监听服务端的消息
        echo_websocket.onmessage = function (evt) {
            writeToScreen("接收服务端消息:<br> " + evt.data);
        };
        //4.如果连接中断
        echo_websocket.onerror = function (evt) {
            writeToScreen('<span style="color: red;">ERROR:'+evt.data+'</span>');
            //关闭连接
            closeConnect();
        };
        //5.注册close事件
        echo_websocket.onclose = function(evt){
            writeToScreen('<span style="color: green;">INFO：关闭连接</span> ');
            if(evt.reason){
                writeToScreen
                (`<span style="color: red;">错误信息：${evt.reason}</span> `);
            }
        }
    }

    //6.向服务发送消息
    function send() {
        let message = document.getElementById("message").value;
        let receiver = document.getElementById("receiverId").value;
        echo_websocket.send(receiver + "::" + message);
        writeToScreen("发送消息: " + message);
    }

    //7.如果不需要通讯，那么关闭连接
    function closeConnect() {
        echo_websocket.close();
    }
</script>
</body>
</html>