小程序已掛，原因是個(gè)人開(kāi)發(fā)者無(wú)法提交信息交流類小程序， 不過(guò)在本地運(yùn)行 demo 還是沒(méi)問(wèn)題的。

聊天室基礎(chǔ)配置

小程序端的聊天室信息流其實(shí)非常簡(jiǎn)單， 而本教程就借助一個(gè)好玩兒的小程序聊天室來(lái)進(jìn)一步理解小程序中的 session 實(shí)現(xiàn)。

我們?cè)诖讼纫斫庑〕绦蚨藶楹螣o(wú)法實(shí)現(xiàn) session， 以及如何在小程序?qū)崿F(xiàn) websocket 通信。

在服務(wù)器端我們使用了 ws 包來(lái)實(shí)現(xiàn) websocket ，沒(méi)有使用 socket.io 的原因是 socket.io 需要客戶端有額外的腳本才能實(shí)現(xiàn)通信。

主要邏輯分為幾個(gè)簡(jiǎn)單函數(shù)， 當(dāng)然你需要先配置請(qǐng)求的服務(wù)器域名和小程序賬號(hào)密碼。

// 引入 session 套件， 里面封裝了 wx.login， wx.getUserInfo 等操作
const wafer = require('../../vendors/wafer-client-sdk/index')

// 用于登錄使服務(wù)器獲得 session， 然后服務(wù)器返回的 session 里就會(huì)包含用戶信息了， 用來(lái)在 websocket 里返回發(fā)信息用戶的頭像 url
function login(){
  .....
}

// 用于有新信息時(shí)更新數(shù)據(jù)， msg 指信息， ad 指 websocket 傳回的信息 id， 用于 scroll-into-view 滾動(dòng)
pushMsg(msg, ad) {
  .....
}

// 用于監(jiān)聽(tīng) websocket 連接
listen(){
  .....
}

//  用于小程序發(fā)送 websocket 信息
send(){
  .....
}

基本就是這些， 關(guān)于 websocket 通信過(guò)程是這樣的：

1. 客戶端發(fā)送信息給服務(wù)器 m1
2. 服務(wù)器收到信息后根據(jù)條件返回給客戶端 m2
3. 每個(gè)客戶端收到 m2 后更新視圖

當(dāng)然最開(kāi)始是要與服務(wù)器端 websocket 連接的， 只有每個(gè)連接了的客戶端才可以交流信息。

小程序 session 解析

關(guān)于小程序端的 session 獲取問(wèn)題主要有如下幾個(gè)步驟

1. wx.login 獲取 code
2. wx.request 發(fā)送 code 給自己的服務(wù)器
3. 服務(wù)器收到 code 配合 appId 和 appSecret 發(fā)送給微信服務(wù)器換取 openId 和 sessionKey
4. wx.getUserInfo 會(huì)得到 rawData、signature、encryptedData、 iv， 我們需要把它們發(fā)送到自己服務(wù)器。 我們構(gòu)建自己的 signature2 = sha1(sessionKey + rawData) , 比對(duì) signature 和 signature2 就完成了數(shù)據(jù)校驗(yàn)
5. 服務(wù)端通過(guò) aes-128-cbc 算法對(duì)稱解密 encryptedData 和 iv 然后得到 userInfo 這次得到的 userInfo 里還包含 openId 等信息 「如果在微信開(kāi)放平臺(tái)綁定小程序就會(huì)得到 unionId」
6. 服務(wù)端構(gòu)建 req.session 對(duì)象并返回給小程序，里面包含 id、 userInfo、 sessionKey「小程序傳到服務(wù)器的」、skey 「服務(wù)器自己根據(jù)sessionKey + appId + appSecret 生成， 有過(guò)期時(shí)間」。 而我們自己生成的 skey 是有設(shè)置過(guò)期時(shí)間的， 但小程序端的 session 也有自己的過(guò)期時(shí)間 「應(yīng)該是微信按使用小程序的頻率來(lái)動(dòng)態(tài)設(shè)置過(guò)期時(shí)間的。 wafer 會(huì)自動(dòng)調(diào)用 wx.checkSession 檢查是否過(guò)期， 過(guò)期了就 wx.login」。

在我們的 demo 中就出現(xiàn)了服務(wù)器 session 已經(jīng)過(guò)期而本地 session 還沒(méi)過(guò)期的情況。 而 websocket 每次發(fā)送信息都需要從 req.session 內(nèi)獲取用戶頭像， 所以會(huì)導(dǎo)致 websocket 連接失敗。 但是在小程序端 session 未過(guò)期，即在服務(wù)器端的 sessionKey 和小程序的 sessionKey 不一致了 「客戶端 sessionKey 還在而服務(wù)器的 sessionKey 已經(jīng)過(guò)期銷毀」， 導(dǎo)致比對(duì)失敗。 那怎么辦呢？ 重新請(qǐng)求唄！ 但是因?yàn)?wafer 封裝了 session 管理 「小程序端 session 過(guò)期后才會(huì)重新請(qǐng)求」 存在 session 緩存的緣故， 小程序并沒(méi)有重新發(fā)送信息給自己的服務(wù)器進(jìn)而生成新的 sessionKey， 所以我們?cè)诿恳淮?wx.sendSocketMessage 發(fā)信息的時(shí)候都要檢查服務(wù)器端的 session 情況， 這里需要做簡(jiǎn)單的判斷「websocket 信息有錯(cuò)誤就清除本地 session」讓小程序重新請(qǐng)求服務(wù)器。

websocket 信息發(fā)送