SpringBoot集成WebSocket实现前后端消息互传的方法

下面是 SpringBoot 集成 WebSocket 实现前后端消息互传的完整攻略。

简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得浏览器和服务器之间的实时通信变得更加容易。Spring Boot 提供了一个强大的 WebSocket 模块，可以轻松实现 WebSocket 的集成。

示例1：实现前后端简单文字消息互传

1. 添加依赖

在 pom.xml 添加以下依赖：

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

2. 配置 WebSocket

在 Spring Boot 中，WebSocket 的配置非常简单，只需添加一个 @Configuration 类，然后在该类中添加 @Bean 方法，用于配置默认的 Spring Boot WebSocket 配置。

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyHandler(), "/myHandler");
    }

    class MyHandler extends TextWebSocketHandler {

        private WebSocketSession session;

        @Override
        public void afterConnectionEstablished(WebSocketSession session) throws Exception {
            this.session = session;
            System.out.println("Connected");
        }

        @Override
        protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
            String payload = message.getPayload();
            System.out.println("Received message: " + payload);
            session.sendMessage(new TextMessage("Echo: " + payload));
        }

        @Override
        public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
            System.out.println("Disconnected");
        }

    }

}

在上述示例中，首先我们定义了一个 MyHandler 类，继承了 TextWebSocketHandler，并重写了其中的三个方法。这三个方法分别用于处理 WebSocket 连接建立、文本消息接收和连接关闭事件。

在 MyHandler 中，我们将收到的消息原样返回（"Echo: " + payload），用于测试 WebSocket 的连接是否成功。最后，在 registerWebSocketHandlers 方法中，我们将 MyHandler 类添加到指定的 WebSocketHandlerRegistry 中（"/myHandler"）。

3. 编写前端页面

在 index.html 页面中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Test</title>
    <script src="/js/jquery.js"></script>
    <script src="/js/stomp.min.js"></script>
    <script>
        var myWebSocket = new WebSocket("ws://" + window.location.host + "/myHandler");
        myWebSocket.onopen = function (event) {
            console.log("WebSocket opened");
        };
        myWebSocket.onmessage = function (event) {
            var message = event.data;
            $("#messages").append("<li>" + message + "</li>");
        };
        $(function () {
            $("#sendBtn").click(function () {
                var message = $("#messageInput").val();
                myWebSocket.send(message);
                $("#messageInput").val("");
            });
        });
    </script>
</head>
<body>
    <h1>WebSocket Test</h1>
    <ul id="messages"></ul>
    <div>
        <label for="messageInput">Message:</label>
        <input type="text" id="messageInput" />
        <button type="button" id="sendBtn">Send</button>
    </div>
</body>
</html>

在上述示例中，我们首先创建一个 WebSocket 对象，并连接到指定的服务端路径（"ws://" + window.location.host + "/myHandler"）。接着，我们在 onopen 和 onmessage 事件中分别定义 WebSocket 连接成功和接收消息的处理逻辑。

在页面中，添加一个文本框和按钮用于发送消息，在按钮的 click 事件中，我们将文本框中的内容通过 WebSocket 对象发送给服务端，然后清空文本框。

4. 启动应用程序

启动 Spring Boot 应用程序，访问 http://localhost:8080/index.html 即可。在文本框中输入消息并点击 Send 按钮，即可在页面上看到返回的消息（添加了前缀 "Echo: "）。

示例2：实现前后端简单点赞功能

1. 添加依赖

在 pom.xml 添加以下依赖：

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

2. 配置 WebSocket

在 Spring Boot 中，WebSocket 的配置非常简单，只需添加一个 @Configuration 类，然后在该类中添加 @Bean 方法，用于配置默认的 Spring Boot WebSocket 配置。

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    private static Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyHandler(), "/myHandler");
    }

    class MyHandler extends TextWebSocketHandler {

        private WebSocketSession session;

        @Override
        public void afterConnectionEstablished(WebSocketSession session) throws Exception {
            this.session = session;
            sessions.put(session.getId(), session);
            System.out.println("Connected");
        }

        @Override
        protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
            String payload = message.getPayload();
            System.out.println("Received message: " + payload);
            for (WebSocketSession s : sessions.values()) {
                if (s.isOpen()) {
                    s.sendMessage(new TextMessage(payload));
                }
            }
        }

        @Override
        public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
            sessions.remove(session.getId());
            System.out.println("Disconnected");
        }

    }

}

在上述示例中，首先我们定义了一个 MyHandler 类，该类继承了 TextWebSocketHandler，并重写了其中的三个方法。这三个方法分别用于处理 WebSocket 连接建立、文本消息接收和连接关闭事件。

在 MyHandler 中，我们定义了一个静态成员变量 sessions，用于存储所有连接的 WebSocketSession。在 afterConnectionEstablished 方法中，我们将当前连接加入到 sessions 中。在 handleTextMessage 方法中，我们将接收到的消息广播给所有连接的 WebSocketSession（除了发送者自己）。在 afterConnectionClosed 方法中，我们将当前连接从 sessions 中删除。

在 registerWebSocketHandlers 方法中，我们将 MyHandler 类添加到指定的 WebSocketHandlerRegistry 中（"/myHandler"）。

3. 编写前端页面

在 index.html 页面中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Test</title>
    <script src="/js/jquery.js"></script>
    <script src="/js/stomp.min.js"></script>
    <script>
        var myWebSocket = new WebSocket("ws://" + window.location.host + "/myHandler");
        myWebSocket.onopen = function (event) {
            console.log("WebSocket opened");
        };
        myWebSocket.onmessage = function (event) {
            var message = event.data;
            $("#votes").text(message);
        };
        $(function () {
            $("#voteBtn").click(function () {
                var message = "vote";
                myWebSocket.send(message);
                $("#voteBtn").attr("disabled", true);
            });
        });
    </script>
</head>
<body>
    <h1>WebSocket Test</h1>
    <p>
        Votes: <span id="votes">0</span>
    </p>
    <button type="button" id="voteBtn">Vote</button>
</body>
</html>

在页面中，添加一个按钮用于投票，在按钮的 click 事件中，我们将一个 "vote" 字符串通过 WebSocket 对象发送给服务端，然后将按钮变为不可点击状态。

4. 启动应用程序

启动 Spring Boot 应用程序，访问 http://localhost:8080/index.html 即可。在页面中点击 Vote 按钮，即可看到投票数的变化（通过 WebSocket 广播到所有连接的 WebSocketSession）。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot集成WebSocket实现前后端消息互传的方法 - Python技术站

SpringBoot集成WebSocket实现前后端消息互传的方法

简介

示例1：实现前后端简单文字消息互传

1. 添加依赖

2. 配置 WebSocket

3. 编写前端页面

4. 启动应用程序

示例2：实现前后端简单点赞功能

1. 添加依赖

2. 配置 WebSocket

3. 编写前端页面

4. 启动应用程序

相关文章