在vue中使用SockJS实现webSocket通信
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程:
前提
要进行文章中的代码的测试,需要服务端端开发人员配合你,提供相关的通信接口.来完成客户端和服务端的通信.实现通信,我们需要用到另个模块sockjs-client模块和stomjs模块,接下来我会先对这两个模块做一个简单的介绍.
稍后我会写一篇使用NodeJS SockJS实现视屏弹幕的功能的文章,敬请期待~
关于实时通信
实现实时通信,我们通常有三种方法:
- ajax轮询 ajax轮询的原理非常简单,让浏览器每隔几秒就像服务器发送一个请求,询问服务器是否有新的信息.
- http 长轮询 长轮询的机制和ajax轮询差不多,都是采用轮询的方式,不过才去的是阻塞模型(一直打电话,没收到就不挂电话),也就是说,客户端发起链接后,如果没有消息,就一直不返回response给客户端.知道有新的消息才返回,返回完之后,客户端再此建立连接,周而复始.
- WebSocket WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议.在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送,不需要繁琐的询问和等待. 从上面的介绍很容易看出来,ajax轮询和长轮询都是非常耗费资源的,ajax轮询需要服务器有很快的处理速度和资源,http长轮询需要有很高的并发,也就是同时接待客户的能力.而WebSocket,只需要经过一次HTTP请求,就可以与服务端进行源源不断的消息收发了.
sockjs-client
sockjs-client是从SockJS中分离出来的用于客户端使用的通信模块.所以我们就直接来看看SockJS. SockJS是一个浏览器的JavaScript库,它提供了一个类似于网络的对象,SockJS提供了一个连贯的,跨浏览器的JavaScriptAPI,它在浏览器和Web服务器之间创建了一个低延迟,全双工,跨域通信通道. 你可能会问,我为什么不直接用原生的WebSocket而要使用SockJS呢?这得益于SockJS的一大特性,一些浏览器中缺少对WebSocket的支持,因此,回退选项是必要的,而Spring框架提供了基于SockJS协议的透明的回退选项。SockJS提供了浏览器兼容性,优先使用原生的WebSocket,如果某个浏览器不支持WebSocket,SockJS会自动降级为轮询.
stomjs
STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议; WebSocket是一个消息架构,不强制使用任何特定的消息协议,它依赖于应用层解释消息的含义. 与HTTP不同,WebSocket是处在TCP上非常薄的一层,会将字节流转化为文本/二进制消息,因此,对于实际应用来说,WebSocket的通信形式层级过低,因此,可以在 WebSocket 之上使用STOMP协议,来为浏览器 和 server间的 通信增加适当的消息语义。
STOMP与WebSocket 的关系:
- HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写web应用,你可能认为这是一件疯狂的事情;
- 直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义;
- 同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义.
代码实现
代码中除了最基本的连接,还设置了一个定时器,每隔十秒发送一条数据到服务器端,如果发生错误,catch这个错误,重新建立连接.
// 安装并引入相关模块
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
export default {data() {return {dataList: []};},mounted:function(){this.initWebSocket();},beforeDestroy: function () {// 页面离开时断开连接,清除定时器this.disconnect();clearInterval(this.timer);},methods: {initWebSocket() {this.connection();let self = this;// 断开重连机制,尝试发送消息,捕获异常发生时重连this.timer = setInterval(() => {try {self.stompClient.send("test");} catch (err) {console.log("断线了: " err);self.connection();}}, 5000);},removeTab(targetName) {console.log(targetName)},connection() {// 建立连接对象this.socket = new SockJS('http://xxxxxx:8089/ws');//连接服务端提供的通信接口,连接以后才可以订阅广播消息和个人消息// 获取STOMP子协议的客户端对象this.stompClient = Stomp.over(this.socket);// 定义客户端的认证信息,按需求配置var headers = {login: 'mylogin',passcode: 'mypasscode',// additional header'client-id': 'my-client-id'};// 向服务器发起websocket连接this.stompClient.connect(headers,(frame) => {this.stompClient.subscribe('/topic/chat_msg', (msg) => { // 订阅服务端提供的某个topicconsolel.log(msg.body); // msg.body存放的是服务端发送给我们的信息});}, (err) => {// 连接发生错误时的处理函数console.log(err);});},// 断开连接disconnect() {if (this.stompClient != null) {this.stompClient.disconnect();console.log("Disconnected");}}}
};
结语
不知道我是否有写明白,我才疏学浅,表达能力有限,如果有不明白的地方,可发送疑问到我的邮箱2510909248@qq.com,另外如果有什么好的意见或者建议,也欢迎骚扰~~~
参考链接
websocket:支持 前端连接 订阅
SockJS简单介绍
STOMP 客户端 API 整理
在vue中使用SockJS实现webSocket通信相关推荐
- c语言实现stomp协议客户端,在vue中使用SockJS实现webSocket通信
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和 服务器 端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些 ...
- fleck 客户端_C#中使用Fleck实现WebSocket通信简例
Fleck是一个开源的使用C#封装的WebSocket服务端工具库. 一.服务端搭建 这里选择在.net core 2.1框架下新建了一个控制台程序 在项目里使用NuGet引入Fleck包 NuGet ...
- 在vue中webSocket通信
1.简单介绍 基于webSocket通信的库主要有 socket.io,SockJS,这次用的是 SockJS. 2.前提 这里我们使用sockjs-client.stomjs这两个模块,要实现web ...
- 【Web通信】WebSocket详解:WebSocket是什么?如何使用WebSocket?在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
一.WebSocket相关定义 1. WebSocket定义 WebSocket 是一种基于TCP的全双工通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法.数据可以作为" ...
- 如何在Vue中使用websocket?
什么是WebSocket : WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范. W ...
- 什么是WebSocket?WebSocket在Vue中如何使用?
什么是WebSocket?WebSocket在Vue中如何使用? 什么是Websocket? 通俗说, WebSocket是一种数据通信协议,用于客户端和服务端数据通信.类似于http协议,但ht ...
- 「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮 你能照见南边,也能照见北边 照见她,你跟她说一声,就说我想她了. 前言 前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
- 「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩 源码在文末. 前言 上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
- vue全局安装jquery,vue使用bootstrap框架,vue中封装websocket通讯,vue引入element-ui 组件库,引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
最新文章
- linux shell脚本攻略_(python)Linux下shell脚本监控Tomcat的状态并实现自动启动步骤...
- node.js 多异步之间的协作方案
- 美国大学录取时如何考察学生的背景
- C++类型转换: static_cast const_cast reinterpret_cast dynamic_cast
- VS cmake远程调试ubuntu项目生成报错:“Does not match the generator used previously: Ninja“(删除.vs隐藏文件夹)
- MySQL 8.0 error 2059: Authentication plugin 'caching_sha2_password' cannot be loaded
- 全民上云时代,如何降低成本?
- kubernetes集群Pod详细信息为Failed create pod sandbox,缺失镜像google_containers/pause-amd64.3.0解决方法
- Zuul 上传大文件服务报错的问题
- vue 代码格式化(VS code)
- 海致大数据京信_海致网聚提出公安大数据背景下的个人计算新理念
- js查找数组元素位置
- 打造员工能力(组织能力杨三角系列三)
- 销售凭证、客户主数据相关表
- 敏捷的精髓在于即时反馈
- Linux 安装rabbitMQ guest账号登录总是提示失败
- 微信小程序和H5网页之间有什么区别?
- 如何成为java架构师?2023版Java架构师学习路线总结完成,真实系统有效,一切尽在其中
- 在职场,光有技术是不行的,18年老程序员职场宝贵经验分享
- 几种软件开发方法对比