panda-chat-room

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

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

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

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

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

聊天室基礎(chǔ)配置

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

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

我們在此先要理解小程序端為何無法實現(xiàn) session， 以及如何在小程序?qū)崿F(xiàn) websocket 通信。

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

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

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

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

主要邏輯分為幾個簡單函數(shù)， 當然你需要先配置請求的服務(wù)器域名和小程序賬號密碼。

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

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

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

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

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

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

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

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

小程序 session 解析

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

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

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

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

websocket 信息發(fā)送

既然要發(fā)送信息「即產(chǎn)生數(shù)據(jù)」， 那么這些信息都儲存在哪里呢？ 在發(fā)送文本信息時， 服務(wù)器端收到數(shù)據(jù)后只做簡單地處理便返回給小程序， 這時的數(shù)據(jù)應(yīng)該是儲存在服務(wù)器內(nèi)存中。 因為 websocket 在收到請求后簡單處理了字符串信息直接返回給小程序， 那我們發(fā)送其它富媒體信息時，也可以以二進制的方式發(fā)送給 websocket 服務(wù)器， 然后重新返回給客戶端 「即 websocket 只做文件中轉(zhuǎn)」，相關(guān)實現(xiàn) websocket-stream 。 貌似看起來很復(fù)雜，在這里我使用了國內(nèi)的 paas 服務(wù)商 leanCloud 的儲存服務(wù) 「即小程序端把發(fā)送的文件儲存在云端，返回一個文件地址」，然后我們把這個文件信息進行標注「即只發(fā)送文件的 url 信息， 小程序端判斷請求是否是文件進而顯示」。 當然你也可以發(fā)送視頻或者音頻， 把他們都保存在云端， 只發(fā)送其相應(yīng)的 url 即可。 我們這里的 websocket 服務(wù)器只做一個文件中轉(zhuǎn)的功能， 而文件的存儲交給云端來負責。

panda-chat-room 項目源碼

項目源碼 :https://github.com/hiscc/panda-chat-room