vue中如何使用websocket-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中如何使用websocket。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

文章目录

1. 什么是websocket
2. 什么情况下使用websocket？
3. websocket的使用场景
4. 我的使用场景
5. 安装reconnecting-websocket
6. 逻辑处理
7. 心跳机制

一、什么是websocket？

WebSocket是一种在单个TCP连接上进行全双工通信的协议
WebSocket API被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据
浏览器和服务器只需要完成一次握手，就可以创建永久性连接，并进行双向数据传输

二、什么情况下使用websocket？

高实时性
信息即时更新
数据实时双向传输
传统的通过轮询http浪费资源，消耗性能

三、websocket的使用场景

弹幕聊天
协同编辑
社交聊天
体育赛况
在线教育
智能家居
实时打分系统

四、我的使用场景

实时统计各人员打分情况，并可以控制计时器的开始、暂停、结束
如果websocket断开将进行重新连接

五、安装reconnecting-websocket

npm install reconnecting-websocket --save

六、逻辑处理

import ReconnectingWebSocket from "reconnecting-websocket";
data() {
    return {
      scoket: null,
      heartTimer: null
    };
  },

created() {
	this.initWebSocket();
},

methods: {
	//websocket初始化
    initWebpack() {
      this.scoket = new ReconnectingWebSocket('ws://xxx.xxx.xxx');
      // websocket四个生命周期
      this.scoket.onopen = this.socketOpen;
      this.scoket.onmessage = this.socketonMessage;
      this.scoket.onclose = this.socketClose;
      this.scoket.onerror = this.socketError;
    },
    //建立连接
    socketOpen(e) {
		this.heartbeat()
    },
    //信息接收
    socketonMessage(response){
    
    }
    //断开连接
    socketClose(){
    
    },
    //连接失败
    socketError(){
    
    }
},
beforeDestroy() {
  clearInterval(this.heartTimer); //清除心跳计时器
  this.scoket.close(); //断开心跳连接
},

七、心跳机制

为什么要有心跳机制呢？就是为了确保连接的稳定性，说白了就是客户端通过心跳的形式告诉服务端“我”还活着，连接请不要断开。文章来源地址https://www.toymoban.com/news/detail-541612.html

// 定时向服务器发送心跳标识
heartbeat(){
	this.heartTimer = setInterval(() => {
      if (this.scoket.readyState == 1) {
        this.scoket.send("heartCheck");
      }
    }, 5000);
}