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


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

查看所有标签

猜你喜欢:

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

摩尔神话

摩尔神话

阿诺德•萨克雷、戴维•布洛克、雷切尔•琼斯 / 黄亚昌 / 中国人民大学出版社 / 2017-9 / 105元

戈登·摩尔领导“八叛逆”创建了仙童半导体公司,为硅谷人士的冒险和创新确立了蓝图。他对技术进行创新,并使“变节资本”成为关键动力,使硅谷成为如今的模样;作为仙童半导体的研发总监,以及在芯片制造中扮演着关键角色,他的观点让创业之火熊熊燃烧;在英特尔初创期,开辟了第二条战线,即用微处理器来实现数字逻辑;他为全球半导体产业以及电子革命确立了核心动力,促进了技术普及,加速了社会变革;在对晶体管技术坚定不移的......一起来看看 《摩尔神话》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具