原文详细地址,有点对点,还有广播的推送:https://blog.csdn.net/ouyzc/article/details/79884688

下面是自己处理的一些小bug

参考原文demo,结合工作中的项目,发现前端用vue时出现了莫名其妙的bug

 var stompClient = null;
//加载完浏览器后 调用connect(),打开双通道
$(function(){
//打开双通道
connect()
})
//强制关闭浏览器 调用websocket.close(),进行正常关闭
window.onunload = function() {
disconnect()
}
function connect(){
var userId=1;
var socket = new SockJS('http://127.0.0.1:9091/sbjm-cheng/endpointOyzc'); //连接SockJS的endpoint名称为"endpointOyzc"
stompClient = Stomp.over(socket);//使用STMOP子协议的WebSocket客户端
stompClient.connect({},function(frame){//连接WebSocket服务端
console.log('Connected:' + frame);
//通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
stompClient.subscribe('/user/' + userId + '/queue/getResponse',function(response){
var code=JSON.parse(response.body);
showResponse(code)
});
});
}
//关闭双通道
function disconnect(){
if(stompClient != null) {
stompClient.disconnect();
}
console.log("Disconnected");
}
function showResponse(message){
var response = $("#response");
response.append("<p>只有userID为"+message.userId+"的人才能收到</p>");
}

这段js跑起来是没问题的,但是在vue里面跑起来就出现了bug,总是和服务器链接不上

vue代码如下:

报错如下:

后来经过各种排查,发现stompClient前少加了个var,这个太坑爹了自己的失误TTTTT

后来是莫名其妙的空格问题,就是这个

报错的是连接不稳定,老是连接不上,总是失去和服务器的连接,这个可能是网络问题,公司的网比较差,太坑

但是永远接收不到服务器推送回来的消息

最后是怎么解决的呢?

就是这个莫名其妙的空格问题,把上面图片上多余的空格去掉就ok了

但是这个问题自己用小demo原生的来跑完全没问题的

就是用VUE之后接收不到推送回来的消息

后来去掉空格就可以接收到消息了

SpringBoot集成WebSocket【基于STOMP协议】进行点对点[一对一]和广播[一对多]实时推送的更多相关文章

  1. SpringBoot集成WebSocket【基于纯H5】进行点对点[一对一]和广播[一对多]实时推送

    代码全部复制,仅供自己学习用 1.环境搭建 因为在上一篇基于STOMP协议实现的WebSocket里已经有大概介绍过Web的基本情况了,所以在这篇就不多说了,我们直接进入正题吧,在SpringBoot ...

  2. springBoot -webSocket 基于STOMP协议交互

    浅谈WebSocket WebSocket是在HTML5基础上单个TCP连接上进行全双工通讯的协议,只要浏览器和服务器进行一次握手,就可以建立一条快速通道,两者就可以实现数据互传了.说白了,就是打破了 ...

  3. springboot之websocket,STOMP协议

    一.WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 ...

  4. springboot+websocket+sockjs进行消息推送【基于STOMP协议】

    springboot+websocket+sockjs进行消息推送[基于STOMP协议] WebSocket是在HTML5基础上单个TCP连接上进行全双工通讯的协议,只要浏览器和服务器进行一次握手,就 ...

  5. springboot集成websocket的两种实现方式

    WebSocket跟常规的http协议的区别和优缺点这里大概描述一下 一.websocket与http http协议是用在应用层的协议,他是基于tcp协议的,http协议建立链接也必须要有三次握手才能 ...

  6. springboot集成websocket实现向前端浏览器发送一个对象,发送消息操作手动触发

    工作中有这样一个需示,我们把项目中用到代码缓存到前端浏览器IndexedDB里面,当系统管理员在后台对代码进行变动操作时我们要更新前端缓存中的代码怎么做开始用想用版本方式来处理,但这样的话每次使用代码 ...

  7. Spring Security 集成 CAS(基于HTTP协议版本)

    Spring Security 集成 CAS(基于HTTP协议版本) 近段时间一直研究Spring Security 集成 CAS,网上资料相关资料也很多,不过大都是基于Https的安全认证;使用ht ...

  8. 基于HTTP协议之WEB消息实时推送技术原理及实现

    很早就想写一些关于网页消息实时推送技术方面的文章,但是由于最近实在忙,没有时间去写文章.本文主要讲解基于 HTTP1.1 协议的 WEB 推送的技术原理及实现.本人曾经在工作的时候也有做过一些用到网页 ...

  9. springboot搭建一个简单的websocket的实时推送应用

    说一下实用springboot搭建一个简单的websocket 的实时推送应用 websocket是什么 WebSocket是一种在单个TCP连接上进行全双工通信的协议 我们以前用的http协议只能单 ...

随机推荐

  1. 《Forward团队-爬虫豆瓣top250项目-开发文档》

    码云地址:https://github.com/xyhcq/top250 模块功能:获取豆瓣top250网页的源代码,并分析. def getHTMLText(url,k): # 获取网页源代码 tr ...

  2. Appium之启用手机桌面APP的多种方法

    方法一: 其实之前的随笔 Appium之连续启动多个应用(APP)中已经介绍了可以用appium下的start_activity()方法来启动一个应用,那这里就不再说明啦. 方法二: 因为有时用sta ...

  3. [label][转载][web-design-psychology]网页设计心理

    原文出处: http://mux.alimama.com/posts/1301 Tip1:信息不要同时全部展示,阶段性地向用户展示当前场景里必要的信息 设计师经常犯的错误:同时将大量信息展示给用户.不 ...

  4. 解决json结合struts2时,Class org.apache.struts2.json.JSONWriter can not access a member of * 的问题

    在使用json的时候,产生的一个错误,查了一下资料,原来是struts2和json一起使用的时候,才产生的问题,虽然不影响程序的运行,但是总是会有一些异常的日志产生,并且,这个也会增加程序的负担. 原 ...

  5. XML--将XML中数据提取出转换成表

    DECLARE @xml XMLSET @xml='<Students>    <Student  id="1001">        <name&g ...

  6. Ubuntu下Jenkins(docker)配置Docker远程启动

    背景: 在做用Jenkins构建docker的操作,需要用Jenkins调用docker命令,需要先安装docker-build-step插件,然后开启docker远程访问. 默认情况下,Docker ...

  7. npm 安装less

    npm install less less-loader --save 在style加上lang="less" 就可以直接用了

  8. 数据库表结构文档查看器 基于netcore

    前言 日常开发业务代码,新接手一块不熟悉的业务时需要频繁的查看对应业务的数据库表设计文档.相比于直接翻看业务代码,有必要提供一个数据库表结构文档查看器来解决这些繁琐的问题. CML.SqlDoc CM ...

  9. 当前安卓App加固到底该如何做到防篡改?

    安卓dalvik虚拟机要求dex文件在内存中以明文形式存在,那么任何加壳方法到头来到了内存还是明文存在,各种dump方法终究是可以获得它的.App究竟应该如何加固才能防止被篡改?   加固和 dump ...

  10. StringBudiler源码简单解析

    StringBudiler源码 继承关系树 底层实现 默认容量() 特别的添加方法(append) 1.继承关系树 继承自AbstractStringBuilder与StringBuffer同族 2. ...