推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
基于一个好玩儿的聊天室理解小程序 session 管理
发布时间:2020-11-03小程序版 websocket 聊天室。 从服务器到小程序客户端配置基础教程。
在本教程内我们将在小程序内实现一个基本的 websocket 聊天室， 计划实现以下功能：
微信用户登录「 小程序 session 管理 」:ballot_box_with_check:
用户间文本交流 「 websocket 实现 」:ballot_box_with_check:
用户间发送图片等富媒体信息 「 文件的储存及相关逻辑 」:ballot_box_with_check:
小程序已挂，原因是个人开发者无法提交信息交流类小程序， 不过在本地运行 demo 还是没问题的。
写的有纰漏的地方还请大家指出，在 SF 下留言或在 本项目 git 内提 issue ，我们一起进步 ^o^
聊天室基础配置小程序端的聊天室信息流其实非常简单， 而本教程就借助一个好玩儿的小程序聊天室来进一步理解小程序中的 session 实现。
我在服务器端环境搭建及配置主要参考腾讯云实验 基于 CentOS 搭建微信小程序服务
我们在此先要理解小程序端为何无法实现 session， 以及如何在小程序实现 websocket 通信。
小程序并非嵌套在微信内的 html5 网页， 它并不是从 url 访问到的。 我们只能自己实现类似会话的东西， 好在官方已经提供了相应的套件来实现 session。 即 wafer-client-sdk 和 node 中间件 wafer-node-session , 我们依照文档就能简单地实现 session。
腾讯云 wafer 项目下有很多相似项目「大部分需要配合腾讯云进行一键部署」， 如果我们只需要实现小程序 session 管理的话， wafer-client-sdk 和 node 中间件 wafer-node-session 即可。
在服务器端我们使用了 ws 包来实现 websocket ，没有使用 socket.io 的原因是 socket.io 需要客户端有额外的脚本才能实现通信。
在小程序端我们引入 wafer-client-sdk 套件使服务器可以获取 session。
主要逻辑分为几个简单函数， 当然你需要先配置请求的服务器域名和小程序账号密码。
// 引入 session 套件， 里面封装了 wx.login， wx.getUserInfo 等操作 const wafer = require('../../vendors/wafer-client-sdk/index') // 用于登录使服务器获得 session， 然后服务器返回的 session 里就会包含用户信息了， 用来在 websocket 里返回发信息用户的头像 url function login(){ ..... } // 用于有新信息时更新数据， msg 指信息， ad 指 websocket 传回的信息 id， 用于 scroll-into-view 滚动 pushMsg(msg, ad) { ..... } // 用于监听 websocket 连接 listen(){ ..... } // 用于小程序发送 websocket 信息 send(){ ..... }基本就是这些， 关于 websocket 通信过程是这样的：
客户端发送信息给服务器 m1
服务器收到信息后根据条件返回给客户端 m2
每个客户端收到 m2 后更新视图
当然最开始是要与服务器端 websocket 连接的， 只有每个连接了的客户端才可以交流信息。
小程序 session 解析对于 session 的实现我们在服务器端使用了 wafer-node-session 即为连接提供 session 能力。 在小程序端我们配套使用了 wafer-client-sdk ， 这里面封装了 wx.request、 wx.login 等逻辑， 实现了小程序端的用户登录、session 设置。
关于小程序端的 session 获取问题主要有如下几个步骤
wx.login 获取 code
wx.request 发送 code 给自己的服务器
服务器收到 code 配合 appId 和 appSecret 发送给微信服务器换取 openId 和 sessionKey
- 上一篇：微信小程序组件 加减号弹出框
- 下一篇：微信小程序--TabBar不出现
