国产/涩/福利在线,巨乳少妇在线

最近做了一個小程序的猜歌內(nèi)項目，因為有排位賽和好友對戰(zhàn)，所以用到webSocke這項技術(shù)。
先貼個基本設(shè)計稿吧：

image.png

小程序直接封裝了webSocke的使用方法，讓我們用起來更簡單和方便：
1.創(chuàng)建一個webSocke的鏈接
//鏈接websocket
wx.connectSocket({
url: roomConfig.wsurl （開發(fā)者服務(wù)器接口地址，必須是 wss 協(xié)議，且域名必須是后臺配置的合法域名）
});

2.wx.onSocketOpen(CALLBACK) （監(jiān)聽WebSocket連接打開事件。）
注：鏈接服務(wù)后測試鏈接狀態(tài)
wx.onSocketOpen(function(res) {
console.log('WebSocket連接已打開！')
})

3.wx.onSocketError(CALLBACK) （監(jiān)聽WebSocket錯誤。）
注：這個方法如果追求業(yè)務(wù)嚴(yán)謹(jǐn)性，加一個必然是好的。嘿嘿~~~~
wx.onSocketError(function(res){
console.log('WebSocket連接打開失敗，請檢查！')
})

wx.sendSocketMessage(OBJECT)

通過 WebSocket 連接發(fā)送數(shù)據(jù)，需要先 wx.connectSocket，并在 wx.onSocketOpen 回調(diào)之后才能發(fā)送。

發(fā)送數(shù)據(jù)這里我簡單記錄一下?！皊endSocketMessage(要發(fā)送的內(nèi)容)”;

微信的官方文檔在這里從頭到尾寫了一個詳細(xì)的例子，帶上了一個for循環(huán)，如下：
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) {
//這里就是發(fā)消息的地方，只有走了這個方法才能接收到消息
wx.sendSocketMessage({
data:msg
})
} else {
socketMsgQueue.push(msg)
}
}
微信官方文檔其實還是很給力的，在里給官方點個贊。
但是我之后用的很不習(xí)慣，因為需要用的地方實在是太多，直接給扔到了app.js（官方自定義的js里面）
//排位，好友對戰(zhàn)
webSocke: function ( {
//鏈接websocket
wx.connectSocket({
url: roomConfig.wsurl
});

},
//發(fā)消息
sendSocketMessage: function (msg) {
wx.sendSocketMessage({
data: JSON.stringify(msg)
})
},
可能個人感覺webSocke是個比較穩(wěn)定的技術(shù)，發(fā)消息的地方并沒有想官方那樣寫，然后在鏈接的地方加了條判斷，如果鏈接失敗，讓它繼續(xù)鏈接就好。（個人做法，不建議每個去使用）；

5.wx.onSocketMessage(CALLBACK)（監(jiān)聽WebSocket接受到服務(wù)器的消息事件。）
注：這里是重點，只要做關(guān)于及時聊天的業(yè)務(wù)，所有的邏輯必須在此方法里面去跑通邏輯。（小白踩坑，百事不爽）
wx.onSocketMessage(function(res) {
console.log('收到服務(wù)器內(nèi)容：' + res.data)
//所有接收到的消息都是字符串，因為發(fā)消息的時候同時必須轉(zhuǎn)字符串才能發(fā)送。這里使用數(shù)據(jù)必須轉(zhuǎn)對象。
//JSON.parse(res.data)；
})；

6.wx.closeSocket(OBJECT)（關(guān)閉 WebSocket 連接。）
關(guān)閉webSocket服務(wù)，這個服務(wù)還是蠻重要的。（具體看個人的業(yè)務(wù)場景）簡單說明下
這里是官方文檔的說明（這里小白看看就好，大神跳過）：

//注意這里有時序問題，
//如果 wx.connectSocket 還沒回調(diào) wx.onSocketOpen，而先調(diào)用 wx.closeSocket，那么就做不到關(guān)閉 WebSocket 的目的。
//必須在 WebSocket 打開期間調(diào)用 wx.closeSocket 才能關(guān)閉。
wx.onSocketOpen(function() {
wx.closeSocket()
})

wx.onSocketClose(function(res) {
console.log('WebSocket 已關(guān)閉！')
})

其實當(dāng)使用wx.closeSocket()這個方法的時候，你的服務(wù)就已經(jīng)關(guān)閉。不用太過于糾結(jié)下面的wx.onSocketClose這個方法只是一個關(guān)閉服務(wù)成功的回調(diào)。
就相當(dāng)于你去買東西，你給了錢，明知道東西馬上會到你手里，但是你就想東西一直在你手里一樣。

這里，小程序websocke基本以說明完畢。我貼一下功能實現(xiàn)圖：

這里是排位的