微信小程序: https域名绑定和免费的https证书申请详解 - IT网络 - 设计联盟 - 中国设计创意资讯门户
设计创意产业联盟设计资讯&-&设计导航
您的位置： >
微信小程序: https域名绑定和免费的https证书申请详解
核心提示：
微信小程序在11月3号发布了，这是一个全新的生态，没有赶上微信公众号红利的开发者，运营者可别错过这趟车了，但是微信的后台需要全https，https域名绑定和免费的https证书申请详解...
微信小程序 后台https域名绑定和免费的https证书申请详解
微信小程序在11月3号发布了，这是一个全新的生态，没有赶上微信公众号红利的开发者，运营者可别错过这趟车了。
但是微信的后台需要全https，之前我还不相信，后台注册了后进后台才发现，服务器配置如下图
从后台的服务器配置可以看出
（1）微信小程序后台只支持https，如果公司后台还没支持https的，赶紧要升级了
（2）API请求，文件上传，socket 文件上传和下载，必须是在后台配置的，否则微信不允许你下载
& & & 另外，http请求，在微信小程序里，是被微信封装了的，所有微信要封杀哪个域名是非常的方便。
（3）后端的请求，是可以配置多个请求的，比如request 请求，可以配置不同的请求，但是所有的域名必须备案，并且新备案的需要24小时之后才能添加
& (4) 每个月只能提交修改3次，每次修改要慎重啊
那哪里有ca证书呢，ca证书很贵，有几百到几千上万的一年的都有，但是阿里云有免费的ca证书，你知道吗？&
下面说明免费证书申请步骤
（1）进入后台，点击CA证书，点击购买
（2）默认的是5000需要付费的
&选择免费型 DV SSL
你就会发现是不要钱了。
经过绑定申请后，显示的是https。
&最主要的是，不要钱，免费的，估计小程序推出后，https需求会越来越多。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
中国最具影响力的创意设计综合网站
编辑：Beach
您可能感兴趣的文章
微信公众号：design_news
扫一扫 订阅最新资讯本文版权归 OSChina jsongo0 所有，转载请标明出处，以示尊重！
原文：https://my.oschina.net/jsongo/blog/757871
为什么需要websocket？传统的实时交互的游戏，或服务器主动发送消息的行为（如推送服务），如果想做在微信上，可能你会使用轮询的方式进行，不过这太消耗资源，大量的请求也加重了服务器的负担，而且延迟问题比较严重。如果是自己开发的app，为了解决这些问题，很多团队会自建socket，使用tcp长链接、自定协议的方式与服务器进行相对实时的数据交互。有能力的团队，采用这种方式自然没什么大问题。不过小团队可能就要花费很多时间去调试，要解决很多难题，这个在成本上就划不来。
H5引入了webSocket来解决网页端的长链接问题，而微信小程序也支持websocket。这是一个非常重要的特性，所以本系列的文章会专门拿出一篇来讨论websocket。webSocket本质上也是TCP连接，它提供全双工的数据传输。一方面可以避免轮询带来的连接频繁建立与断开的性能损耗，另一方面数据可以是比较实时的进行双向传输（因为是长链接），而且WebSocket允许跨域通信（这里有个潜在的跨域安全的问题，得靠服务端来解决）。目前除IE外的浏览器已经对webSocket支持得很好了，微信小程序再推一把之后，它会变得更加流行。
我们来设计一个新的demo，一个比较有趣的小游戏，多人版扫雷，准确地讲，多人版挖黄金。后台代码：前端代码：
&游戏规则是这样的：把雷换成金子，挖到金子加一分，每人轮流一次（A挖完轮到B，B挖完A才能再点击），点中金子就算你的，也不会炸，游戏继续，直到把场上所有的金子都挖完游戏才结束。跟扫雷一样，数字也是表示周边有几个金子，然后用户根据场上已经翻出来的数字来猜哪一格可能有金子。
这种交互的游戏难点在于，用户的点击操作都要传到服务器上，而且服务器要实时的推送到其它玩家的应用上。另外用户自己也要接收对方操作时实时传过来的数据，这样才不至于重复点中同一个格子。简单讲，就是你要上报操作给服务器，而服务器也要实时给你推消息。为了简化整个模型，我们规定玩家必须轮流来点击，玩家A点完后，才能轮到玩家B，玩家B操作完，玩家A才能点。我们分几步来实现这个功能。
一、实现思路
1、第一步，我们要先生成扫雷的地图场景这个算法比较简单，简述一下。随机取某行某列就可以定位一个格子，标记成金子（-1表示金子）。mimeCnt表示要生成的金子的数量，用同样的方式循环标记mimeCnt个随机格子。生成完后，再用一个循环去扫描这些-1的格子，把它周边的格子都加1，当然必须是非金子的格子才加1。代码放在。
其中increaseArround用来把这格金子周边的格子都加1，实现也比较简单：执行genMimeArr()，随机生成结果如下：-1表示金子。看了下貌似没什么问题。接下去，我们就要接入webSocket了。（这个是js版本的，其实生成地图场景的工作是在后台生成，这个js版本只是一个演示，不过算法是一样的。）
2、我们需要一个支持webSocket的服务端本例子中，我们使用python的tornado框架来实现（tornado提供了tornado.websocket模块）。当然读者也可以使用socket.io，专为webSocket设计的js语言的服务端，用起来非常简单，它也对不支持webSocket的浏览器提供了兼容（flash或comet实现）。
笔者本人比较喜欢使用tornado，做了几年后台开发，使用最多的框架之一的就是它，NIO模型，而且非常轻量级，同样的rps，java可能需要700-800M的内存，tornado只要30-40M，所以在一台4G内存的机子上可以跑上百个tornado服务，而java，对不起，只能跑3个虚拟机。微服务的时代，这一点对小公司很重要。当然如果读者本人对java比较熟悉的话，也可以选择netty框架尝试一下。
webSocket用tornado的另一个好处是，它可以在同一个服务（端口）上同时支持webSocket及http两种协议。tornado的官方demo代码中展示了怎么实现同时使用两种协议。在本游戏中，可以这么用：用户进入首页，用http协议去拉取当前的房间号及数据。因为首页是打开最多的，进了首页的用户不一定会玩游戏。所以首页还没必要建立webSocket链接，webSocket链接主要用来解决频繁请求及推送的操作。首页只有一个请求操作。选了房间号后，进去下一个游戏页面再开始建立webSocket链接。
3、客户端使用微信小程序开发工具，直接连接是会报域名安全错误的，因为工具内部做了限制，对安全域名才会允许连接。所以同样的，这里我们也继续改下工具的源码，把相关的行改掉就行修改方式如下：找到asdebug.js的这一行，把它改成: if(false)即可。
if (!i(r, "webscoket"))注：笔者目前使用IDE版本为 0.11.112301 修改代码部分为 if(!(0,l.checkUrl)(o,"webscoket")) ===》 if(false&&!(0,l.checkUrl)(o,"webscoket")) 即可
懒得修改的读者可以直接使用我破解过的IDE。 发起一个websocket链接的代码也比较简单：
在调用这个请求代码之前，先添加下事件监听，这样才知道有没有连接成功：
wx.onSocketOpen(function(res){
console.log('websocket opened.');
连接失败的事件：
wx.onSocketError(function(res){
console.log('websocket fail');
收到服务器的消息时触发的事件：
wx.onSocketMessage(function(res){
console.log('received msg: ' + res.data);
当链接建立之后，发送消息的方法如下：
消息发送由于建立链接是需要几次握手，需要一定的时间，所以在wx.connectSocket成功之前，如果直接wx.sendSocketMessage发送消息会报错，这里做一个兼容，如果连接还没建立成功，则用一个数组来保存要发送的信息；而链接第一次建立时，把数据遍历一遍，把消息拿出来一个个补发。这个逻辑我们封装成一个send方法，如下：
function sendSocketMessage(msg) {
if (typeof(msg) === 'object') {
二、demo功能解析
1、首页entry为了简化模型，把重点放在webSocket上，我们把首页做成自己填写房间号的形式。读者如果自己有时间和能力的话，可以把首页做成一个房间列表，并显示每个房间有多少人在玩，只有一人的可以进去跟他玩。甚至后面还可以加上观看模式，点击别人的房间进去观看别人怎么玩。填写房间号的input组件，添加一个事件，取得它的值event.detail.value后setData到本page里面。点击“开始游戏”，再把房间号存入app的globalData里面，然后wx.navigateTo到主游戏页面index。这个页面比较简单。
2、主游戏页面我们封装一个websocket/connect.js模块，专门用来处理websocket链接。主要有两个方法，connect发起webSocket链接，send用来发送数据。index主页面：初始化状态，9x9的格子，每一格子其实都是一个button按钮。我们生成的地图场景数据，分别对应着每一格。比如1表示周边的1个金子，0表示周边没有金子，-1表示这格是个金子，我们的目标就是找到这些-1。找得越多得分越高。
这里讨论一个安全性问题。相信一句话：在前端做的安全措施大都是不靠谱的。上图中的矩阵，每个格子背后的数据，不应该放在前端，因为js代码是可以调试的，可以下断点在相应的变量上，就可以看到整个矩阵数据，然后就知道哪些格子是金子，就可以作弊，这是非常不公平的。所以最好的方法是把这些矩阵数据存在后端，每次用户操作的时候，把用户点击的坐标发到后台，后台再判断相应的坐标是什么数据，再返回给前端。这个看似有很多数据传输的交互方式，其实是不会浪费资源，因为用户的每个点击操作，本来就要上报到后台，这样游戏的另一玩家才知道你点了哪个格子。反正都是要传数据的，所以肯定要传坐标，这样前端就完全没有必要知道哪个格子是什么数据，因为后台的推送消息会告诉你。
这样我们就绕过了前端存矩阵数据的问题。但是我们还是需要一个数组来存储当前矩阵状态的，比如哪个格子已经被翻开，里面是什么数据，也就是说要存储场上已经被打开的格子。所以在后台，我们要存储两个数据，一个是所有的矩阵数据，也就是地图场景数据；另一个是当前状态的数据，这个要用来同步双方的界面。
3、结束页面游戏结束的判断条件，就是场上所有的金子都被挖完了。这个条件也是在后台判断的。在每次用户挖到金子的时候，后台都会多一个判断逻辑，就是看这个金子是否是最后一个。如果是的话，就发送一个over类型的消息给游戏的所有玩家。玩家终端接收到这个消息时，就会结束当前的游戏，并跳到结束页面。没有专门的设计师，随便网上偷了张图片贴上去，界面比较丑。下方显示自己的得分和当前的房间号。
三、实现细节
1、代码结构前端代码，分了几个模块：pages放所有的页面，common放通用的模块，mime放挖金子的主逻辑（暂时没用到），res放资源文件，websocket放webSocket相关的处理逻辑。后台代码，读者稍微了解一下就行了，不讨论太多。里面我放了docker文件，熟悉docker的读者可以直接一个命令跑起整个服务端。笔者在自己的服务器上跑了这个webSocket服务，ip和端口已经写在前端代码里，读者轻虐。可能放不久，读者可以自己把这个服务跑起来。
2、消息收发（1）消息协议我们简单地定义下，消息的格式如下。 发送消息：
{type: 'dig', …}
type是必带字段。
服务器返回的消息：
{errCode: 0, data: {type: 'dig', …} }
errCode为0的时候，表示请求处理成功，后面带上data字段表示返回的数据，里面的type也是必带字段，表示的是什么类型的消息。因为webSocket类型的消息跟传统的http请求不太一样，http请求没有状态，一个请求过去，一会儿就返回，返回的数据肯定是针对这个请求的。而webSocket的模型是这样的：客户端发过去很多请求，然后也不知道服务器返回的数据哪个是对应哪个请求，所以需要一个字段来把所有的返回分成多种类型，并进行相应的处理。
（2）发送消息发送消息就比较容易了，上面我们定义了一个send方法及未连接成功时的简单的消息列表。
（3）接收消息读者在阅读代码的时候，可能会有一个疑惑，websocket/connect.js里只有send发送方法，而没有接收推送消息的处理，那接收消息的处理在哪？怎么关联起来的？websocket/目录里面还有另一个文件，msgHandler.js，它就是用来处理接收消息的主要处理模块:从服务器推送过来的消息，主要有这三种类型：1挖金子操作，可能是自己的操作，也可能是对方的操作，里面有一个字段isMe来表示是否是自己的操作。接收到这类消息时，会翻转地图上相应的格子，并显示出挖的结果。2创建或进入房间的操作，一个房间有两个用户玩，创建者先开始。3游戏结束的消息，当应用接收到这类消息时，会直接跳转到结束页面。这个处理逻辑，是在websocket/connect.js的wx.onSocketMessage回调里关联上的。在消息的收发过程中，每个消息交互，调试工具都会记录下来。可以在调试工具里看到，在NetWork-&WS里就可以看到：
3、前端挖金子代码如下：
var websocket = require('../../websocket/connect.js');
var msgReceived = require('../../websocket/msgHandler.js');
mimeMap: null,
leftGolds: 0,
在page的onLoad事件里，先更新界面上的房间号信息。然后开始我们的重点，websocket.connect发起webSocket链接，websocket是我们封装的模块。然后把我们msgHandler.js处理逻辑设置到服务端推送消息回调里面。接着，发送一个create消息来创建或加入房间。服务端会对这个消息做出响应，返回本房间的当前状态数据。
digGold是每个格子的点击事件处理函数。这儿有一个逻辑，一个格子周边最多有8个格子，所以每个格子的数据最大不可能大于8，上面代码中可以看到有一个9，这其实是为了跟0区分，用来表示场上目前的还没被翻开的格子的数据，用9来表示，当然你也可以用10，100都行。wxml的矩阵数据绑定代码如下：
&view wx:for="{{mimeMap}}" wx:for-item="row" wx:for-index="i"
class="flex-container"&
&button wx:for="{{row}}" wx:for-item="cell" wx:for-index="j"
class="flex-item {{cell&0?'gold':''}} {{cell&9?'open':''}}"
bindtap="digGold" data-x="{{j}}" data-y="{{i}}" data-value="{{cell}}"&
{{cell&9?(cell&0?'*':cell):"-"}}
这个比较复杂些。两层for，第一层遍历行，第二层遍历行里的每个格子的数据。wx:for-item指定里面用到的item的名字，wx:for-index指定里面用到的key的名字。每个格子是一个button，class值做了两次判断，如果这个格子的数据小于0，表示它是金子，加上gold这个class，主要是为了给它加样式。而当数据是非9的时候，表示这个格子被翻开了，这时就加上open样式，把颜色设置成橙色。data-x和data-y用来记录格子的坐标，这样的话，用户点击的时候，就可以直接从dataset里取出坐标值，再把这个值发到服务端进行判断。
4、服务端实现简单的提一下就好，因为后台不是本系列文章的重点，虽然这个demo的开发也花了大半的时候在写后台。前后端的消息交互，借助了webSocket通道，传输我们自己定义格式的内容。上面有个截图显示了后台代码目录的结构，划分得比较随意，handlers里存放了的是主要的处理逻辑。webSocketHandler是入口，在它的on_message里，对收到的客户端的消息，根据类型进行分发，dig类型，分发到answerHandler去处理，create类型，分发到roomHandler里去处理。
还有一点稍微提一下，本例子中的后台webSocket消息处理也跟传统的http处理流程有一点不一样。就是在最后返回的时候，不是直接返回的，而是广播的形式，把消息发送给所有的人。比如用户A点击了格子，后台收到坐标后，会把这个坐标及坐标里的数据一起发送给房间里的所有人，而不是单独返回给上报坐标的人。只是会有一个isMe字段来告诉客户端是否是自己的操作。
总之，在做webSocket开发的时候，上面提到的，前后端都可能会有一些地方跟传统的http接口开发不太一样。读者尝试在做webSocket项目的时候，转换一下思维。
最后提下一个注意点：微信小程序的websocket链接是全局只能有一个，官方提示：“”
本文首发地址：oschina 上同步发布。
阅读(...) 评论()查看: 356|回复: 9
微信小程序的应用场景……
城市币1796 元
在线时间8742 小时
阅读权限150
主题帖子城市币
本帖最后由 鱼无言 于
13:18 编辑
【题记】我是一贯地认为互联网+是自下而上生长的，需要的是民进官退，政府只需要为民让路靠边……
学习了10分钟的“微信小程序”，忍不住想分享、讨论一下我的理解：
一、官方网页上的【应用场景】（看不懂跳过）
&&场景一：文件上传下载
&&微信小程序框架提供了文件上传下载的接口，用于将本地资源上传到指定的服务器，或者将指定Url的资源下载到本地，但微信小程序框架只提供了客户端的解决方案，缺少服务端的对应实现，需要小程序开发者从零开始构建自己的上传下载存储服务器，腾讯云作为专业的云服务提供商，利用自身云端海量极速稳定的基础服务提供了文件上传下载存储的配套云端解决方案，帮助开发者降低开发小程序的复杂度，使得开发者可以更加专注于业务的开发，更加高效。
&&场景二：WebSocket长连接应用
&&微信小程序框架提供了WebSocket请求建立，数据通信，连接关闭等一系列的客户端接口，用于与远程支持WebSocket协议的服务器通信，以便小程序能实现服务器主动push等更接近native的体验，但微信只提供了客户端的解决方案，缺少服务器端的对应实现，需要开发者自行构建支持WebSocket协议的长连接服务器。腾讯云使用自身云端稳定高性能的基础服务搭配Socket.IO镜像，提供WebSocket长链接的云端解决方案，降低开发者使用WebSocket长连接的成本，使得小程序可以更加高效快捷的使用WebSocket长连接通信。
二、我的理解（不知理解的对不对？）
我是业余的，但写过整合支付宝、整合RS的API的简单代码，
我理解“微信小程序”跟它们差不多，只是提供了客户端，后台需要网站自己整合。
换言之，就像一个米友说的，它不是个网站！
对于网站所有者，它只是提供了一个可以更好、更方便地与微信对接的手段；
对于网站访问者，它只是提供了用户习惯了的微信的信息交互界面，但是在和某网站交互、而不是微信官方服务。
三、“微信小程序”的应用基础
对于“我们”，仍然是该怎么建站怎么建站，不同的是，需要在腾讯的地盘上买域名、买空间、建网站，
这才是腾讯的目的：从“微信小程序”切入，瓜分域名、主机、网站市场。
而要顺利与“微信小程序”对接，还真是有不小的专业技术门槛，当然——
对于我们是困难的，对于腾讯都是商机，他们应该也会提供有偿代劳服务，所以，对此不必过虑，
即使他们不提供，也很快会有人做这生意，麻蛋！代备案都能让一批人发国难财！何况这怎么看都是个好事。
四、即使“微信小程序”不是现成网站，也足以让人欢呼激动了……
……人民的创业、创新鸡情是政府该正确认识的。
只有民营、民众才让人看到互联网+的希望，政府只是叶公好龙而已……
城市币1478 元
在线时间18639 小时
阅读权限150
主题帖子城市币
同学习，也在研究介到底是嘛玩艺儿~&
城市币4215 元
在线时间10292 小时
阅读权限150
主题帖子城市币
本帖最后由 籴粜 于
13:32 编辑
不赞成政府只需要为民让路靠边的说法。互联网终归是一项技术，技术的本质不是让市场去替代政府，否ze民众早晚要吃市场失灵的亏。以打车软件为倒，其生产要素除了车子、人、技术之外，更重要的是道路资源。道路资源是排他性的公共资源，自己用了就会影响他人，如果政府不管，直接交给市场，那最终是资源被滥用，价格会飙升，民众最终还是要怪政府。互联网企业最擅长的就是需求端改革，不断扩大需求（yu望），我们需要的是互联网技术，不一定是互联网经营模式。互联网不是法外之地，政府不能瞎管以扼制创新，也不能不管放任自流。——这是我正酝酿的关于网约车的稿子，先随手打了些放这里了。
城里的敏感词怎么那么多？畏首畏尾，束手束脚。
也知道你说的才是正确的，我只是在校枉必须过正情况下的言论：
现在政府还处于有它自身的问题、利益和浴望的水平，只能先要求它抑制自身浴望、让渡自身利益、通过自身深度改革长远解决问题——即先退后，达到初级合&
域名投资交流QQ群：5922222
城市币1796 元
在线时间8742 小时
阅读权限150
主题帖子城市币
同学习，也在研究介到底是嘛玩艺儿~
城市币1796 元
在线时间8742 小时
阅读权限150
主题帖子城市币
本帖最后由 鱼无言 于
14:15 编辑
不赞成政府只需要为民让路靠边的说法。互联网终归是一项技术，技术的本质不是让市场去替代政府，否ze民众早 ...
也知道你说的才是正确的，我只是在校枉必须过正情况下的言论：
现在政府还处于有它自身的问题、利益和浴望的水平，只能先要求它抑制自身浴望、让渡自身利益、通过自身深度改革长远解决问题——即先退后，达到初级合格；然后，才能指望它进阶——真正为社会发展搞好基础、保驾护航、引导、调节、激励……
也拿约车来说，从禁、到负面诋毁、到半开半限……这种**着走的姿态……就别指望它引领了，先不阻碍就好。
另外，把很多似是而非的问题抛出来扰乱民众判断、包装其真实意图，也是其常用招数。
比如，深圳报道百分之多少多少涉毒司机，民众一下就倒向政府，问题是：1、是约车造成的涉毒人员吗？2、出租司机中这类人员比例多少？政府过问过吗？与约车司机占比更高还是更低？3、如果连司机都不让干，这类人员应该到社会的哪个行当就业？——之所以唯独关注、报道、整治约车中涉毒人员，不是要民众更安全、不是让约车更健康、只是又找到了一个极好的扯大旗作虎皮的事件……
但事实我们都多虑了，还有“**”呢，他们都是最聪明的。&
城市币4215 元
在线时间10292 小时
阅读权限150
主题帖子城市币
本帖最后由 籴粜 于
14:12 编辑
也知道你说的才是正确的，我只是在校枉必须过正情况下的言论：
现在政府还处于有它自身的问题、利益和浴 ...
但事实上你我都多虑了，还有“官shang勾jie”呢，他们都是最聪明的。
全是敏感词，这论坛都没法混了。
板子是在论坛上，背后……
一个帖子满篇星星，这也是我从政府看不到希望、看不到勇气、看不到诚意的原因之一！
一个破域名论坛，聚集的一帮发补贴就不论政的财迷，至于么戒惧如此……&
域名投资交流QQ群：5922222
城市币1796 元
在线时间8742 小时
阅读权限150
主题帖子城市币
但事实上你我都多虑了，还有“官shang勾jie”呢，他们都是最聪明的。
全是敏感词，这论坛都没法混了。
板子是在论坛上，背后……
一个帖子满篇星星，这也是我从政府看不到希望、看不到勇气、看不到诚意的原因之一！
一个破域名论坛，聚集的一帮发补贴就不论政的财迷，至于么戒惧如此……
没过滤词。&
米商, 积分 10673, 距离下一级还需 19327 积分
米商, 积分 10673, 距离下一级还需 19327 积分
城市币2153 元
在线时间853 小时
阅读权限50
主题帖子城市币
分析的比较透彻
QQ: 找便宜
打折券&& 万达电商
城市币4001 元
在线时间5511 小时
阅读权限150
主题帖子城市币
腾讯估计只是提供框架而已
城市币4215 元
在线时间10292 小时
阅读权限150
主题帖子城市币
板子是在论坛上，背后……
一个帖子满篇星星，这也是我从政府看不到希望、看不到勇气、看不到诚意的原因 ...
&&没过滤词。
域名投资交流QQ群：5922222
旗下品牌 -
&&论坛管理员邮箱：只需一步，快速开始
后使用快捷导航没有帐号？
关注：1254
所属分类： &
微信小程序、微信小程序开发，提供各类小程序开发工具及开发教程。
微信小程序开发之WebSocket长连接应用场景（附Demo源码）
查看: 10905|回复: 446
& 主题帖子积分
新人求带, 积分 45, 距离下一级还需 255 积分
新人求带, 积分 45, 距离下一级还需 255 积分
微信小程序开发之WebSocket长连接应用场景（附Demo源码），Demo为剪刀石头布应用，源码在附件中，本示例需要腾讯云支持。
目录：
& & 部署和运行
& && &&&整体架构
& && &&&1. 准备域名和证书
& && &&&2. 云主机和镜像部署
& && &&&3. 配置 HTTPS
& && &&&4. 域名解析
& && &&&5. 启动 WebSocket 服务
& && &&&6. 启动微信小程序
& & 为什么要用 WebSocket
& & 通信协议设计
& & 服务器逻辑
& & 微信端实现
没事打开小程序，和附近的人剪刀石头布，想来就来，想走就走。谁能成为武林高手？！
微信小程序提供了一套在微信上运行小程序的解决方案，有比较完整的框架、组件以及 API，在这个平台上面的想象空间很大。
腾讯云拿到了小程序内测资格，研究了一番之后，发现微信支持 WebSocket 还是很值得玩味的。这个特性意味着我们可以做一些实时同步或者协作的小程序。
这篇文章分享一个简单的剪刀石头布的小游戏的制作，希望能对想要在小程序中使用 WebSocket 的开发者有帮助。
image.gif (750.9 KB, 下载次数: 28)
10:27 上传
整个游戏非常简单，连接到服务器后自动匹配在线玩家（没有则分配一个机器人），然后两人进行剪刀石头布的对抗游戏。当对方进行拳头选择的时候，头像会旋转，这个过程使用 WebSocket 会变得简单快速。
部署和运行
拿到了本小程序源码的朋友可以尝试自己运行起来。
xqscn2zj.he3.jpg.png (34.58 KB, 下载次数: 25)
10:27 上传
小程序的架构非常简单，这里有两条网络同步，一条是 HTTPS 通路，用于常规请求。对于 WebSocket 请求，会先走 HTTPS 后再切换协议到 WebSocket 的 TCP 连接，从而实现全双工通信。
1. 准备域名和证书
在微信小程序中，所有的网路请求受到严格限制，不满足条件的域名和协议无法请求，具体包括：
& & 只允许和在 MP 中配置好的域名进行通信，如果还没有域名，需要注册一个。
& & 网络请求必须走 HTTPS 协议，所以你还需要为你的域名申请一个证书。
域名注册好之后，可以登录微信公众平台配置通信域名了。
tjzpgjrz.y5a.jpg.png (55.68 KB, 下载次数: 23)
10:28 上传
2. 云主机和镜像部署
剪刀石头布的服务器运行代码和配置已经打包成腾讯云 CVM 镜像，大家可以直接使用。
腾讯云用户可以免费领取礼包，体验腾讯云小程序解决方案。
p5vbnlfw.yik.jpg.png (23.89 KB, 下载次数: 23)
10:28 上传
镜像部署完成之后，云主机上就有运行 WebSocket 服务的基本环境、代码和配置了。
镜像已包含「剪刀石头布」和「小相册」两个小程序的服务器环境与代码，需要体验两个小程序的朋友无需重复部署
3. 配置 HTTPS
镜像中已经部署了 nginx，需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。
agfty0fn.gfi.jpg.png (11.79 KB, 下载次数: 22)
10:29 上传
配置完成后，即可启动 nginx。
4. 域名解析
我们还需要添加域名记录解析到我们的云服务器上，这样才可以使用域名进行 HTTPS 服务。
在腾讯云注册的域名，可以直接使用云解析控制台来添加主机记录，直接选择上面购买的 CVM。
uw25hdj2.k1u.jpg.png (43.67 KB, 下载次数: 21)
10:29 上传
解析生效后，我们在浏览器使用域名就可以进行 HTTPS 访问。
bxfkmjea.g41.jpg.png (31.93 KB, 下载次数: 24)
10:29 上传
5. 启动 WebSocket 服务
在镜像的 nginx 配置中（/etc/nginx/conf.d），已经把 /applet/websocket 的请求转发到
处理。我们需要把 Node 实现的 WebSocket 服务在这个端口里运行起来。
进入镜像中源码位置：
cd /data/release/qcloud-applet-websocket复制代码
使用 pm2 启动服务：
pm2 start process.json复制代码
1fdg1alb.1gq.jpg.png (9.02 KB, 下载次数: 22)
10:30 上传
6. 启动微信小程序
在微信开发者工具中修改小程序源码中的 config.js 配置，把通讯域名修改成上面申请的域名。完成后点击调试即可连接到 WebSocket 服务进行游戏。
pmbcwr2k.mj0.jpg.png (24.9 KB, 下载次数: 26)
10:30 上传
配置完成后，运行小程序就可以看到成功搭建的提示！
sslzo4ip.xvh.jpg.png (30.59 KB, 下载次数: 22)
10:31 上传
为什么要用 WebSocket
使用传统的 HTTP 轮询或者长连接的方式也可以实现类似服务器推送的效果，但是这类方式都存在资源消耗过大或推送延迟等问题。而 WebSocket 直接使用 TCP 连接保持全双工的传输，可以有效地减少连接的建立，实现真正的服务器通信，对于有低延迟有要求的应用是一个很好的选择。
目前浏览器对 WebSocket 的支持程度已经很好，加上微信小程序的平台支持，这种可以极大提高客户端体验的通信方式将会变得更加主流。
Server 端需要实现 WebSocket 协议，才能支持微信小程序的 WebSocket 请求。鉴于 SocketIO 被广泛使用，剪刀石头布的小程序，我们选用了比较著名的 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 = new Server();
server.init(&/applet/ws/socket.io&);
server.start();复制代码
但是，SocketIO 和一些其它的服务器端实现，都有其配套的客户端来完成上层协议的编码解码。但是由于微信的限制（不能使用 window 等对象）， SocketIO 的客户端代码在微信小程序平台上是无法运行的。
经过对 SocketIO 通信进行抓包以及研究其客户端源码，笔者封装了一个大约 100 行适用于微信小程序平台的 WxSocketIO 类，可以帮助开发者快速使用 SocketIO 来进行 WebSocket 通信。
const socket = new WxSocketIO();
socket.on('hi', packet =& console.log('server say hi: ' + packet.message));
socket.emit('hello', { from: 'techird' });复制代码
如果想要使用微信原生的 API，那么在服务器端也可以直接使用 ws 来实现 W3C 标准的接口。不过 SocketIO 支持多进程的特性，对于后续做横向扩张是很有帮助的。腾讯云在后面也会有计划推出支持大规模业务需求的 WebSocket 连接服务，减小业务的部署成本。
通信协议设计
实现一个多客户端交互的服务，是需要把中间涉及到所有的消息类型都设计清楚的，就像是类似剪刀石头布这样一个小程序，都有下面这些消息类型。
.png (24.27 KB, 下载次数: 23)
10:33 上传
具体每个消息的参数可以参考源码里的 server/protocol.brief.md
服务器逻辑
服务器的逻辑很简单：
& & 收到用户请求加入房间（join），就寻找还没满的房间
& && &&&找到房间，则加入
& && &&&没找到房间，创建新房间
& & 有用户加入的房间检查是否已满，如果已满，则：
& && &&&给房间里每个用户发送开始游戏的信号（start）
& && &&&启动计时器，计时器结束后进行游戏结算
& & 游戏结算
& && &&&两两之间 PK，赢方分数加一，输方减一，最终得每个玩家基本得分 x
& && &&&对于每个玩家，如果分数 x 大于 0，则视为胜利，连胜次数加一，否则连胜次数归零
& && &&&本局得分为分数 x 乘以连胜次数
& & 发送本局游戏结果给房间里的每位玩家复制代码
微信端实现
微信小程序直接使用上面的协议，针对不同的场景进行渲染。整体的状态机如下。
rnjaef4n.pnp.jpg.png (48.92 KB, 下载次数: 27)
10:33 上传
状态机整理清楚后，就是根据状态机来控制什么时候发送消息，接到消息后如何处理的问题了。具体实现请参照 app/pages/game/game.js 里的源码。
回复下载：
游客，如果您要查看本帖隐藏内容请
& 主题帖子积分
新人求带, 积分 45, 距离下一级还需 255 积分
新人求带, 积分 45, 距离下一级还需 255 积分
很吊很吊吊&&
& 主题帖子积分
专家路上, 积分 620, 距离下一级还需 2380 积分
专家路上, 积分 620, 距离下一级还需 2380 积分
我还没开始~你就已出游戏了~牛
& 主题帖子积分
新人求带, 积分 35, 距离下一级还需 265 积分
新人求带, 积分 35, 距离下一级还需 265 积分
楼主真棒 谢谢分享
& 主题帖子积分
新人求带, 积分 65, 距离下一级还需 235 积分
新人求带, 积分 65, 距离下一级还需 235 积分
我还没开始~你就已出游戏了~牛
& 主题帖子积分
专家路上, 积分 2668, 距离下一级还需 332 积分
专家路上, 积分 2668, 距离下一级还需 332 积分
好东西啊，谢谢楼主分享
& 主题帖子积分
专家路上, 积分 1615, 距离下一级还需 1385 积分
专家路上, 积分 1615, 距离下一级还需 1385 积分
我还没开始~你就已出游戏了~牛
& 主题帖子积分
新人求带, 积分 60, 距离下一级还需 240 积分
新人求带, 积分 60, 距离下一级还需 240 积分
速度真是快啊
& 主题帖子积分
略知一二, 积分 315, 距离下一级还需 285 积分
略知一二, 积分 315, 距离下一级还需 285 积分
非常不错。感谢楼主。
& 主题帖子积分
略知一二, 积分 245, 距离下一级还需 355 积分
略知一二, 积分 245, 距离下一级还需 355 积分
helllohellohello
<是专业的第三方微信开发者平台，为生态而生。
本站为第三方微信开发者平台，非腾讯官方网站。
天津市滨海新区中新生态城中成大道生态建设公寓9号楼3层301
欢迎来这里一起喝喝茶，聊聊你的产品。
微信公众号gongzhongkaifa
工作日12小时内回复。
工作日12小时内回复。}