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}`)
}, * * )
}
参考博客: https://www.cnblogs.com/tugenhua0707/p/8648044.html
如果不正确的,请多多指教!!!
遇见关于websocket的问题,会继续更新的~~~
最新文章
- SQL SERVER 2000数据库置疑处理
- eclipse新建maven项目(1)
- 【Java IO】FileInputStream 和 FileOutputStream
- Entity Framework 无法对没有主键的视图映射实体的解决办法
- Java / JVM CPU 利用率高 - 诊断方法 1 - Thread Dump 结合 OS 诊断
- System.Windows.Forms.AxHost.InvalidActiveXStateException”类型的异常在 ESRI.ArcGIS.AxControls.dll 中发生,但未在用户代码中进行处理
- hdu 1196
- SQL2-子查询、join查询
- CentOS 5.8 x64 安装TomCat
- js原生设计模式——2面向对象编程之js原生的链式调用
- Vue事件处理
- MFC:关联变量
- 论文翻译:BinaryConnect: Training Deep Neural Networks with binary weights during propagations
- 什么是BFC
- WPF: 实现带全选复选框的列表控件
- 解决";mysql-bin.000001";占用超大空间的问题
- SET ARITHABORT {ON | OFF}讲解
- Sql server 索引详解
- MOSFET 线路 12V 无法工作的问题(等待回复)
- 工具类之数据库工具类:DBUtil(採用反射机制)