SpringBoot 使用WebSocket功能

实现步骤：

1.导入WebSocket坐标。

在pom.xml中增加依赖项：

复制代码

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

2.编写WebSocket配置类，用于注册WebSocket的Bean。

java 复制代码

package com.rc114.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * WebSocket配置类，用于注册WebSocket的Bean
 * @author Administrator
 */
@Configuration
public class WebSocketConfiguration {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}

3.编写WebSocketServer类。

java 复制代码

package com.rc114.websocket;

import jakarta.websocket.OnClose;
import jakarta.websocket.OnMessage;
import jakarta.websocket.OnOpen;
import jakarta.websocket.Session;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

/**
 * WebSocket服务
 * @author Administrator
 */
@Component  //  交给spring容器管理
@ServerEndpoint("/ws/{sid}")    //  路径请求
public class WebSocketServer {

    //存放会话对象
    private static Map<String, Session> sessionMap = new HashMap();

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("sid") String sid) {
        System.out.println("客户端：" + sid + "建立连接");
        sessionMap.put(sid, session);
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, @PathParam("sid") String sid) {
        System.out.println("收到来自客户端：" + sid + "的信息:" + message);
    }

    /**
     * 连接关闭调用的方法
     *
     * @param sid
     */
    @OnClose
    public void onClose(@PathParam("sid") String sid) {
        System.out.println("连接断开:" + sid);
        sessionMap.remove(sid);
    }

    /**
     * 群发
     *
     * @param message
     */
    public void sendToAllClient(String message) {
        Collection<Session> sessions = sessionMap.values();
        for (Session session : sessions) {
            try {
                //服务器向客户端发送消息
                session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

}

4.测试WebSocket

编写一个测试WebSocket的html页面：

html 复制代码

<html>

<head>
    <title>WebSocket测试页面</title>
    <style type="text/css">
        * {
            font-size: 14px;
            line-height: 22px;
        }

        .main {
            border: 0px solid #ccc;
            width: 60%;
            margin: 0 auto;
            padding: 10px;
        }

        .main-table {
            width: 100%;
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        .main-table td {
            border: 1px solid #ccc;
            padding: 5px;
        }

        .td-left {
            text-align: right;
        }

        input[type="text"] {
            border: 1px solid #ccc;
            padding: 5px;
            outline: none;
            width: 200px;
        }

        input[type="button"] {
            border: 1px solid #ccc;
            padding: 3px 10px;
            outline: none;
        }

        .green {
            color: green;
        }

        .red {
            color: red;
        }

        #msg {
            font-size: 12px;
            line-height: 22px;
        }
    </style>
</head>

<body>
    <div class="main">
        <table class="main-table">
            <tr>
                <td colspan="2" style=" text-align: center;font-weight: bold;">WebSocket测试</td>
            </tr>
            <tr>
                <td style="width: 100px;" class="td-left">服务器地址</td>
                <td><input type="text" id="server" value="ws://localhost:8080/ws/"></td>
            </tr>
            <tr>
                <td class="td-left">客户端名称</td>
                <td><input type="text" id="clientId">
                    <input type="button" value="随机生成" onclick="GenerateClientId()" />
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    <input type="button" value="连接" onclick="ConnectServer()" />
                </td>
            </tr>
            <tr>
                <td class="td-left">连接状态</td>
                <td> <span id="status"><span class='red'>未连接</span></span></td>
            </tr>
            <tr>
                <td class="td-left">发送消息</td>
                <td>
                    <input type="text" id="txt">
                </td>
            </tr>
            <tr>
                <td> </td>
                <td>
                    <input type="button" value="发送" onclick="SendMsg()" />
                    <input type="button" value="清空" onclick="ClearLog()" />
                </td>
            </tr>
            <tr>
                <td class="td-left">日志</td>
                <td>
                    <div id="msg"></div>
                </td>
            </tr>
        </table>

        <script type="text/javascript">
            var websocket = null;
            var clientId = "";

            //随机生成客户端编号
            function GenerateClientId() {
                clientId = Math.random().toString().substr(2);
                document.getElementById("clientId").value = clientId;
            }
            GenerateClientId();

            //连接到服务器
            function ConnectServer() {
                var clientId = document.getElementById("clientId").value;
                if (clientId == "") {
                    alert("客户端编号不能为空!");
                } else {
                    if ("WebSocket" in window) {
                        websocket = new WebSocket("ws://localhost:8080/ws/" + clientId);

                        websocket.onerror = function () {
                            ShowMsg("<span class='red'>ERROR</span>");
                        }
                        websocket.onopen = function () {
                            document.getElementById("status").innerHTML = "<span class='green'>已连接</span>";
                            ShowMsg("<span class='green'>连接成功！</span>");
                        }
                        websocket.onmessage = function (event) {
                            ShowMsg(event.data);
                        }
                        websocket.onclose = function () {
                            ShowMsg("<span class='red'>断开连接</span>");
                        }

                    }
                    else {
                        alert("NOT SUPPORT WEBSOCKET!");
                    }
                }
            }



            //网页关闭时，断开链接
            window.onbeforeunload = function () {
                websocket.close();
            }

            //显示日志
            function ShowMsg(msg) {
                document.getElementById("msg").innerHTML += Now() + " " + msg + "<br/>";
            }

            //发送消息
            function SendMsg() {
                var txt = document.getElementById("txt").value;
                websocket.send(txt);
                ShowMsg("<span class='green'>发送消息：" + txt + "</span>");
            }

            //断开链接
            function closeWebSocket() {
                websocket.close();
            }

            function Now() {
                const date = new Date();
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hour = date.getHours().toString().padStart(2, '0');
                const minute = date.getMinutes().toString().padStart(2, '0');
                const second = date.getSeconds().toString().padStart(2, '0');
                const format = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
                return format;
            }

            //清空日志
            function ClearLog() {
                document.getElementById("msg").innerHTML = "";
            }
        </script>
    </div>
</body>

</html>

运行效果：

注意：

如果使用了Nginx转发请求的，需在Nginx配置WebSocket的转发规则。