找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1349

所属分类: 微信开发 微信小程序开发资源

微信小程序、微信小程序开发,提供各类小程序开发工具及开发教程。

返回微信小程序开发者社区首页

[最新文章] 微信小程序开发之WebSocket长连接应用场景(附Demo源码)

  [复制链接]
查看: 17570|回复: 565
最佳答案
0 

2

主题

4

帖子

45

积分

新人求带

积分
45
 楼主| 发表于 2016-9-27 10:34:22 | 显示全部楼层 |阅读模式
微信小程序开发之WebSocket长连接应用场景(附Demo源码),Demo为剪刀石头布应用,源码在附件中,本示例需要腾讯云支持。

目录:
    部署和运行
        整体架构
        1. 准备域名和证书
        2. 云主机和镜像部署
        3. 配置 HTTPS
        4. 域名解析
        5. 启动 WebSocket 服务
        6. 启动微信小程序
    为什么要用 WebSocket
    通信协议设计
    服务器逻辑
    微信端实现

没事打开小程序,和附近的人剪刀石头布,想来就来,想走就走。谁能成为武林高手?!

微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。

腾讯云拿到了小程序内测资格,研究了一番之后,发现微信支持 WebSocket 还是很值得玩味的。这个特性意味着我们可以做一些实时同步或者协作的小程序。

这篇文章分享一个简单的剪刀石头布的小游戏的制作,希望能对想要在小程序中使用 WebSocket 的开发者有帮助。
image.gif

整个游戏非常简单,连接到服务器后自动匹配在线玩家(没有则分配一个机器人),然后两人进行剪刀石头布的对抗游戏。当对方进行拳头选择的时候,头像会旋转,这个过程使用 WebSocket 会变得简单快速。

部署和运行

拿到了本小程序源码的朋友可以尝试自己运行起来。

整体架构
xqscn2zj.he3.jpg.png

小程序的架构非常简单,这里有两条网络同步,一条是 HTTPS 通路,用于常规请求。对于 WebSocket 请求,会先走 HTTPS 后再切换协议到 WebSocket 的 TCP 连接,从而实现全双工通信。

1. 准备域名和证书

在微信小程序中,所有的网路请求受到严格限制,不满足条件的域名和协议无法请求,具体包括:
    只允许和在 MP 中配置好的域名进行通信,如果还没有域名,需要注册一个。
    网络请求必须走 HTTPS 协议,所以你还需要为你的域名申请一个证书。

域名注册好之后,可以登录微信公众平台配置通信域名了。
tjzpgjrz.y5a.jpg.png

2. 云主机和镜像部署

剪刀石头布的服务器运行代码和配置已经打包成腾讯云 CVM 镜像,大家可以直接使用。

腾讯云用户可以免费领取礼包,体验腾讯云小程序解决方案。
p5vbnlfw.yik.jpg.png

镜像部署完成之后,云主机上就有运行 WebSocket 服务的基本环境、代码和配置了。

镜像已包含「剪刀石头布」和「小相册」两个小程序的服务器环境与代码,需要体验两个小程序的朋友无需重复部署

3. 配置 HTTPS

镜像中已经部署了 nginx,需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。
agfty0fn.gfi.jpg.png

配置完成后,即可启动 nginx。

nginx

4. 域名解析

我们还需要添加域名记录解析到我们的云服务器上,这样才可以使用域名进行 HTTPS 服务。

在腾讯云注册的域名,可以直接使用云解析控制台来添加主机记录,直接选择上面购买的 CVM。
uw25hdj2.k1u.jpg.png

解析生效后,我们在浏览器使用域名就可以进行 HTTPS 访问。
bxfkmjea.g41.jpg.png

5. 启动 WebSocket 服务

在镜像的 nginx 配置中(/etc/nginx/conf.d),已经把 /applet/websocket 的请求转发到 http://127.0.0.1:9595 处理。我们需要把 Node 实现的 WebSocket 服务在这个端口里运行起来。

进入镜像中源码位置:
  1. cd /data/release/qcloud-applet-websocket
复制代码

使用 pm2 启动服务:
  1. pm2 start process.json
复制代码

1fdg1alb.1gq.jpg.png

6. 启动微信小程序

在微信开发者工具中修改小程序源码中的 config.js 配置,把通讯域名修改成上面申请的域名。完成后点击调试即可连接到 WebSocket 服务进行游戏。
pmbcwr2k.mj0.jpg.png

配置完成后,运行小程序就可以看到成功搭建的提示!
sslzo4ip.xvh.jpg.png

为什么要用 WebSocket

使用传统的 HTTP 轮询或者长连接的方式也可以实现类似服务器推送的效果,但是这类方式都存在资源消耗过大或推送延迟等问题。而 WebSocket 直接使用 TCP 连接保持全双工的传输,可以有效地减少连接的建立,实现真正的服务器通信,对于有低延迟有要求的应用是一个很好的选择。

目前浏览器对 WebSocket 的支持程度已经很好,加上微信小程序的平台支持,这种可以极大提高客户端体验的通信方式将会变得更加主流。

Server 端需要实现 WebSocket 协议,才能支持微信小程序的 WebSocket 请求。鉴于 SocketIO 被广泛使用,剪刀石头布的小程序,我们选用了比较著名的 SocketIO 作为服务端的实现。

Socket IO 的使用比较简单,仅需几行代码就可启动服务。
  1. export class Server {

  2.     init(path: string) {
  3.         /** Port that server listen on */
  4.         this.port = process.env.PORT;

  5.         /** HTTP Server instance for both express and socket io */
  6.         this.http = http.createServer();

  7.         /** Socket io instance */
  8.         this.io = SocketIO(this.http, { path });

  9.         /** Handle incomming connection */
  10.         this.io.on("connection", socket => {
  11.             // handle connection
  12.         });
  13.     }

  14.     start() {
  15.         this.http.listen(this.port);
  16.         console.log(`---- server started. listen : ${this.port} ----`);
  17.     }
  18. }

  19. const server = new Server();
  20. server.init("/applet/ws/socket.io");
  21. server.start();
复制代码

但是,SocketIO 和一些其它的服务器端实现,都有其配套的客户端来完成上层协议的编码解码。但是由于微信的限制(不能使用 window 等对象), SocketIO 的客户端代码在微信小程序平台上是无法运行的。

经过对 SocketIO 通信进行抓包以及研究其客户端源码,笔者封装了一个大约 100 行适用于微信小程序平台的 WxSocketIO 类,可以帮助开发者快速使用 SocketIO 来进行 WebSocket 通信。
  1. const socket = new WxSocketIO();
  2. socket.on('hi', packet => console.log('server say hi: ' + packet.message));
  3. socket.emit('hello', { from: 'techird' });
复制代码

如果想要使用微信原生的 API,那么在服务器端也可以直接使用 ws 来实现 W3C 标准的接口。不过 SocketIO 支持多进程的特性,对于后续做横向扩张是很有帮助的。腾讯云在后面也会有计划推出支持大规模业务需求的 WebSocket 连接服务,减小业务的部署成本。

通信协议设计

实现一个多客户端交互的服务,是需要把中间涉及到所有的消息类型都设计清楚的,就像是类似剪刀石头布这样一个小程序,都有下面这些消息类型。
27103255.png

具体每个消息的参数可以参考源码里的 server/protocol.brief.md

服务器逻辑

服务器的逻辑很简单:
  1.     收到用户请求加入房间(join),就寻找还没满的房间
  2.         找到房间,则加入
  3.         没找到房间,创建新房间
  4.     有用户加入的房间检查是否已满,如果已满,则:
  5.         给房间里每个用户发送开始游戏的信号(start)
  6.         启动计时器,计时器结束后进行游戏结算
  7.     游戏结算
  8.         两两之间 PK,赢方分数加一,输方减一,最终得每个玩家基本得分 x
  9.         对于每个玩家,如果分数 x 大于 0,则视为胜利,连胜次数加一,否则连胜次数归零
  10.         本局得分为分数 x 乘以连胜次数
  11.     发送本局游戏结果给房间里的每位玩家
复制代码

微信端实现

微信小程序直接使用上面的协议,针对不同的场景进行渲染。整体的状态机如下。
rnjaef4n.pnp.jpg.png

状态机整理清楚后,就是根据状态机来控制什么时候发送消息,接到消息后如何处理的问题了。具体实现请参照 app/pages/game/game.js 里的源码。

回复下载:
游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

4

帖子

45

积分

新人求带

积分
45
发表于 2016-9-27 10:38:48 | 显示全部楼层
很吊很吊吊  
回复 支持 反对

使用道具 举报

最佳答案
0 

4

主题

31

帖子

640

积分

专家路上

积分
640
发表于 2016-9-27 10:51:55 | 显示全部楼层
我还没开始~你就已出游戏了~牛
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

3

帖子

35

积分

新人求带

积分
35
发表于 2016-9-27 11:33:59 | 显示全部楼层
楼主真棒 谢谢分享
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

3

帖子

65

积分

新人求带

积分
65
发表于 2016-9-27 11:47:14 | 显示全部楼层

我还没开始~你就已出游戏了~牛
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

194

帖子

3233

积分

S1

积分
3233
发表于 2016-9-27 11:48:09 | 显示全部楼层
好东西啊,谢谢楼主分享
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

206

帖子

2137

积分

专家路上

积分
2137
发表于 2016-9-27 11:58:24 | 显示全部楼层
我还没开始~你就已出游戏了~牛
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4

帖子

54

积分

新人求带

积分
54
发表于 2016-9-27 14:05:14 | 显示全部楼层
速度真是快啊
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

17

帖子

309

积分

略知一二

积分
309
发表于 2016-9-28 13:27:47 | 显示全部楼层
非常不错。感谢楼主。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

15

帖子

297

积分

新人求带

积分
297
发表于 2016-9-28 16:39:01 | 显示全部楼层
helllohellohello
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com