小程序（webSocke，即时聊天）

2018-07-05 本文已影响0人 ThisWu

最近做了一个小程序的猜歌内项目，因为有排位赛和好友对战，所以用到webSocke这项技术。
先贴个基本设计稿吧：

image.png

小程序直接封装了webSocke的使用方法，让我们用起来更简单和方便：
1.创建一个webSocke的链接
//链接websocket
wx.connectSocket({
url: roomConfig.wsurl （开发者服务器接口地址，必须是 wss 协议，且域名必须是后台配置的合法域名）
});

2.wx.onSocketOpen(CALLBACK) （监听WebSocket连接打开事件。）
注：链接服务后测试链接状态
wx.onSocketOpen(function(res) {
console.log('WebSocket连接已打开！')
})

3.wx.onSocketError(CALLBACK) （监听WebSocket错误。）
注：这个方法如果追求业务严谨性，加一个必然是好的。嘿嘿~~~~
wx.onSocketError(function(res){
console.log('WebSocket连接打开失败，请检查！')
})

wx.sendSocketMessage(OBJECT)

通过 WebSocket 连接发送数据，需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送。

发送数据这里我简单记录一下。“sendSocketMessage(要发送的内容)”;

微信的官方文档在这里从头到尾写了一个详细的例子，带上了一个for循环，如下：
var socketOpen = false
var socketMsgQueue = []
wx.connectSocket({
url: 'test.php'
})

wx.onSocketOpen(function(res) {
socketOpen = true
for (var i = 0; i < socketMsgQueue.length; i++){
sendSocketMessage(socketMsgQueue[i])
}
socketMsgQueue = []
})

function sendSocketMessage(msg) {
if (socketOpen) {
//这里就是发消息的地方，只有走了这个方法才能接收到消息
wx.sendSocketMessage({
data:msg
})
} else {
socketMsgQueue.push(msg)
}
}
微信官方文档其实还是很给力的，在里给官方点个赞。
但是我之后用的很不习惯，因为需要用的地方实在是太多，直接给扔到了app.js（官方自定义的js里面）
//排位，好友对战
webSocke: function ( {
//链接websocket
wx.connectSocket({
url: roomConfig.wsurl
});

},
//发消息
sendSocketMessage: function (msg) {
wx.sendSocketMessage({
data: JSON.stringify(msg)
})
},
可能个人感觉webSocke是个比较稳定的技术，发消息的地方并没有想官方那样写，然后在链接的地方加了条判断，如果链接失败，让它继续链接就好。（个人做法，不建议每个去使用）；

5.wx.onSocketMessage(CALLBACK)（监听WebSocket接受到服务器的消息事件。）
注：这里是重点，只要做关于及时聊天的业务，所有的逻辑必须在此方法里面去跑通逻辑。（小白踩坑，百事不爽）
wx.onSocketMessage(function(res) {
console.log('收到服务器内容：' + res.data)
//所有接收到的消息都是字符串，因为发消息的时候同时必须转字符串才能发送。这里使用数据必须转对象。
//JSON.parse(res.data)；
})；

6.wx.closeSocket(OBJECT)（关闭 WebSocket 连接。）
关闭webSocket服务，这个服务还是蛮重要的。（具体看个人的业务场景）简单说明下
这里是官方文档的说明（这里小白看看就好，大神跳过）：

//注意这里有时序问题，
//如果 wx.connectSocket 还没回调 wx.onSocketOpen，而先调用 wx.closeSocket，那么就做不到关闭 WebSocket 的目的。
//必须在 WebSocket 打开期间调用 wx.closeSocket 才能关闭。
wx.onSocketOpen(function() {
wx.closeSocket()
})

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

其实当使用wx.closeSocket()这个方法的时候，你的服务就已经关闭。不用太过于纠结下面的wx.onSocketClose这个方法只是一个关闭服务成功的回调。
就相当于你去买东西，你给了钱，明知道东西马上会到你手里，但是你就想东西一直在你手里一样。

这里，小程序websocke基本以说明完毕。我贴一下功能实现图：

这里是排位的