在vue中使用SockJS实现webSocket通信的过程


Posted in Javascript onAugust 29, 2018

最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程:

socksjs

•客户端和服务器端api尽可能简洁,尽量靠近websocket api
•支持服务端扩展和负载均衡技术
•传输层应该全面支持跨域通信
•如果受到代理服务器的限制,传输层能优雅地从一种方式回退到另一种方式
•尽可能快地建立连接
•客户端只是纯粹的JavaScript,不需要flash
•客户端JavaScript必须经过严格的测试
•服务器端代码尽可能简单,降低用另一种语言重写server的代价

前提

要进行文章中的代码的测试,需要服务端端开发人员配合你,提供相关的通信接口.来完成客户端和服务端的通信.实现通信,我们需要用到另个模块 sockjs-client 模块和 stomjs 模块,接下来我会先对这两个模块做一个简单的介绍.

关于实时通信

实现实时通信,我们通常有三种方法:

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) => { // 订阅服务端提供的某个topic
   consolel.log(msg.body); // msg.body存放的是服务端发送给我们的信息
   });
  }, (err) => {
   
  });

  },
  disconnect() {
  if (this.stompClient != null) {
   this.stompClient.disconnect();
   console.log("Disconnected");
  }
  }
 }
};

总结

以上所述是小编给大家介绍的在vue中使用SockJS实现webSocket通信的过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
用js实现in_array的方法
Nov 05 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
vue过滤器实现日期格式化的案例分析
Jul 02 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 #Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 #Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 #Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 #Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 #jQuery
对Vue table 动态表格td可编辑的方法详解
Aug 28 #Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 #Javascript
You might like
php中常用的预定义变量小结
2012/05/09 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
js 对象是否存在判断
2009/07/15 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
2016/11/18 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
Python实现字典依据value排序
2016/02/24 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
Python中输入和输出(打印)数据实例方法
2019/10/13 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python中logging日志库实例详解
2020/02/19 Python
jupyter notebook清除输出方式
2020/04/10 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
python如何调用百度识图api
2020/09/29 Python
使用django自带的user做外键的方法
2020/11/30 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
抽样调查项目计划书
2014/04/24 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书