WebSocket的使用以及原理

一.WebSocket的介绍

1. WebSocket是HTML5提供的一种在单个TCP连接进行的全双工通讯的协议。
2. WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就可以数据互相传输。
3. WebSocket最大的特带你介绍服务器可以主动向客服端推送消息，客服端也可以主动向服务器发送信息，是真正的双向平等对话。
4. WebSocket使得客服端和服务器之间的数据交换变得更加简单，允许服务端主动向客服端推送数据。只需要完成一次握手，两者就可以创建持久性的连接，并进行双向数据传输。

二.为什么要使用WebSocket

可能很多人会说有HTTP协议为什么要用这个，因为HTTP通信只能由客服端发起,HTTP协议做不到服务器主动向客服端推送信息。

三.WebSocket事件

四.WebSocket方法

五.WebSocket的使用

1.封装工具类在utils创建socket.js

/**
 * @param { String } url WebSocket连接地址
 * @param { Object } heartbeatParams 心跳参数
 */
export default class Socket {
  constructor (url, heartbeatParams = null) {
    if (typeof WebSocket === 'undefined') {
      console.warn('您的浏览器不支持websocket')
    } else {
      // 实例化socket
      const { host, protocol } = window.location
      const webSocketServe = `${protocol === 'https:' ? 'wss' : 'ws'}://${host}`
      this.socket = new WebSocket(webSocketServe + url)
      this.open()
      this.error()
      this.heartbeatParams = heartbeatParams
    }
  }

  open () {
    this.socket.onopen = e => {
      console.log('websocket连接成功')
      if (e.target.readyState === 1) {
        this.startHeartBeat()
      }
    }
  }

  error () {
    this.socket.onerror = err => {
      console.error(err)
    }
  }

  close () {
    this.socket.onClose = e => {
      console.log('WebSocket已断开')
    }
    this.socket.close()
  }

  startHeartBeat () {
    setInterval(() => {
      const obj = {
        ...this.heartbeatParams,
        timestamp: Date.now()
      }
      this.socket.send(obj)
    }, 1800000)
  }
}

2.再在api下创建一个webSocketRequest.js用于存放多个请求地址

export const WebSocketApi = {
  web1: '地址.....', //这样的好处就是写多个导出
  .........
}

3.在需要的页面导入

 

// 使用
     initSocket() {
      const socketInstance = new Socket(
        WebSocketApi.web1,
        "heart"
      );
      const { socket } = socketInstance;
      socket.onmessage = (e) => {
        const eventInfoList = JSON.parse(e.data);
      };
      this.$once("hook:beforeDestroy", () => { //页面销毁之前关闭
        socket.close();
      });
    },