Springboot WebSocket

1、添加依赖

      <!-- websocket -->

      <dependency>

         <groupId>org.springframework.boot</groupId>

         <artifactId>spring-boot-starter-websocket</artifactId>

      </dependency>

 

2、Websocket配置

@Configuration

@EnableWebSocketMessageBroker

public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {



    @Override

    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {

        // 添加服务端点，可以理解为某一服务的唯一key值

        stompEndpointRegistry.addEndpoint("/socket");

        //当浏览器支持sockjs时执行该配置

        stompEndpointRegistry.addEndpoint("/socket").setAllowedOrigins("*").withSockJS();

    }



    @Override

    public void configureMessageBroker(MessageBrokerRegistry config) {

        // 配置接受订阅消息地址前缀为topic的消息

        config.enableSimpleBroker("/topic");

        // Broker接收消息地址前缀

//        config.setApplicationDestinationPrefixes("/");

}

 

3、发送消息

@Autowired

   public SimpMessagingTemplate template;

   template.convertAndSend("/topic/rhythm", push);

 

4、前端页面调用

引入sockjs、stomp：

<script th:src="@{/js/sockjs.min.js}"></script>

<script th:src="@{/js/stomp.min.js}"></script>

<script th:src="@{/js/jquery-3.1.1.min.js}"></script>



   var s = new SockJS('/socket');

   var stompClient = Stomp.over(s);

   // stompClient.send("/socket", {},JSON.stringify({'push':""})); 

   stompClient.connect({}, function() {

      console.log('notice socket connected!');

      stompClient.subscribe('/topic/rhythm', function(response) {

         var data = JSON.parse(response.body);

         console.log(data);

         initLine('time', "节拍", "", data.legend, data.xdata, data.seriesData);

      });

});