基于一個(gè)好玩兒的聊天室理解小程序 session 管理

發(fā)布時(shí)間：2018-05-03 15:56 所屬欄目：小程序開發(fā)教程

panda-chat-room

小程序版 websocket 聊天室。從服務(wù)器到小程序客戶端配置基礎(chǔ)教程。

在本教程內(nèi)我們將在小程序內(nèi)實(shí)現(xiàn)一個(gè)基本的 websocket 聊天室，計(jì)劃實(shí)現(xiàn)以下功能：

微信用戶登錄「小程序 session 管理」:ballot_box_with_check:
用戶間文本交流「 websocket 實(shí)現(xiàn) 」:ballot_box_with_check:
用戶間發(fā)送圖片等富媒體信息「文件的儲(chǔ)存及相關(guān)邏輯」:ballot_box_with_check:

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

寫的有紕漏的地方還請(qǐng)大家指出，在 SF 下留言或在本項(xiàng)目 git 內(nèi)提 issue ，我們一起進(jìn)步 ^o^

聊天室基礎(chǔ)配置

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

我在服務(wù)器端環(huán)境搭建及配置主要參考騰訊云實(shí)驗(yàn) 基于 CentOS 搭建微信小程序服務(wù)

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

小程序并非嵌套在微信內(nèi)的 html5 網(wǎng)頁，它并不是從 url 訪問到的。我們只能自己實(shí)現(xiàn)類似會(huì)話的東西，好在官方已經(jīng)提供了相應(yīng)的套件來實(shí)現(xiàn) session。即 wafer-client-sdk 和 node 中間件 wafer-node-session , 我們依照文檔就能簡(jiǎn)單地實(shí)現(xiàn) session。

騰訊云 wafer 項(xiàng)目下有很多相似項(xiàng)目「大部分需要配合騰訊云進(jìn)行一鍵部署」，如果我們只需要實(shí)現(xiàn)小程序 session 管理的話， wafer-client-sdk 和 node 中間件 wafer-node-session 即可。

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

在小程序端我們引入 wafer-client-sdk 套件使服務(wù)器可以獲取 session。

主要邏輯分為幾個(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ì)包含用戶信息了， 用來在 websocket 里返回發(fā)信息用戶的頭像 url
function login(){
  .....
}

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

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

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

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

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

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

小程序 session 解析

對(duì)于 session 的實(shí)現(xiàn)我們?cè)诜?wù)器端使用了 wafer-node-session 即為連接提供 session 能力。在小程序端我們配套使用了 wafer-client-sdk ，這里面封裝了 wx.request、 wx.login 等邏輯，實(shí)現(xiàn)了小程序端的用戶登錄、session 設(shè)置。

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

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

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