SpringBoot使用WebSocket

最新推荐文章于 2025-11-17 11:46:46 发布

原创最新推荐文章于 2025-11-17 11:46:46 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#springBoot #websocket

WEB应用技术研究专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何在SpringBoot项目中使用WebSocket实现前后端实时通信。包括在pom.xml中添加依赖、配置websocketConf.java文件以支持跨域，以及如何在Controller中使用SimpMessagingTemplate进行消息推送。前端部分则通过SockJS和STOMP实现与后端的连接和消息订阅。

后台步骤

1.maven 配置，在pom.xml文件中依赖项添加如下依赖。

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

2.springboot配置,添加websocketConf.java文件。其中"/test/Socket"为前端订阅地址，前端以http请求方式访问该地址即可连接socket。当做前后端分离，需要跨域时，需要添加setAllowedOrigins("*")容许跨域。

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/test/Socket").setAllowedOrigins("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

3.声明SimpMessagingTemplate （或者使用@SendTo和@SendToUser注解）
在需要用到推送的地方如Controller，service，Component等地方声明SimpMessagingTemplate

    @Resource
    private SimpMessagingTemplate messagingTemplate;

当需要向客户端推送消息时，调用convertAndSend方法，即可推送消息，此处“/topic/send”可随意设置，所有前端订阅该url的客户端都可以收到推送的消息。

    messagingTemplate.convertAndSend("/topic/send", result);

前端步骤

1.导入sockjs.min.js，stomp.min.js，下载地址
3.定义socket对象（可替换成函数）

  function Socket(url) {
      this.stompClient = null;
      this.connect = function(obj, socketUrl, subscribeUrl, uid){
          var _this = this;
          var socket = new SockJS(socketUrl);
          this.stompClient = Stomp.over(socket);
          this.stompClient.connect({}, function (frame) {
              _this.subscribe(obj, subscribeUrl, uid);
          });
      }
      this.disconnect = function(){
        if (this.stompClient != null) {
            this.stompClient.disconnect();
        }
        console.log("Disconnected");
      }
      this.subscribe = function(obj, subscribeUrl, uid){
          this.stompClient.subscribe(subscribeUrl, function(message){
          });
      }
  }

4.连接socket

 var socket = new Socket();
 socket.connect(that, http://localhost:8080/test/Socket, "/topic/send", uid);
 //这里uid可以省略，加上uid是当后台推送消息时，前端做消息识别

5.断开socket

 socket.disconnect();