微信小程序使用WebSocket搭建聊天室实战教程_文章_微信小程序开发
微信小程序使用WebSocket搭建聊天室实战教程
使用WebSocket搭建聊天室实战教程　　　　wechat-chat　　　　本项目使用
作为聊天室后台 , Gorilla WebSocket
基于go语言开发，提供的demo实例中有聊天室源码，不需要任何修改就能生成一个聊天室项目(包含后台+web前台)　　　　　　一、聊天室服务搭建步骤:　　　　　　如果不想搭建服务器，可以跳过这个步骤，直接使用我的服务　　　　　　安装
安装1.6以上版本，低版本问题较多。注:下载golang需要翻墙　　　　安装Gorilla WebSocket模块　　go /gorilla/websocket　　　　　　启动聊天室　　$ go /gorilla/websocket　　$ cd `go list -f '{{.Dir}}' /gorilla/
websocket/examples/chat`　　$ go run *.go　　　　　　web客户端　　访问:http://ip:8080　　　　　　二、客户端　　将文件正确导入开发者工具目录。注意，websockets.js
文件地址。服务器域名，端口号，如：url: 　　　　　　git clone 　　　　使用导入项目　　　　修改服务地址
wechat-chat/utils/websockets.js 行1　　　　　　三、小程序开发问题　　(Q&A)　　　　　　如何通过js获取到某个组件?
(发送消息后，清空输入框)　　A:　　　　text存英文超过屏幕宽度后，会出现横向滚动条?　　A: 和css一样加上样式:word-break:break-　　　　有没有办法在view里通过js动态加入view?　　A:　　　　　　四、todo　　　　发送消息后，清空输入框　　名字可点击，实现1v1通讯加入聊天间　　　　&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&　　　　　　　　　　先看下效果　　　　　　　　　　话不多说 直接上代码　　1.页面代码：　　　　　　　　　　　　[html]
　　　　　　 　　　　　　　　 indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
wx:for="{{imgUrls}}"
url="{{item.link}}" hover-class="navigator-hover"
src="{{item.url}}" class="slide-image" width="355" height="150"
type="text" class="input-text" bindchange="setInputValue"
placeholder="请输入你要咨询的内容"
bindtap="getgetinputSEnd" class="input-button"发送
　　 class="chat-area"
wx:for="{{msgs}}" wx:for-index="idx" wx:for-item="itemName"
class="say-title"
wx:if="{{idx%2 != 0}}" class="red-font"客服：
wx:if="{{idx%2 == 0}}" class="green-font"你：
class="say-content"
wx:if="{{itemName.type == 'video'}}"
src="{{itemName.msg}}"
wx:if="{{itemName.type == 'voice'}}"
src="{{itemName.msg}}" controls loop
wx:if="{{itemName.type == 'image'}}"
src="{{itemName.msg}}"
wx:if="{{itemName.type == 'text'}}"
{{itemName.msg}}
　　　　　　页面中 使用了 模板的　　　　　　　　　　 条件渲染 ：　　　　 列表渲染：　　　　　　　　2. 样式代码　　　　　　　　　　　　[css]
　　　　　　 　　　　　　　　.slide-image{
width: 100%;
　　.input-text{
　　border:1px solid #abcdef;
　　width:88%;
　　background:#ddd;
　　line-height:100%;
　　text-indent: 0.5
　　margin:1rem auto;
　　height:40px;
　　.input-button{
　　background:#48C23D;
　　margin:0.5rem 5%;
　　color:#fff;
　　.chat-area{
width: 90%;
margin:0.5rem 5%;
border:1px solid #ddd;
background:#eee;
font-size: 1
　　.red-font{
color:#DC143C;
　　.green-font{
color:#48C23D;
　　.say-content{
　　font-size:80%;
　　width:80%;
　　margin:0.5rem 5%;
　　　　　　　　　　　　3. js代码　　　　　　　　　　　　[javascript]
　　　　　　 　　　　　　　　
　　var app = getApp();
　　Page({
imgUrls: [
link:'/pages/index/index',
url:'/images//tooopen_sy_.jpg'
link:'/pages/logs/logs',
url:'/images//tooopen_sy_.jpg'
link:'/pages/test/test',
url:'/images//tooopen_sy_.jpg'
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
inputdata:'',
userInfo: {}
onLoad: function () {
console.log('onLoad test');
console.log(this.data.msgs);
getgetinputSEnd:function(){
var input = this.data.
var that = this;
var msgs = that.data.
msgs.push({msg:input,'type':'text'});
wx.request({
url: ':8080/test/socket.php',　　 //服务器更改　　
'Content-Type': 'application/json'
success: function(res) {
msgs.push({msg:res.data.content,'type':res.data.msgType});
that.setData({msgs:msgs});
console.log(res.data)
setInputValue:function(e){
console.log(e.detail);
this.data.inputdata = e.detail.
　　　　　　　　。。有服务器可省略。。　　　　4. 服务器端代码　　　　　　　　　　　　　　　　[php]
　　　　　　 　　　　　　　　&?php
　　$params = $_REQUEST;
　　$msg = $params['msg'];
　　$content = array();
　　switch ($msg) {
case '美女':
$content['msgType'] = 'image';
$content['content'] = '/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=ae4df4ec878ba61ec0eecf2f713497cc/43a7d933c895d143b2025aaf074a.jpg';
case '音乐':
$content['msgType'] = 'voice';
$content['content'] = '.cn/i/song.mp3';
case '视频':
$content['msgType'] = 'video';
$content['content'] = '.cn//i/movie.ogg';
case '笑话':
$content['msgType'] = 'text';
$content['content'] = '一男子在闹市骑摩托撞昏了一个陌生的老汉! 男子惊吓的不知所措!围观群众越来越多!突然,该男抱住老汉,声泪俱下的喊道:“爹,你等着我,我这就去给...';
$content['msgType'] = 'text';
$content['content'] = '您发送的指令不在识别范围内：
你可以选择
　　 echo json_encode($content);　　 　　　　　　　　
642阅读 | 0评论
商家最想知道的关于小程序30个问题
凭什么这么短的时间他上线的小程序就已破万，成为行业NO.1？
【商帮视界】小程序+电商有哪些可能？
小程序创业，让你一年跻身千万身价俱乐部，选择对平台加入是关键
小程序+电商=商家最大机遇
块点抓紧时间上车啦！微信小程序第三方服务商将帮你把握下一个互联网浪潮哦
未来企业运营【标配】：小程序不可缺！
微信小程序 专员
月入6000以上
缴纳五险，公交补助 环境优越，坐落于高档写字楼；并不定期聚餐、旅游、拓展等各种丰富的活动
小伙伴们，寻贷网微信小程序正式上线啦！
【微信小程序】小程序与公众服务号完美解决营销方案---无须人工参与---吸粉利器
集时科技与食在有趣达成战略合作，携小程序进军新零售！
解读：怎么实现门店小程序
腾讯和好大夫一起弄了个医疗科普小程序
电商领域，就算没做小程序也在做小程序的路上
电商大利好！微信即将内测商品搜索，流量大门终于打开了！
未来，小程序诠释互联网+实体
抢注法律热门关键词 法智小程序强力助攻律师品牌营销
手机淘宝大改版，对标微信？
微三云小程序助力商家提前布局微信商业圈，抢占第一波红利
小程序瞄准线下服务业微信小程序和服务器通信-WebSocket - 简书
微信小程序和服务器通信-WebSocket
接上一篇文章的话题，我们这次来讲一下如何建立一个基于node.js的WebSocket服务器，并在小程序中使用这个提供实时服务的服务器。
node.js中已经有很多现成的第三方库，用于构建WebSocket服务。我们今天选用一个叫做的库，来构建一个可以提供标准WebSocket接口的node.js服务端程序。
先建一个空文件夹，名叫ws-server，然后进入该文件夹，在命令行执行:
npm install websocket
然后在ws-server文件夹下，再新建一个名为app.js的文件，内容如下：
因为WebSocket服务是建立在HTTP之上的，所以我们看到，代码中建立了一个http server, 然后建立了一个使用了该http server的WebSocket server，并让http server监听8080端口对外提供服务。
这个服务端的功能也很简单，就是收到客户端发送的消息并打印出来，然后在接收到的消息前面加上一个[from server]的前缀后，返回给客户端。
好，我们来实现调用该服务的微信小程序代码：
首先我们需要用wx.connectSocket()方法去连接目标服务器，因为我们开发环境用的是非安全的http，所以这边的url参数是ws://打头的，在以后微信的实际运行环境中，你的服务端必须使用SSL，所以连接url就会是wss://的了。
然后需要调用wx.onSocketOpen()方法来设置WebSocket连接打开时的回调函数。当连接打开后，就可以开始向服务端发送数据了，我们在这里使用wx.sendSocketMessage()方法，向服务端发送了一个后面跟随一个随机数的Hello,World字符串。我们运行一下程序，可以看到，服务端的控制台上会打印出这样的结果：
说明服务端已经成功接收到了客户端发送的字符串消息。
之后服务端会向客户端再反馈这个消息，那客户端这边如何接收这个从服务端过来的消息呢？我们可以在小程序中，使用wx.onSocketMessage()方法，监听服务端发送到客户端的消息，正如我们上面的示例代码写的那样：
wx.onSocketMessage(function (msg) {
console.log(msg)
我们在小程序的Console上，简单的打印了从服务端过来的消息，如下所示：
小程序Console
这样，一个简单但完整的客户端和服务器端的WebSocket交互就完成了。如果你想关闭这个WebSocket连接，那么你可以调用wx.closeSocket()来进行关闭。
好了，关于微信小程序和WebSocket服务器通信的例子，就讲到这里吧。不对之处，欢迎指正。
谢谢大家阅读本文。
我的微信公众号二维码
从事Web开发10+年，全栈开发。曾任职于IBM，从事大数据相关的零售业智能定价策略平台和用户行为深度跟踪与分析平台的研发。现任职于初创公司(https://uzer.me),前端技术主管,负责应用虚拟化平台的研发。本文版权归 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 上同步发布。
阅读(...) 评论()