基于有趣的聊天室理解小程序的会话管理

panda-chat-room

小程序websocket聊天室。从服务器到小程序客户端的基本配置教程。

在本教程中，我们将在小程序中实现一个基本的websocket聊天室，并计划实现以下功能：

微信用户登录“小程序会话管理”: ballot _ box _ with _ check :用户间文本交换“websocket实现”3360 ballot _ box _ with _ check3360用户间发送图片等富媒体信息“文件存储及相关逻辑”3360 ballot _ box _ with _ check3360

小程序已被挂起，因为个人开发者无法提交信息交换小程序，但可以在本地运行演示。

还请指出写作中有一些错误。在SF下留言或者以git的形式发布这个项目，我们会一起进步的。

聊天室基础配置

小程序聊天室的信息流其实很简单，而本教程用一个好玩的小程序聊天室来进一步了解小程序中的会话实现。

我主要参考腾讯云实验在服务器端环境下搭建基于CentOS的微信小程序服务。

首先，我们需要了解小程序为什么不能实现会话，以及如何在小程序中实现websocket通信。

小程序不是嵌套在微信中的html5网页，不是从url访问的。我们只能自己实现类似会话的东西。幸运的是，官方提供了相应的套件来实现会话。即wafer-client-sdk和节点中间件wafer-node-session，我们可以根据文档简单实现会话。

腾讯云晶圆项目下有很多类似的项目“大部分需要与腾讯云合作一键部署”。如果我们只需要实现小程序的会话管理，那么wafer-client-sdk和节点中间件wafer-node-session就可以了。

在服务器端，我们使用ws包来实现websocket。我们不使用socket.io的原因是socket.io需要客户端额外的脚本来实现通信。

在小程序方面，我们引入了wafer-client-sdk套件，这样服务器就可以获得会话。

逻辑主要分为几个简单的功能。当然，您需要先配置请求的服务器域名和小程序帐户密码。

//介绍会话套件，封装wx.login、wx.getUserInfo等操作Const wafer=require('././venders/wafer-client-SDK/index ')//用于登录使服务器获得会话，那么服务器返回的会话将包含用户信息，用于返回头像URL函数login () {的信息.}//用于有新信息时更新数据，msg指的是信息，ad指的是websocket返回的信息id，Push msg (msg，AD)为滚入查看{.}//侦听websocket连接(){ }.}//send(){ 0.}供小程序发送的websocket信息基本上就是这些，而websocket的通信过程如下：

客户端向服务器m1发送信息。服务器收到信息后，根据条件返回给客户端m2。接收到m2后，每个客户端更新视图。当然，首先需要连接服务器websocket。只有每个连接的客户端可以交换信息。

小程序 session 解析

为了实现会话，我们在服务器端使用了wafer-node-session，也就是为连接提供会话能力。在小程序端，我们使用了wafer-client-sdk，封装了wx.request和wx.login的逻辑，实现了小程序端的用户登录和会话设置。

小程序端的会话获取主要有以下几个步骤。

Wx.login获取codewx.request并将代码发送到自己的服务器。接收到的代码被发送到微信服务器，以换取openId和sessionKeywx.getUserInfo来获取原始数据和签名。

re、encryptedData、 iv， 我们需要把它们发送到自己服务器。 我们构建自己的 signature2 = sha1(sessionKey + rawData) , 比对 signature 和 signature2 就完成了数据校验

服务端通过 aes-128-cbc 算法对称解密 encryptedData 和 iv 然后得到 userInfo 这次得到的 userInfo 里还包含 openId 等信息 「如果在微信开放平台绑定小程序就会得到 unionId」

服务端构建 req.session 对象并返回给小程序，里面包含 id、 userInfo、 sessionKey「小程序传到服务器的」、skey 「服务器自己根据sessionKey + appId + appSecret 生成， 有过期时间」。 而我们自己生成的 skey 是有设置过期时间的， 但小程序端的 session 也有自己的过期时间 「应该是微信按使用小程序的频率来动态设置过期时间的。 wafer 会自动调用 wx.checkSession 检查是否过期， 过期了就 wx.login」。

在我们的 demo 中就出现了服务器 session 已经过期而本地 session 还没过期的情况。 而 websocket 每次发送信息都需要从 req.session 内获取用户头像， 所以会导致 websocket 连接失败。 但是在小程序端 session 未过期，即在服务器端的 sessionKey 和小程序的 sessionKey 不一致了 「客户端 sessionKey 还在而服务器的 sessionKey 已经过期销毁」， 导致比对失败。 那怎么办呢？ 重新请求呗！ 但是因为 wafer 封装了 session 管理 「小程序端 session 过期后才会重新请求」 存在 session 缓存的缘故， 小程序并没有重新发送信息给自己的服务器进而生成新的 sessionKey， 所以我们在每一次 wx.sendSocketMessage 发信息的时候都要检查服务器端的 session 情况， 这里需要做简单的判断「websocket 信息有错误就清除本地 session」让小程序重新请求服务器。

websocket 信息发送

既然要发送信息「即产生数据」， 那么这些信息都储存在哪里呢？ 在发送文本信息时， 服务器端收到数据后只做简单地处理便返回给小程序， 这时的数据应该是储存在服务器内存中。 因为 websocket 在收到请求后简单处理了字符串信息直接返回给小程序， 那我们发送其它富媒体信息时，也可以以二进制的方式发送给 websocket 服务器， 然后重新返回给客户端 「即 websocket 只做文件中转」，相关实现websocket-stream。 貌似看起来很复杂，在这里我使用了国内的 paas 服务商leanCloud的储存服务 「即小程序端把发送的文件储存在云端，返回一个文件地址」，然后我们把这个文件信息进行标注「即只发送文件的 url 信息， 小程序端判断请求是否是文件进而显示」。 当然你也可以发送视频或者音频， 把他们都保存在云端， 只发送其相应的 url 即可。 我们这里的 websocket 服务器只做一个文件中转的功能， 而文件的存储交给云端来负责。