Vue项目中如何快速使用上webSocket？

开源

个人开源的leno-admin后台管理项目，前端技术栈：reactHooks、ant-design；后端技术栈：koa、mysql、redis，整个项目包含web端、electron客户端、mob移动端、template基础模板，能够满足你快速开发一整套后台管理项目；如果你觉得不错，就为作者点个✨star✨吧，你的支持就是对我最大的鼓励；

演示地址

文档地址

源码github地址

前言

最近新入职了一家公司，公司是搞新能源机器制造的，要求搞一个机器数据的实时展示，数据的更新频率要求是100ms ~ 500ms，这个速度用http来做的话可能达不到，频繁的三次握手四次挥手，极容易造成网络请求堵塞，经过我和后端的测试，在内网条件下，http最快接收速度也就为400ms~500ms之间，完全达不到公司的要求，最终我们选定了webSocket来做数据传输；webSocket只需要开始的一次连接，之后每次数据传输都无需连接，最终数据的传输频率能够到达公司要求；

在Vue中使用webSocket

我个人在vue中是直接使用的原生webSocket的，并没有使用vue-socket.io npm包，个人感觉配置比较麻烦，而且还会增加最终打包的文件体积，还是使用原生的更加舒服一些；

上代码~🐱‍🐉

methods:{
   // 初始化weosocket
    initWebSocket() {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持WebSocket')
      } else {
        const wsurl = '此处填写地址，地址使用ws开头，不是http'
        // 实例化 WebSocket
        this.websock = new WebSocket(wsurl)
        // 监听 WebSocket 连接
        this.websock.onopen = this.websocketonopen
        // 监听 WebSocket 错误信息
        this.websock.onerror = this.websocketonerror
        // 监听 WebSocket 消息
        this.websock.onmessage = this.websocketonmessage
        // 监听 webSocket 断开信息
        this.websock.onclose = this.websocketclose
      }
    },
    // 连接建立之后执行send方法发送数据
    websocketonopen() {
      console.log('socket连接成功')
    },
    // 连接建立失败重连
    websocketonerror() {
      console.log('连接错误')
      this.initWebSocket()
    },
    // 数据接收
    websocketonmessage(e) {
       console.log(e.data)
    },
    // 数据发送
    websocketsend(Data) {
      this.websock.send(Data)
    },
    // 关闭
    websocketclose(e) {
      console.log('WebSocket 断开连接', e)
    }
   }
   
   // 进入页面vue实例化后，进行请求连接
  created() {
    this.initWebSocket()
  },
  destroyed() {
    // 离开路由之后断开 websocket 连接
    this.websock.close()
  },

结语

本文是个人这段时间webSocket的一些简单使用经验，没有对webSocekt的底层进行探讨，后面随着项目的进度加深，我也会第一时间更新我个人对项目的最新使用感受，谢谢！