原生小程序中使用WebSocket实现聊天功能。

聊天功能我们在项目开发的过程中经常会遇到，目前已经有很多平台有比较成熟的方案，比如环信、GoEasy、极光IM、有客等很多。但是这些目前基本上都是需要收费，如果想免费，那就需要自己来开发！

1、先了解WebSocket各个API的作用和使用方式。

1、wx.connectSocket

创建一个 WebSocket 连接。

wx.connectSocket({
  url: 'wss://example.qq.com',
  header:{
    'content-type': 'application/json'
  },
  protocols: ['protocol1']
})

2、wx.onSocketOpen

监听 WebSocket 连接打开事件。

wx.onSocketOpen(function (res) {})

3、wx.sendSocketMessage

通过 WebSocket 连接发送数据。发送消息前请先确保socket已经正确连接。

  wx.sendSocketMessage({
      data:msg
    })

4、wx.onSocketMessage

监听 WebSocket 接受到服务器的消息事件。在这里可以对接收到的数据做一些处理。

      wx.onSocketMessage(function (res) {
        console.log(res)
      });

5、wx.onSocketClose wx.onSocketError

这两分别是监听 WebSocket 连接关闭事件。 监听 WebSocket 错误事件。

   wx.onSocketClose(function (res){
      console.info("close: " + res);
    })
    
   wx.onSocketError(function (res) {
      console.log(res)
      wx.showToast({
        title: '连接失败，请重试！',
        icon: "none",
        duration: 2000
      })
    })

6、wx.closeSocket

wx.onSocketOpen(function() {
  wx.closeSocket()
})

wx.onSocketClose(function(res) {
  console.log('WebSocket 已关闭！')
})

2、WebSocket实现聊天功能

1、socket的链接

在页面加载后首先进行socket的链接。

   wx.connectSocket({
      url: socketUrl,
      header: {
        'content-type': 'application/json'
      },
      success: function () {
        console.log('websocket连接成功~')
      },
      fail: function () {
        console.log('websocket连接失败~')
      }
    })

2、监听链接

在通过onSocketOpen监听到webSocket已经链接后，首先需要给服务器发送心跳，防止断连。
其次，需要通过wx.onSocketMessage来监听来自服务器的消息，对数据进行处理，以便给用户呈现聊天记录。

   wx.onSocketOpen(function (res) {
      // 在此处添加心跳
      heart = setInterval(function () {
        wx.sendSocketMessage({
          data: 'ping',
          success: function (e) {
            console.log('发送ping成功')
          },
          fail: function (e) {
          },
        })
      }, 10000)

      //接受服务器消息
      wx.onSocketMessage(function (res) {
        console.log(res)
        if (res.data == 'PONG') {
          return
        }
        var data = JSON.parse(res.data)
        console.log(data)
      });
    });

3、发送消息

需要准备好发送的内容，和目标人的ID。

var data = {
        "msgContent": that.data.sendtext,
        "targetId":that.data.userId
      }
 wx.sendSocketMessage({
          data: JSON.stringify(data),
          success: function (e) {
            console.log('发送成功')
          },
          fail: function (e) {
            wx.showToast({
              title: '发送失败',
              icon: 'none',
              duration: 2000
            })
          },
        })     

4、断连处理

在聊天的过程中，我们需要防止webSocket断连，导致用户接收不到消息，尽管已经做了心跳包，但是也不能保证万无一失，所以在监听链接失败时，需要做一些处理。

    wx.onSocketError(function (res) {
      console.log(res)
      //在此处对webSocket进行重连
      if (heart) {
        clearInterval(heart)
      }
    })