聊天功能我们在项目开发的过程中经常会遇到，目前已经有很多平台有比较成熟的方案，比如环信、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)
}
})
