Websocket使用方案详解（uniapp版）

主要目的：创建socket类，导出socket实例，引入使用。

一 初始化变量

SocketUrl 基础路由(根据开发和生产不同环境配置的变量)

SockStart 记录是否已发出请求，防止请求多次发送

二 初始化操作

2.1 打开socket错误监听

uni.onSocketError(function (res) {
this.socketStart = false
console.log('WebSocket连接打开失败，请检查！')
})

2.2 WebSocket关闭监听

    uni.onSocketClose((res) => {
      console.log('WebSocket 已关闭！')
      this.socketStart = false
      setTimeout(() => {
        this.init(this.socketType)
      }, 3000)
    })

三 接收消息

uni.onSocketMessage((res) => {
  console.log('APP:--》收到服务器内容：')
  let data = JSON.parse(res.data)
  // console.log('收到服务器内容：', data);
  this.acceptMessage && this.acceptMessage(data)
})

可以看到消息监听中调用了acceptNessage方法，后续通过给改方法赋值就可以在获取到消息时执行对应的函数。

四 其他方法

类中主要的方法除了上面提到的错误监听、关闭监听、接收消息以外，还需要init启动函数，send发送消息函数（如果是做消息接收这种非互动的功能就不需要了），和关闭socket的函数（在用户退出或其他情况时调用）。

init函数中首先判断socket是否已启动（使用socketStart变量），已启动就退出方法，不做操作。否则使用对应url发出请求，注意socket的链接以wss或ws开头，

.replace('https://', 'wss://').replace('http://', 'ws://') 

然后启用webSocket，使用uni.connectSocket方法即可。

  uni.connectSocket({
      url: url,
      method: 'GET',
      protocols: [token],
    })

然后监听socket函数，确认打开后将socketStart置为true.

```javascript
uni.onSocketOpen((res) => {
  this.socketStart = true
  callback && callback()
  console.log('WebSocket连接已打开！')
})

关闭socket方法比较简单，调用api即可，别忘了改变socketStart的值。

closeSocket() {
    uni.closeSocket()
    this.socketStart = false
  }

五 最终

以上，一个基于uniapp的包括socket启动、接受消息、关闭、错误监听等基础功能的socket使用类就做好了。让我们试着用它吧。

import socket from '@/common/socket'
socket.init('websocket')
socket.acceptMessage = function (res) {...}

取到消息后我们可以给uniapp的tabbar上设置角标。

uni.setTabBarBadge({
  index: 1,
  text: msgCount2.value.length + '',
})

在进行查看动作后取消角标。

  uni.removeTabBarBadge({
    index: 1,
  })