Websocket 使用

Yang2022年10月14日大约 1 分钟

普通 HTML 中使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      // WebSocket 测试
      var ws = new WebSocket('ws://websocket.org')

      switch (ws.readyState) {
        case WebSocket.CONNECTING:
          // 值为 0，表示正在连接
          break
        case WebSocket.OPEN:
          // 值为 1，表示连接成功，可以进行通信了
          break
        case WebSocket.CLOSING:
          // 值为 2，表示连接正在关闭
          break
        case WebSocket.CLOSED:
          // 值为 3，表示链接已关闭，或者打开连接失败
          break
        default:
          // 不存在其他情况
          break
      }

      // 用于指定连接成功后的回调函数
      ws.onopen = function () {
        // 发送数据
        ws.send('Hello Server!')
      }
      ws.addEventListener('open', function (event) {
        // 发送数据
        ws.send('Hello Server!')
      })

      // 用于指定连接关闭后的回调函数
      ws.onclose = function (event) {
        var code = event.code
        var reason = event.reason
        var wasClean = event.wasClean
      }
      ws.addEventListener('close', function (event) {
        var code = event.code
        var reason = event.reason
        var wasClean = event.wasClean
      })

      // 用于指定收到服务器数据后的回调函数
      ws.onmessage = function (event) {
        var data = event.data
      }
      ws.addEventListener('message', function (event) {
        var data = event.data
      })

      // 用于指定报错时的回调函数
      ws.onerror = function (event) {
        // 错误处理
      }
      ws.addEventListener('error', function (event) {
        var data = event.data
      })

      // 判断发送是否结束
      var data = new ArrayBuffer(10000000)
      wx.send(data)
      if (wx.bufferedAmount === 0) {
        // 发送完毕
      } else {
        // 发送还没有结束
      }
    </script>
  </body>
</html>

Vue 中使用

export default {
  name: 'userCenter',
  data() {
    return {
      websocket: null
    }
  },
  created() {
    this.initWebSocket()
  },
  methods: {
    initWebSocket() {
      //初始化weosocket
      this.websocket = new WebSocket('ws://websocket.org')
      this.websocket.onmessage = this.websocketonmessage
      this.websocket.onopen = this.websocketonopen
      this.websocket.onerror = this.websocketonerror
      this.websocket.onclose = this.websocketclose
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      // setInterval(() => {
      //   let actions = { test: '12345' }
      //   this.websocketsend(JSON.stringify(actions))
      // }, 2000)
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket()
    },
    websocketonmessage(e) {
      //数据接收
      const result = JSON.parse(e.data)
      console.log(result)
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data)
    },
    websocketclose(e) {
      //关闭
      console.log('断开连接', e)
    }
  },
  unmounted() {
    //离开路由之后断开websocket连接
    this.websock.close()
  }
}