WebSocket-前后端实时消息推送

要做一个通信监测方面的事情，需要实时进行前后端的的消息推送，这里不分析 Ajax 轮询和 WebSocket 的区别，网上讲的挺多的，下图是两者的通信示意图，这里只写怎么用。

下图是我的一个页面简单展示

上代码
前端 js
链接：https://pan.baidu.com/s/1gkdj…
提取码：c0q5
从上述连接下载必须的 js
sockjs.min.js
stomp.min.js

<script src="dist/js/sockjs.min.js"></script>
<script src="dist/js/stomp.min.js"></script>
<script type="text/javascript">
function connect() {var socket = new SockJS("http://127.0.0.1:7070/myWebSocket");// 如果前后端分离项目需要拼接具体地址
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function(frame) {setMessageInnerHTML("连接成功！" + "\n")
                console.log(frame);
                stompClient.subscribe('/topic/ip', function(body) {//'/topic/ip' 是自己定义的一个地址，可根据自己业务定
                           // 收到后台推送的消息后进行的业务处理，根据自己的情况写
                    alert("来自后台的消息："+body.body);
                });
            });
        }
</script>

后端使用
pom.xml 配置

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

配置类

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;

//springBoot2.0 版本后使用 实现 WebSocketMessageBrokerConfigurer 接口；//2.0 以下版本继承 AbstractWebSocketMessageBrokerConfigurer 类；@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
  @Override
  public void registerStompEndpoints(StompEndpointRegistry registry) {// 注册一个 Stomp 协议的 endpoint 指定 URL 为 myWebSocket, 并用.withSockJS()指定 SockJS 协议。.setAllowedOrigins("*")设置跨域
      registry.addEndpoint("/myWebSocket").setAllowedOrigins("*").withSockJS();}
  @Override
  public void configureMessageBroker(MessageBrokerRegistry config) {// 配置消息代理(message broker)
      // 将消息传回给以‘/topic’开头的客户端
      config.enableSimpleBroker("/topic");
  }
}

private SimpMessagingTemplate simpMessage;

使用的时候直接用

simpMessage.convertAndSend("/topic/ip", "给前端推送的消息");// 这里的“topic/ip" 是自己设定的地址，只要和前端保持一致就可以

如果有不清楚的地方可以给我发邮件：736812983@qq.com，也可以加 qq