vue + websocket 的使用

 

阳光正好，咱们正在努力前行。

一。引言

初始使用websocket ,一开始看文档的时候，以为很简单，只须要建立websocket实例，而后有几个监听打开链接，监听关闭链接，监听链接异常等方法。可是， 在项目中使用的时候，就会发现 不是那么的简单 。。。经过这篇博客可以给你们讲一下什么是websocket ,如何在项目中实际去使用websocket。

二。什么是websocket

WebSocket是一种在单个TCP链接上进行全双工通讯的协议(摘自维基百科)。咱们都知道Http协议，通讯由客户端发起。可是，有需求须要咱们在客户端不发起通讯的时候，由服务器端发送，此时就须要websocket了。

websoket是经过客户端向服务器创建链接，保持客户端和服务器端双向的通讯的过程。

三。websocket 的使用

 1>readyState属性返回实例对象的当前状态。共四种：

　　CONNECTING：值为0，表示正在链接。

　　OPEN：值为1，表示链接成功，能够通讯了。

　　CLOSING：值为2，表示链接正在关闭。

　　CLOSED：值为3，表示链接已经关闭，或者打开链接失败。

2> onopen： 实例对象的onpen属性，用于指定链接成功后的回调函数。

3>onclose: 实例对象的onclose属性，用于指定链接关闭后的回调函数。

4>onmessage: 实例对象的onmessage属性，用于指定收到服务器 数据后的回调函数。

5>send:实例对象的send()方法用于向服务器发送数据

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};
ws.onerror = function() {
console.log('Connection error‘)
}

 

四。在vue 中如何使用

1》建立websocket链接,同时在websocket实例上挂在上监听打开，监听关闭，监听异常，监听消息的方法

init() {
     let url = 'wss://finance.allhome.com.cn/scanCodeLogin'
       // 建立websocket链接
      this.websock = new WebSocket(url);
　　　　// 监听打开
      this.websock.onopen= this.websockOpen;
　　　　// 监听关闭
      this.websock.onclose = this.websockClose;
　　　　//监听异常
      this.websock.onerror = this.websockError;
　　　　//监听服务器发送的消息
      this.websock.onmessage = this.websockMessage;
    },

2》监听打开，监听关闭，监听异常，监听消息的方法

websockOpen() {
     console.log('监听打开')
 },
websockClose() {
console.log('监听关闭)
},
websockError() {
console.log('监听异常')
}
websockMessage（e） {
console.log('监听服务器发送的消息'，e.data)
}

四。碰见的坑

1>长链接 在长时间不发送消息的时候，会自动断开。缘由是运维那块使用了nginx服务,会配置一个时间段， 在这个时间里，若是一直灭有数据的传输，链接就会在这个时间以后自动关闭。由于咱们没法控制用户何时去触发websocket消息的推送。那么解决方案是：

心跳保持链接:实现心跳检测的思路是： 每隔固定的时间，发送一个数据到服务器，服务器接收以后，返回一个数据给客户端。若是客户端onmessage事件能监听到返回的数据，则表示链接未断开。不然，表示链接断开，须要客户端去从新发送请求进行链接。

start() {
　　　　// 发送心跳
      clearInterval(this.timeoutObj)
      this.timeoutObj = setInterval(() => {
        let date = new Date()
        this.webSocket.send(`发送心跳给后端${date}`)
      }, 2 * 60 * 1000)
    }

参考博客： https://www.cnblogs.com/tugenhua0707/p/8648044.html

若是不正确的，请多多指教！！！

碰见关于websocket的问题，会继续更新的~~~