WebSocket 前后端实时消息推送

栏目: 后端 · 发布时间: 5年前

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

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

WebSocket 前后端实时消息推送

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

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"是自己设定的地址,只要和前端保持一致就可以

WebSocket 前后端实时消息推送

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Twenty Lectures on Algorithmic Game Theory

Twenty Lectures on Algorithmic Game Theory

Tim Roughgarden / Cambridge University Press / 2016-8-31 / USD 34.99

Computer science and economics have engaged in a lively interaction over the past fifteen years, resulting in the new field of algorithmic game theory. Many problems that are central to modern compute......一起来看看 《Twenty Lectures on Algorithmic Game Theory》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

MD5 加密
MD5 加密

MD5 加密工具