什么是WebSocket？WebSocket在Vue中如何使用？

什么是Websocket？

通俗说， WebSocket是一种数据通信协议，用于客户端和服务端数据通信。类似于http协议，但http协议通信只能由客户端发起，就比如我们客户端向服务器发送请求，服务器只会返回给我们查询的结果，不能做到服务器主动向客户端推送消息。

我们想要双向对话，且服务器有连续的状态变化，我们可以使用"轮询"的方法：每隔一段时间，就发送一个请求，服务器返回给我们最新的状态。但是这样会非常浪费资源（需要不停的连接服务器，或者HTTP始终打开着），效率就非常低了。

所以最有效的解决方法就是使用WebSocket：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向对话。

Vue中使用WebSocket

首先我们需要先New WebSocket构造函数

let url = config.wsUrlthis.ws = new WebSocket(url)

之后我们就可以在ws上去监听WebSocket状态

监听WebSocket连接

this.ws.addEventListener("open", e => {console.log('连接已经建立！');//连接建立完成后我们就可以发送消息    this.ws.send("heartbeat");  //发送消息})//或者
this.ws.onopen = () => {console.log('连接已经建立！');
}

监听WebSocket接收消息

this.ws.addEventListener("message", (e) => {console.log('收到消息！', e);//收到消息后我们就可以对消息进行处理
})
//或者
this.ws.onmessage = (e) => {console.log('接受到信息', e);
}

监听WebSocket连接关闭

this.ws.addEventListener("close", (e) => {console.log('连接已断开！');})//或者
this.ws.onclose = () => {console.log('连接已断开！');
}

监听WebSocket错误

this.ws.addEventListener("error",(e)=>{console.log('报错', e);
})
//或者
this.ws.onclose = (e) => {console.log('报错', e);
}

实际如何使用：

initWebSocket() {this.flag = false   //通过flag对websocket关闭后再重启//这里我把请求的路径放在了config文件中了（ws://10.168.245.148:7001）let url = config.wsUrlthis.ws = new WebSocket(url)this.ws.addEventListener("open", e => {this.sendHeartbearTime = new Date().getTime()  //发送心跳时间this.getHeartbearTime = new Date().getTime()   //接收心跳时间this.timer = setInterval(_ => {this.sendHeartbearTime = new Date().getTime()  //重新获取发送心跳时间if (this.sendHeartbearTime - this.getHeartbearTime >= 20000 || !this.ws) {//间隔20s心跳超时重启clearInterval(this.timer)  //清除定时器this.flag = truethis.ws && this.ws.close()} else {//向服务器发送消息this.ws.send("heart");}}, 1000);})this.ws.addEventListener("message", (e) => {console.log("收到消息", e);try {if (e.data != 'heart') {//处理接收后的操作} else {this.getHeartbearTime = new Date().getTime()  //重新获取接收心跳开始时间}} catch (e) {console.log(e);}})this.ws.addEventListener("close", (e) => {this.ws = nullif (this.flag) this.initWebSocket() //重启websocket})this.ws.onerror = e => {this.ws = nullconsole.log("错误", e);}
},
created() {//渲染的DOM开始时创建连接this.initWebSocket()
},
beforeDestroy() {//DOM销毁之前关闭连接this.ws && this.ws.close()
},

参考连接：
Vue-WebSocket原理及使用
Vue 使用websocket

什么是WebSocket？WebSocket在Vue中如何使用？相关推荐

【Web通信】WebSocket详解：WebSocket是什么？如何使用WebSocket？在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
一.WebSocket相关定义 1. WebSocket定义 WebSocket 是一种基于TCP的全双工通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法.数据可以作为" ...
vue全局安装jquery，vue使用bootstrap框架，vue中封装websocket通讯，vue引入element-ui 组件库，引入highcharts图表插件
vue安装jquery: 1.使用vue-cli创建好vue项目后,在项目文件夹下,使用命令npm install jquery --save-dev 引入jquery. 2.修改项目文件 build ...
如何在Vue中使用websocket？
什么是WebSocket : WebSocket是一种在单个TCP连接上进行全双工通信的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范. W ...
在vue中使用SockJS实现webSocket通信
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助 ...
c语言实现stomp协议客户端,在vue中使用SockJS实现webSocket通信
最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些 ...
关于websocket 在生产环境中遇到的问题及解决办法
关于websocket 在生产环境中遇到的问题及解决办法参考文章: (1)关于websocket 在生产环境中遇到的问题及解决办法 (2)https://www.cnblogs.com/ta ...
Vue中预览HIKVSION海康威视的NVR(网络硬盘录像机)中多个通道(摄像机)的视频
场景 SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版): SpringBoot+Vue+HIKVSION实现摄像头多选并多窗口预览(插件版)_霸道流氓气质的博客-CS ...
视频教程-在Vue中使用GraphQL实现聊天室-Vue
在Vue中使用GraphQL实现聊天室某大厂资深前端工程师,多个大型web项目经验,JS全栈工程师,擅长前端工程化建设.hybrid技术方向. 大碗 ¥39.00 立即订阅扫码下载「CSDN程序员 ...
Vue学习（四）—— vue中的ajax
文章目录第四部分 vue中的ajax 一.axios 1.安装 2.引入二.vue脚手架配置代理 1.方法一 2.方法二三.github用户搜索案例 1.接口地址 2.vue 项目中常用的 2 ...

什么是WebSocket？WebSocket在Vue中如何使用？

什么是WebSocket？WebSocket在Vue中如何使用？

什么是Websocket？

Vue中使用WebSocket

什么是WebSocket？WebSocket在Vue中如何使用？相关推荐

最新文章

热门文章