文档章节

微信小程序中如何使用WebSocket实现长连接(含完整源码)

JackJiang-
 JackJiang-
发布于 06/25 15:46
字数 2468
阅读 548
收藏 32
点赞 4
评论 3

本文由腾讯云技术团队原创,感谢作者的分享。

1、前言

微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。腾讯云研究了一番之后,发现微信支持 WebSocket 还是很值得玩味的。这个特性意味着我们可以做一些实时同步或者协作的小程序。

这篇文章分享了一个基于WebSocket长连接的微信小程序——简单的剪刀石头布小游戏的制作过程,希望能对想要在微信小程序中使用 WebSocket 的开发者有所帮助。

学习交流:

- 即时通讯开发交流3群:185926912[推荐]

- 移动端IM开发入门文章:《新手入门一篇就够:从零开发移动端IM

说明:本文完整源码请从此文末附件下载:http://www.52im.net/thread-1703-1-1.html

2、相关文章

新手入门贴:史上最全Web端即时通讯技术原理详解

Web端即时通讯技术盘点:短轮询、Comet、Websocket、SSE

新手快速入门:WebSocket简明教程

WebSocket详解(一):初步认识WebSocket技术

WebSocket详解(二):技术原理、代码演示和应用案例

WebSocket详解(三):深入WebSocket通信协议细节

WebSocket详解(四):刨根问底HTTP与WebSocket的关系(上篇)

WebSocket详解(五):刨根问底HTTP与WebSocket的关系(下篇)

WebSocket详解(六):刨根问底WebSocket与Socket的关系

socket.io实现消息推送的一点实践及思路

Web端即时通讯技术的发展与WebSocket、Socket.io的技术实践

Web端即时通讯安全:跨站点WebSocket劫持漏洞详解(含示例代码)

开源框架Pomelo实践:搭建Web端高性能分布式IM聊天服务器

使用WebSocket和SSE技术实现Web端消息推送

详解Web端通信方式的演进:从Ajax、JSONP 到 SSE、Websocket

MobileIMSDK-Web的网络层框架为何使用的是Socket.io而不是Netty?

理论联系实际:从零理解WebSocket的通信原理、协议格式、安全性

>> 更多同类文章 ……

3、运行效果

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

剪刀石头布游戏效果如下图所示:

4、为什么要用 WebSocket

使用传统的 HTTP 轮询或者长连接的方式也可以实现类似服务器推送的效果,但是这类方式都存在资源消耗过大或推送延迟等问题(详见文章《新手入门贴:史上最全Web端即时通讯技术原理详解》)。而 WebSocket 直接使用 TCP 连接保持全双工的传输,可以有效地减少连接的建立,实现真正的服务器通信,对于有低延迟有要求的应用是一个很好的选择。

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

Server 端需要实现 WebSocket 协议,才能支持微信小程序的 WebSocket 请求。鉴于 SocketIO 被广泛使用(详见《Socket.IO介绍:支持WebSocket、用于WEB端的即时通讯的框架》),剪刀石头布的小程序,我们选用了比较著名的SocketIO 作为服务端的实现。

Socket IO 的使用比较简单,仅需几行代码就可启动服务。

export class Server {

    init(path: string) {

        /** Port that server listen on */

        this.port = process.env.PORT;

        /** HTTP Server instance for both express and socket io */

        this.http = http.createServer();

        /** Socket io instance */

        this.io = SocketIO(this.http, { path });

        /** Handle incomming connection */

        this.io.on("connection", socket => {

            // handle connection

        });

    }

    start() {

        this.http.listen(this.port);

        console.log(`---- server started. listen : ${this.port} ----`);

    }

}

const server = newServer();

server.init("/applet/ws/socket.io");

server.start();

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

经过对 SocketIO 通信进行抓包以及研究其客户端源码,笔者封装了一个大约 100 行适用于微信小程序平台的 WxSocketIO类,可以帮助开发者快速使用 SocketIO 来进行 WebSocket 通信。

const socket = newWxSocketIO();

socket.on('hi', packet => console.log('server say hi: '+ packet.message));

socket.emit('hello', { from: 'techird'});

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

5、通信协议设计

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

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

6、服务器逻辑

服务器的逻辑很简单:

收到用户请求加入房间(join),就寻找还没满的房间:

- 找到房间,则加入;

- 没找到房间,创建新房间。

有用户加入的房间检查是否已满,如果已满,则:

- 给房间里每个用户发送开始游戏的信号(start);

- 启动计时器,计时器结束后进行游戏结算。

游戏结算:

- 两两之间 PK,赢方分数加一,输方减一,最终得每个玩家基本得分 x;

- 对于每个玩家,如果分数 x 大于 0,则视为胜利,连胜次数加一,否则连胜次数归零;

- 本局得分为分数 x 乘以连胜次数。

发送本局游戏结果给房间里的每位玩家。

7、微信小程序端的实现

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

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

8、部署和运行

拿到了本小程序源码的朋友可以尝试自己运行起来(完整源码请从文末附件下载)。

8.1整体架构

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

8.2准备域名和证书

在微信小程序中,所有的网络请求受到严格限制,不满足条件的域名和协议无法请求,具体包括:

只允许和在 MP 中配置好的域名进行通信,如果还没有域名,需要注册一个

网络请求必须走 HTTPS 协议,所以你还需要为你的域名申请一个证书

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

设置域名和证书如下图所示:

8.3云主机和镜像部署

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

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

▲ 设置镜像

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

8.4配置 HTTPS

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

▲ Nginx 中配置证书

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

8.5域名解析

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

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

▲ 修改 DNS 记录

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

▲ HTTPS 效果

8.6启动 WebSocket 服务

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

进入镜像中源码位置:

cd /data/release/qcloud-applet-websocket

使用pm2 启动服务:

pm2 start process.json

8.7启动微信小程序

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

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

▲ 成功效果

9、附件下载(完整源码)

请从此文的附件处下载:http://www.52im.net/thread-1703-1-1.html

© 著作权归作者所有

共有 人打赏支持
JackJiang-

JackJiang-

粉丝 204
博文 88
码字总数 409018
作品 2
苏州
其他
加载中

评论(3)

今幕明
今幕明
socketio结合netty非常不错
彪付_3个字符
socketio ....
陈伟侨
陈伟侨
记得小程序的socket都是wss的,那时候就不愿意搞了
微信小程序WebSocket开发

微信小程序WebSocket开发 让我们来实现一个简单的微信小程序WebSocket。WebSocket是一种没有被规范化的网络协议,不过网络上又有文章说是2011年被国际化。不过不管怎么样它摆脱了Http的无状态...

王And木
05/31
0
0
开发者实验室之------基于 CentOS 搭建微信小程序服务

准备域名和证书 任务时间:20min ~ 40min 小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书。 域名注册 如果您还没有域名,可以在腾讯云上选购,过程可以参考...

时光流转
2017/10/27
0
0
Spring消息之WebSocket

一、WebSocket简介 WebSocket 的定义?WebSocket是HTML5下一种全双工通信协议。在建立连接后,WebSocket服务器端和客户端都能主动的向对方发送和接收数据,就像Socket一样。 WebSocket 的由来...

jmcui
05/06
0
0
Jetty源码学习9-WebSocket

引言 通过NIO+Continunation+HttpClient可以使Jetty具有异步长连接的功能,但有些应用场景确需要服务器“推”的功能,比如说:聊天室、实时消息提醒、股票行情等对于实时要求比较高的应用,能...

项籍20130121
2013/03/11
0
1
HTML5 WebSocket JavaWeb 实现简单的聊天室功能

本实例使用websocket实现了即时聊天系统,websocket技术可以在网页中使用js技术完成与后台的通讯, 而后台tomcat集成了websocket功能, 只需要很少的代码就可以完成很强大的功能, 基于此聊天系...

智慧点点
04/23
0
0
WebSocket 是什么原理?为什么可以实现持久连接?

作者:腾讯云技术社区 众所周知,Web应用的通信过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现。这种机制对于信息变化不是...

xiaogong1688
06/29
0
0
Socket/WebSocket应用及IM粘包 分包等

> Socket/WebSocket应用 WebSocket的frame?google的protobuf在IM中的使用? IM、金融、股价、视频会议等这样一些应用来说,所需要的不过是高实时、低延时。比较好的可选方案呢?比较流行的是...

shareus
04/28
0
0
WebSocket使用教程 - 带完整实例

什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。HTML5定义了WebSocket协议,能更好的节省服务器资源...

james_laughing
2014/12/18
0
7
47.用Tornado打造WebSocket与Ajax Long-Polling自适应聊天室

这几天忙着研究Tornado,想着总得学以致用吧,于是就决定做个聊天室玩玩。 实际上在Tornado的源码里就有chat和websocket这2个聊天室的demo,分别采用Ajax Long-Polling和WebSocket技术构建。...

quanpower
2013/08/09
0
0
漫扯:从polling到Websocket

Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response。这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息。。。 轮询   老大发火了,小...

i33
2014/08/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

NNS拍卖合约

前言 关于NNS的介绍,这里就不多做描述,相关的信息可以查看NNS的白皮书http://doc.neons.name/zh_CN/latest/nns_background.html。 首先nns中使用的竞价货币是sgas,关于sgas介绍可以戳htt...

红烧飞鱼
29分钟前
0
0
从MySQL全备文件中恢复单个库或者单个表

从MySQL全备文件中恢复单个库或者单个表 提取建库语句 sed -n '/^-- Current Database: db_cms/,/^-- Current Database: `/p' backup.sql > db_cms.sql & 提取ddl sed -e'/./{H;$!d;}' -e ......

yysue
今天
0
0
Java IO类库之管道流PipeInputStream与PipeOutputStream

一、java管道流介绍 在java多线程通信中管道通信是一种重要的通信方式,在java中我们通过配套使用管道输出流PipedOutputStream和管道输入流PipedInputStream完成线程间通信。多线程管道通信的...

老韭菜
今天
0
0
用Python绘制红楼梦词云图,竟然发现了这个!

Python在数据分析中越来越受欢迎,已经达到了统计学家对R的喜爱程度,Python的拥护者们当然不会落后于R,开发了一个个好玩的数据分析工具,下面我们来看看如何使用Python,来读红楼梦,绘制小...

猫咪编程
今天
0
0
Java中 发出请求获取别人的数据(阿里云 查询IP归属地)

1.效果 调用阿里云的接口 去定位IP地址 2. 代码 /** * 1. Java中远程调用方法 * http://localhost:8080/mavenssm20180519/invokingUrl.action * @Title: invokingUrl * @Description: * @ret......

Lucky_Me
今天
1
0
protobuf学习笔记

相关文档 Protocol buffers(protobuf)入门简介及性能分析 Protobuf学习 - 入门

OSC_fly
昨天
0
0
Mybaties入门介绍

Mybaties和Hibernate是我们在Java开发中应用的比较多的两个ORM框架。当然,目前Mybaties正在慢慢取代Hibernate,这是因为相比较Hibernate而言Mybaties性能更好,响应更快,更加灵活。我们在开...

王子城
昨天
2
0
编程学习笔记之python深入之装饰器案例及说明文档[图]

编程学习笔记之python深入之装饰器案例及说明文档[图] 装饰器即在不对一个函数体进行任何修改,以及不改变整体的原本意思的情况下,增加函数功能的新函数,因为这个新函数对旧函数进行了装饰...

原创小博客
昨天
1
0
流利阅读笔记33-20180722待学习

黑暗中的生物:利用奇技淫巧快活生存 Daniel 2018-07-22 1.今日导读 如果让你在伸手不见五指的黑暗当中生存,你能熬过几天呢?而大千世界,无奇不有。在很多你不知道的角落,有些生物在完全黑...

aibinxiao
昨天
6
0
Hystrix降级逻辑中如何获取触发的异常

通过之前Spring Cloud系列教程中的《Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)》一文,我们已经知道如何通过Hystrix来保护自己的服务不被外部依赖方拖垮的情况。但是实际...

程序猿DD
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部