原文详细地址,有点对点,还有广播的推送: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. 声音处理(Cool Edit)

    平直化处理 上升半音

  2. Google Tango SDK下载

    Tango SDK files谷歌Tango开发包 The Tango SDK is under active development; please keep this in mind as you ...

  3. intrinsicConditionQueue笔记

    一, 使用conditionQueue需要注意的一些点: 一个conditionQueue被多种Predicate condition 使用是很正常的,所以当一个wait的线程被唤醒的时候,很有可能它 ...

  4. [编译,报错以及其他] 有关C/C++中int不能用-2147483648当最小值的问题

    这个取决于今早看耗子叔的微博: 这里说到了int的取值范围的问题,int的取值是-2147483648 ~ 2147483647,但是如果直接在编译器(VS2013)中使用-2147483648会报错 ...

  5. GlusterFS 三

    性能监控 Displaying the I/0 Information $gluster volume profile gv0 startStarting volume profile on gv0 ...

  6. 提问的智慧——其实你真的不会提问!(转)

    在黑客世界里,当提出一个技术问题时,你能得到怎样的回答?这取决于挖出答案的难度,同样取决于你提问的方法.本指南旨在帮助你提高发问技巧,以获取你最想要的答案.       首先你必须明白,黑客们只偏爱艰 ...

  7. docker查看挂载目录命令

    docker inspect -f "{{.Mounts}}"  692691b7416 692691b7416为containerId

  8. django 定制管理页面外观 模板文件不生效的解决方法

    问题描述:大概过程跟下面描述的一样,简单来说就是照着例子学习的时候定制管理页面外观,按照文档要求拷贝了base_site.html文件到templates目录下,并且按照要求修改了settings.p ...

  9. oracle数据导出导入(exp/imp)

    1.本地数据库导入导出 1.导出 (运行---cmd中操作)exp 用户名/密码@数据库实例名file=本地存放路径eg: exp jnjp/jnjp@ORCL file=C:/jnjp.dmp 2. ...

  10. WPF GridControl单元格值与过滤值相同时,改变单元格背景色

    DataTrigger的Value不可绑定,所以我们需要用MultiBinding来实现这个功能. <dxg:TableView.CellStyle> <Style TargetTy ...