vue中如何使用websocket

文章目录

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

一、什么是websocket？

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

二、什么情况下使用websocket？

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

三、websocket的使用场景

1. 弹幕聊天
2. 协同编辑
3. 社交聊天
4. 体育赛况
5. 在线教育
6. 智能家居
7. 实时打分系统

四、我的使用场景

实时统计各人员打分情况，并可以控制计时器的开始、暂停、结束
如果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(); //断开心跳连接
},

七、心跳机制

为什么要有心跳机制呢？就是为了确保连接的稳定性，说白了就是客户端通过心跳的形式告诉服务端“我”还活着，连接请不要断开。

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