暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

JAVA:Springboot 集成 WebSocket 和 STOMP 实时消息的技术指南

拾荒的小海螺 2024-08-28
1076

1、简述

随着互联网应用的复杂性和实时性需求的增加,传统的 HTTP 请求响应模式已不能满足某些场景的需求。WebSocket 和 STOMP 协议为构建实时消息传输提供了极大的便利。本文将介绍如何在 Spring Boot 中使用 WebSocket 和 STOMP 创建一个实时消息应用,并通过实例展示其实现过程。


2、工作原理

2.1 WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与传统的 HTTP 不同,WebSocket 在客户端与服务器之间建立连接后,可以在不关闭连接的情况下,进行双向数据传输。这使得 WebSocket 成为实现实时应用程序(如聊天应用、实时通知等)的理想选择。


2.2 STOMP

STOMP(Simple/Streaming Text Oriented Messaging Protocol)是一个简单的消息传递协议,通常用于 WebSocket 上层,以实现基于消息的通信。STOMP 协议定义了如何订阅主题、发送消息等操作,非常适合在 WebSocket 环境中使用。


2.3 WebSocket 和 STOMP 的工作原理

客户端建立 WebSocket 连接:客户端通过 WebSocket 连接到服务器,并订阅感兴趣的主题(topics)。

消息发布与订阅:当服务器有新的消息时,会根据消息主题将消息推送给订阅该主题的客户端。

双向通信:WebSocket 允许服务器和客户端之间进行双向通信,客户端也可以通过 WebSocket 发送消息到服务器。


3、集成

3.1 引入依赖

在 Spring Boot 项目中使用 WebSocket 和 STOMP,首先需要在 pom.xml 中添加相关依赖:

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


    3.2 配置 WebSocket 和 STOMP

    接下来,需要创建 WebSocket 配置类,启用 STOMP 消息代理:

      import org.springframework.context.annotation.Configuration;
      import org.springframework.messaging.simp.config.MessageBrokerRegistry;
      import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
      import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
      import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;


      @Configuration
      @EnableWebSocketMessageBroker
      public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {


      @Override
      public void configureMessageBroker(MessageBrokerRegistry config) {
      config.enableSimpleBroker("/topic"); // 主题路径前缀
      config.setApplicationDestinationPrefixes("/app"); // 应用路径前缀
      }


      @Override
      public void registerStompEndpoints(StompEndpointRegistry registry) {
      registry.addEndpoint("/ws").withSockJS(); // WebSocket 连接路径
      }
      }

      在这个配置中,/topic 表示消息主题的路径前缀,/app 表示应用消息发送路径前缀,/ws 则是 WebSocket 连接的端点。


      3.3 创建消息处理器

      接下来,我们需要创建一个消息处理器类,用于接收和处理来自客户端的消息:

        import org.springframework.messaging.handler.annotation.MessageMapping;
        import org.springframework.messaging.handler.annotation.SendTo;
        import org.springframework.stereotype.Controller;


        @Controller
        public class MessageController {


        @MessageMapping("/sendMessage") // 接收客户端消息
        @SendTo("/topic/messages") // 广播到主题
        public Message send(Message message) {
        // 处理消息的逻辑
        return message; // 返回的消息将广播到所有订阅者
        }
        }

        这里的 @MessageMapping("/sendMessage") 表示接收客户端发送到 app/sendMessage 的消息,并将处理后的消息广播到 topic/messages 主题上,所有订阅了该主题的客户端将收到消息。


        3.4 创建消息模型

        定义一个简单的消息模型类,用于传递消息数据:

          import lombok.Data;


          @Data
          public class Message {
          private String from;
          private String text;


          // Getters and Setters
          }


          3.5 编写前端代码

          在前端(如使用 JavaScript)中,可以使用 SockJS 和 Stomp.js 来连接 WebSocket 并订阅消息:

            <!DOCTYPE html>
            <html lang="en">
            <head>
            <meta charset="UTF-8">
            <title>WebSocket Demo</title>
            <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.1/dist/sockjs.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
            </head>
            <body>
            <div id="chat">
            <input type="text" id="message" placeholder="Enter your message"/>
            <button onclick="sendMessage()">Send</button>
            <ul id="messages"></ul>
            </div>


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


            function connect() {
            var socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/messages', function (message) {
            showMessage(JSON.parse(message.body));
            });
            });
            }


            function sendMessage() {
            var messageContent = document.getElementById("message").value;
            stompClient.send("/app/sendMessage", {}, JSON.stringify({'text': messageContent, 'from': 'User'}));
            }


            function showMessage(message) {
            var messages = document.getElementById("messages");
            var messageElement = document.createElement('li');
            messageElement.appendChild(document.createTextNode(message.from + ": " + message.text));
            messages.appendChild(messageElement);
            }


            connect();
            </script>
            </body>
            </html>

            在这个示例中,用户可以输入消息并通过 WebSocket 发送到服务器,服务器处理后再将消息广播到所有订阅该主题的客户端。


            4、扩展功能

            私信功能:可以通过实现点对点消息发送,利用 STOMP 的 /user 目标。

            在线用户列表:通过 WebSocket 连接与断开时的事件处理,可以实时显示当前在线的用户列表。

            消息持久化:将消息保存到数据库中,实现聊天记录的持久化。


            5、总结

            本文详细介绍了如何在 Spring Boot 项目中集成 WebSocket 和 STOMP,构建一个简单的实时消息应用。通过 WebSocket 的双向通信能力和 STOMP 协议的消息传递机制,可以轻松实现各种实时功能,如聊天室、实时通知系统等。

            实时消息传输是现代互联网应用的重要特性,了解并掌握 WebSocket 和 STOMP 能帮助你在项目中实现更高效的实时通信功能。


            文章转载自拾荒的小海螺,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

            评论