怎么在vue中使用SockJS实现与webSocket进行通信

　　介绍

本篇文章为大家展示了怎么在vue中使用SockJS实现与webSocket进行通信,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强> socksjs

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

<强>前提

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

<>强关于实时通信

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

ajax轮询ajax轮询的原理非常简单,让浏览器每隔几秒就像服务器发送一个请求,询问服务器是否有新的信息。

http长轮询长轮询的机制和ajax轮询差不多,都是采用轮询的方式,不过才去的是阻塞模型(一直打电话,没收到就不挂电话),也就是说,客户端发起链接后,如果没有消息,就一直不返回响应给客户端。知道有新的消息才返回,返回完之后,客户端再此建立连接,周而复始。

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的支持,因此,回退选项是必要的,而春天框架提供了基于SockJS协议的透明的回退选项.SockJS提供了浏览器兼容性,优先使用原生的WebSocket,如果某个浏览器不支持WebSocket, SockJS会自动降级为轮询。

<>强stomjs

跺脚(简单文本消息传递协议)面向消息的简单文本协议;WebSocket是一个消息架构,不强制使用任何特定的消息协议,它依赖于应用层解释消息的含义。与HTTP不同,WebSocket是处在TCP上非常薄的一层,会将字节流转化为文本/二进制消息,因此,对于实际应用来说,WebSocket的通信形式层级过低,因此,可以在WebSocket之上使用跺脚协议,来为浏览器和服务器间的通信增加适当的消息语义。

<强>跺脚与WebSocket的关系:

<李>

HTTP协议解决了网页浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写网络应用,你可能认为这是一件疯狂的事情,

<李>

直接使用WebSocket (SockJS)就很类似于使用TCP套接字来编写网络应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义。

<李>

同HTTP在TCP套接字上添加请求——响应模型层一样,踩在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义。

<强>代码实现

代码中除了最基本的连接,还设置了一个定时器,每隔十秒发送一条数据到服务器端,如果发生错误,抓住这个错误,重新建立连接。

//,安装并引入相关模块
　　import  SockJS 得到& # 39;sockjs-client& # 39;,,
　　import  Stomp 得到& # 39;stompjs& # 39;;
　　export  default  {
　　,数据(){
　　return {才能
　　,,dataList: []
　　,,};
　　},
　　,安装:函数(){
　　this.initWebSocket才能();
　　},
　　,beforeDestroy: function  (), {//才能,页面离开时断开连接,清除定时器
　　this.disconnect才能();
　　clearInterval才能(this.timer);
　　},
　　,方法:{
　　initWebSocket才能(),{
　　this.connection才能();
　　let 才能;self =,;//,才能断开重连机制,尝试发送消息,捕获异常发生时重连
　　this.timer 才能=,setInterval((),=祝辞,{
　　,,try  {
　　,,self.stompClient.send (“test");
　　,,},catch  (err), {
　　,,console.log(“断线了:,“,+,犯错);
　　,,self.connection ();
　　,,}
　　,,},5000);
　　,,},
　　removeTab才能(targetName), {
　　console.log才能(targetName)
　　,,},
　　连接才能(),{//,才能建立连接对象
　　this.socket 才能=,new  SockJS (& # 39; http://xxxxxx: 8089/ws # 39;);//连接服务端提供的通信接口,连接以后才可以订阅广播消息和个人消息//,才能获取跺子协议的客户端对象
　　时间=this.stompClient 才能;Stomp.over (this.socket);//,才能定义客户端的认证信息,按需求配置
　　var 才能;headers =, {
　　,才能登录:& # 39;mylogin& # 39;
　　,,,密码:& # 39;mypasscode& # 39;
　　,,//additional 头
　　,,& # 39;client-id& # 39;:, & # 39; my-client-id& # 39;
　　,,};//,才能向服务器发起websocket连接
　　this.stompClient.connect才能(头(帧),=祝辞,{
　　,,this.stompClient.subscribe(& # 39;/主题/chat_msg& # 39;,,(味精),=祝辞,{,//订阅服务端提供的某个话题
　　,,consolel.log (msg.body);,//, msg.body存放的是服务端发送给我们的信息
　　,,});
　　,,},(err),=祝辞,{
　　,,
　　,,});
　　
　　,,},
　　断开(),{才能
　　if 才能;(this.stompClient  !=, null), {
　　,,this.stompClient.disconnect ();
　　,,console.log (“Disconnected");
　　,,}
　　,,}
　　,}
　　};
怎么在vue中使用SockJS实现与webSocket进行通信