因何而生
陸游說的好，“山窮水盡疑無路，柳暗花明又一村”缠劝。
有一段時(shí)間因?yàn)閯e的事情都沒接觸前端了潮梯，之前也沒有寫博客的習(xí)慣，所以很多踩過的坑又結(jié)結(jié)實(shí)實(shí)的再踩了一遍惨恭。最近遇到了這么個(gè)需求秉馏，需要在多個(gè)頁面保持對(duì)特定狀態(tài)的控制。之前做原型測(cè)試時(shí)只做了單頁面的測(cè)試脱羡，沒考慮到在頁面里定義連接的話跨頁會(huì)失效的問題萝究，由此有了以下的改進(jìn)思路。
此文僅為記錄思路的雛形轻黑，若能有更好的思路歡迎指教交流糊肤。
思路
要想 websocket 連接一直保持，必須將連接掛在全局上氓鄙」萑啵回想起使用 Vue 做單頁應(yīng)用時(shí)候就是把連接掛在全局解決的，那這里是不是可以照搬這個(gè)思路呢抖拦？
經(jīng)過嚴(yán)絲合縫的思索（瘋狂研究文檔）升酣，有了如下思路：
/* App.js */
let SocketTask;
let socketPath;
//注意在Launch階段執(zhí)行連接
onLaunch: function () {
const that = this;
let val = that.data.val;
that.websocket(socketPath, val)
},
websocket(url, data) {
const that = this;
SocketTask = wx.connectSocket({
url: url,
data: data,
header: { 'content-type': 'application/x-www-form-urlencoded' }, //不知為何java后端需要設(shè)置此項(xiàng)才能正常通信
method: 'post',
success: res => {
console.log('WebSocket connect', res);
},
fail: err => {
console.log('出現(xiàn)錯(cuò)誤啦！态罪！' + err);
wx.showToast({
title: '網(wǎng)絡(luò)異常噩茄！',
})
}
})
},
//將連接所需參數(shù)暴露到全局，此方法可自定義或取消
wsReconnect() {
const that = this;
that.websocket(socketPath, that.data.val);
}
globalData: {
SocketTask: SocketTask
}
此時(shí)已經(jīng)完成了在全局創(chuàng)建一個(gè) websocket 連接了复颈，連接完成后可以把連接的狀態(tài)管理器通過 globalData 方法暴露到全局绩聘，在 page 中可以通過該狀態(tài)管理器實(shí)際操作 websocket 連接。
/* page */
const app = getApp();
const SocketTask = app.globalData.SocketTask;
onShow: function () {
const that = this;
SocketTask.onOpen(open=> {
console.log("Websocket open");
//...do something
});
SocketTask.onClose(close=> {
console.log("Websocket close");
app.wsReconnect();
//...do something
});
SocketTask.onError(err=> {
console.log(err);
wx.showToast({ title: err});
//...do something
});
SocketTask.onMessage(val=> {
console.log(val);
//...do something
})
},
至此擴(kuò)展已經(jīng)可以正常使用 websocket 處理我們的業(yè)務(wù)邏輯了耗啦。
如果你的程序足夠復(fù)雜凿菩，完全可以把這一部分抽象出來單獨(dú)成為一個(gè) websocket 連接處理模塊，小程序的api在方便開發(fā)的同時(shí)仿佛也給開發(fā)套上了一層不輕的枷鎖帜讲。
結(jié)語
條條大路通羅馬衅谷，解決問題的方法往往不止一種，所謂的最優(yōu)解也可能是暫時(shí)的最優(yōu)似将。
只有解決問題获黔，才是程序設(shè)計(jì)的最終追求。
Clancy Lin
2019.1.15
I can be whatever I want to be
****2019.2.7更新*****
為了更好的利用小程序更新的 SocketTask在验， 更好的思路是在全局開啟一個(gè) websocket 連接并賦值給一個(gè)全局變量進(jìn)行管理玷氏，這樣就可實(shí)現(xiàn)在全局或者不同頁面間監(jiān)聽開啟關(guān)閉的需求。
但是同時(shí)這樣設(shè)置又會(huì)出現(xiàn)一個(gè)新的問題腋舌，在不同頁面里放置的監(jiān)聽器在頁面跳轉(zhuǎn)后仍然存在预茄，在微信沒有對(duì)這個(gè)問題進(jìn)行修正的前提下我的解決思路是自己實(shí)現(xiàn)一個(gè)類路由衛(wèi)士的小插件，每次監(jiān)聽時(shí)判斷當(dāng)前的頁面路由，以實(shí)現(xiàn)不同的業(yè)務(wù)邏輯耻陕。
當(dāng)然，如果邏輯復(fù)雜的話刨沦，完全可以將監(jiān)聽抽象成一個(gè)獨(dú)立的解決插件诗宣，監(jiān)聽到全局并在每次路由變化時(shí)跟路由衛(wèi)士小插件協(xié)作完成操作。
