小程序模板网

使用ws打造一个简单的小程序websocket后端

2018-04-18 白天寿
分享者:石桥码农,原文地址

以下内容转自nodejs快速实现微信小程序的websocket服务端,为便于读者阅读、学习,有部分删改。

正文——

微信小程序对第三方服务端的网络通信方式支持https和Websocket。WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。为了解决HTTP协议效率低下的问题,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并达到实时通讯。WebSocket在数据传输的稳定性和数据传输量的大小方面,具有很大的性能优势。有不少公司将nodejs的http://socket.io作为websocket的解决方案,很遗憾的是http://socket.io是对websocket的封装,并不支持html5原始的websocket协议。node有很多websocket库,ws就是其中一个,号称最轻量级,最快。ws的用法比较简单。

要使用ssl,首先你得有ssl证书,自己生成的不能用于外网部署,建议去腾讯云、或七牛云存储申请一个免费的。

1,新建ws后端工程文件

首选需要安装node,参见:https://nodejs.org/en/download/

接者安装ws,一条指令搞定(以后所有的源码,类库都应该是这个样子的):

npm install ws --save

新建一个main.js

var fs = require('fs');
var httpServ = require('https');
var WebSocketServer = require('ws').Server;

var app = httpServ.createServer({
    key: fs.readFileSync('ssl.key'),
    cert: fs.readFileSync('ssl.crt')
})
app.listen(8000,function() {
    console.log('server started.')
});

var wss = new WebSocketServer({
    server: app
});

wss.on('connection', function(wsConnect) {
    wsConnect.on('message', function(message) {
        console.log("received ",message);
        wsConnect.send('reply');
    });
});

其中,ssl.key与ssl,crt是我的证书文件,需要换成自己的。启动端口是8000。在终端里执行:

node main.js

如果看到"server started",证明启动成功了。

2,本机浏览器测试

打开chrome调试窗口,输入:

var socket = new WebSocket('wss://www.rixingyike.com:8000/');
socket.send('message');

如果在后台的终端看到"received message"的输出,证明ws后端已经启动成功了。

在这里www.rixingyike.com是与我的ssl证书文件匹配的域名,大家要换成自己的。另外,为了本机测试方便。可以在/etc/hosts里,将www.rixingyike.com指向127.0.0.1。

3,在小程序中连接

在随意一个小程序js文件中输入以下函数并执行:

  testWss(){
    wx.connectSocket({
      url: 'wss://www.rixingyike.com:8000/'
    })
    wx.onSocketOpen(function (res) {
      console.log('WebSocket连接已打开!')
    })
    wx.onSocketOpen(function (res) {
      wx.sendSocketMessage({
        data: "weapp message"
      })
    })
    wx.onSocketMessage(function (res) {
      console.log('小程序收到服务器消息:' + res.data)
    })
  }
保存,运行。正常的话,就能在后台终端看到"received weapp message"的打印。另外,在小程序启动时,会收到一个“replay”的打印消息。

 
 
 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23668.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询