Vue WebSocket应用

最近写一个项目需求中需要前端和后端建立实时通信，以往都是前端主动触发调用接口的方式主动去拉取接口数据，但是这次需要后端通知前端数据变动了，页面需要有交互或者更新了，所以以下作为记录，有问题的话请指教^_^！

HTML5 为 Web 应用带来了一种新的通信方式，它不同于 Ajax 通信方式在于 Websocket 是一种客户端与服务器端可以双工通信，客户端不仅可以拉取服务器端的数据，而且服务器端可以主动的向客户的推送数据。这样一来在 Web 应用中可以实现更多的数据交互方式，完成更佳好的数据体验。

在 Websocket 出现之前，网站为了实现这种即时通信，都是采用轮询拉取服务端的数据，虽然这种方式可以完成类似于数据推送的通信，但是在即时性和性能上都不如 Websocket 技术。

什么是WebSocket？
WebSocket 是一种网络通信协议，就类似于 HTTP 也是一种通信协议。WebSocket是HTML5开始提供的一种在单个TCP 连接上进行全双工（通讯双方既是接收方也是发送方，两端设备可以同时发送和接收数据）通讯的协议。

这种长链接的双工通信方式让 Web 应用在体验上又更佳提升了一部，并且在性能上面有了一定的提升，它让 Web 的数据更佳实时的展现出来，并且它让 Web 应用拓展到即时通讯、游戏等行业，让 Web 的应用性更佳的宽广。

代码如下：

data() {
    return {
      //websocket 配置
      websocket: null,
	  // WebSocket 后端地址
	  WebSocket_URL: '',
      reconnectTimer:null,
    }
  },

mounted(){
    // 调用WebSocket
		this.initSysWebsocket();
    //绑定事件
		window.addEventListener('beforeunload', (e) => this.onbeforeunload());
  },

beforeDestroy() {
    // 组件销毁前清除定时器
    clearInterval(this.timer);
    this.onbeforeunload()
  },
methods: {
  initSysWebsocket() {
      try {
          // 判断浏览器是否支持WebSocket
          if ('WebSocket' in window) {
              // console.log(this.WebSocket_URL)
              // 正式环境参数
              this.websocket = new WebSocket(this.WebSocket_URL);
              // console.log(this.websocket)
              this.initWebSocket()
          } else {
              alert('当前浏览器 不支持')
          }
      } catch (e) {
          // console.log('尝试创建连接失败')
          //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
          this.reConnect()
      }
    },
    reConnect() {
        console.log('重连')
        //重连函数
        var that = this
        // if (this.isConnect) return
        this.reconnectTimer && clearInterval(this.reconnectTimer)
        // 如果 this.rec 存在，清除与之关联的定时器
        this.rec && clearTimeout(this.rec)
        // 延迟5秒重连  避免过多次过频繁请求重连
        this.rec = setTimeout(function () {
            that.initSysWebsocket();
        }, 5000)
    },
    initWebSocket() {
        // this.isConnect = true
        // 连接错误
        this.websocket.onerror = this.setErrorMessage
        // 连接成功
        this.websocket.onopen = this.setOnopenMessage
        // 收到消息的回调
        this.websocket.onmessage = this.setOnmessageMessage
        // 连接关闭的回调
        this.websocket.onclose = this.setOncloseMessage
        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = this.onbeforeunload
    },
    // 连接错误
    setErrorMessage() {
        //调用重连函数
        this.reConnect()
        console.log('WebSocket连接发生错误   状态码：' + this.websocket.readyState)
    },
    // 连接成功 添加心跳监测，用来防止websocket断开
    setOnopenMessage() {
        let that = this
        console.log('WebSocket连接成功    状态码：' + this.websocket.readyState)
        that.reconnectTimer = setInterval(function () {
            console.log('WebSocket发送信息：' + "心跳：" + new Date().toLocaleString())
            that.websocket.send('心跳：' + new Date().toLocaleString());
        }, 6 * 1000);
    },
    // 接受消息的回调
    setOnmessageMessage(event) {
        const dataJson = JSON.parse(event.data);
        //接受到数据后播放音频和获取最新数据
        // console.log('接受的WebSocket参数', dataJson);
    },
    // 连接关闭的回调
    setOncloseMessage() {
        // this.isConnect = false
        // 重连
        this.reConnect()
        // console.log("connection closed (" + e.code + ")")
        console.log('WebSocket连接关闭    状态码：' + this.websocket.readyState)
    },
    onbeforeunload() {
      this.closeWebSocket()
    },
    closeWebSocket() {
      clearInterval(this.reconnectTimer)
      this.websocket.close();
      this.websocket.onclose = function (evt) {
          console.log("websocket已关闭");
      };
    },
}

2、还有一种方式就是用socket.io-client，网上有很多文章可以参考，我就不细说了哈！

需要前后端沟通保持一致的技术方案

socket.io-client 它是一个基于Websocket的CS（客户端-服务端）的实时通信库，使用它可以在后端提供一个即时通讯服务，它提供的也有一个 JS 库，在前端可以去链接后端 socket.io 创建的服务。

结语：好啦，文章就写到这里了，希望文章能对你有所帮助，也感谢您为本文花费的时间，谢谢！