小程序socketphp例子若何在小法式中实现 WebSocket 通讯

在这种情形下，HTML5定义了WebSocket协议，能更好的节省做事器资源和带宽，并且能够更实时地进行通讯。
WebSocket只须要与做事器进行一次握手，即可实现实时的数据连接，并且传输协议是全双工的，做事器可以随时主动向客户端发送数据，并且WebSocket协议在连接创建后，做事器和客户端之间交流数据时，用于协议掌握的数据包头部相对较小，能明显降落做事器及客户端开销。

我们的小程序也支持WebSocket通信，如果你想为你的小程序实现谈天室、做事器推送、小程序之间数据交互等功能，那就非常有必要搭建一个WebSocket做事器来进行WebSocket通讯。
这篇文章中，我们将大略先容小程序WebSocket通信利用方法，并通过实例搭建一个WebSocket做事器。
实现小程序与做事器之间的通讯。

在教程开始之前，须要搭建搭建好小程序的根本开拓环境，关于如何配置，大家可以参考如何入门小程序开拓这篇文章的入门教程。

既然要实现WebSocket通讯，那必须要拥有一台WebSocket做事器，做事真个环境有很多选择NodeJS、PHP、Python等大部分主流措辞都可以支配WebSocket做事，本日我们将教大家利用PHP措辞进行环境支配，其他措辞请同学们自行支配。

我这里以Ubuntu Server 16.04 LTS为例，我们须要安装php运行环境及NginxWeb做事，同时也须要申请免费的SSL证书和域名，关于证书和域名的申请注册请参考如何快速搭建微信小程序这篇文章。
注册完域名及证书申请，我们就可以开始支配做事器了！
首先，登录做事器，实行下面的命令。

sudo apt updatesudo apt install php php-fpm php-curl nginx composer -y

安装完成后，利用浏览器访问你的做事器IP地址，如果看到下面的内容，则证明Web做事已经启动。

img

由于小程序获取远程数据，必须为HTTPS或WSS环境，以是目前搭建的环境，在小程序无法利用，接下来，我们将利用SSL证书加密小程序访问你做事器之间的流量。
这里就须要刚才注册的域名及证书了。
首先，将下载的证书，上传到你的做事器，并记录下这个位置。
然后，我们将配置Nginx做事，以让其支持WSS流量。

我们找到/etc/nginx/conf.d文件夹，新建配置文件，为了方便后续修正，我将这里的配置文件修正为weixin.techeek.cn.conf大家可以根据自己的需求修正。

cd /etc/nginx/conf.dsudo nano weixin.techeek.cn.conf

在nano编辑器中，我们写下下面的代码

server { listen 443 ssl; server_name weixin.techeek.cn;index index.php index.html index.htm;root /usr/share/nginx/html; ssl_certificate /home/ubuntu/1_weixin.techeek.cn_bundle.crt; ssl_certificate_key /home/ubuntu/2_weixin.techeek.cn.key; ssl_session_cache shared:SSL:1m; ssl_session_timeout 5m; ssl_ciphers HIGH:!aNULL:!MD5; ssl_prefer_server_ciphers on; location ~ .php$ { fastcgi_pass unix:/run/php/php7.0-fpm.sock; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; } location / { proxy_pass http://127.0.0.1:8080; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; proxy_set_header X-Real-IP $remote_addr; }}server { listen 80 default_server; server_name weixin.techeek.cn; root /usr/share/nginx/html; index index.php index.html index.htm; location / { try_files $uri $uri/ =404; }}

一定把稳，将文中server_name中的weixin.techeek.cn改换成你的域名。
将ssl_certificate和ssl_certificate_key中证书的路径改换成你刚上传证书的路径。
然后，实行下面的命令重启nginx做事。

sudo service nginx restart

之后，打开你电脑的浏览器，然后通过域名访问，把稳，这里一定要在域名前加https://，比如我访问的域名https://weixin.techeek.cn/。

1542188355313

如果域名前有小锁标志，则证明你已经配置成功，可以开始下一步了，这里502报错不用在意，由于我们还没有搭建WebSocket做事，以是做事器会返回502缺点。

基本环境配置好之后，可以登录 微信公众年夜众平台 配置通信域名了。
我们点击微信公众年夜众号右侧的设置，然后找到做事器域名配置。

1542188610710

进入微信"大众年夜众平台管理后台设置做事器配置，如上图所示，须要将你的做事器域名配置为你自己的域名。
我这里的域名是weixin.techeek.cn。

上述步骤准备完成后 ，就可以撰写WebSocket做事真个代码了，我这里利用的是PHP socket即时通讯框架Workerman来进行搭建。
有了这个框架，我们就可以非常方便的搭建WebSocket做事。
由于本文紧张讲解小程序真个WebSocket的利用，关于Workerman的详细利用教程，可以参考Workerman官方手册，本文仅做根本环境安装的先容。

首先，我们创建一个运行WebSocket做事的目录，我这里创建名为php-websocket-server，目录位置可以自定义，我这里就将项目放在ubuntu用户的根目录下。

mkdir /home/ubuntu/php-websocket-servercd /home/ubuntu/php-websocket-server

接下来，我们利用composer包管理器安装WebSocket运行环境。
由于某些缘故原由，海内访问composer可能会报错，以是我们须要利用海内的composer镜像。
然后就可以安装Workerman了。

sudo composer config -g repo.packagist composer https://packagist.phpcomposer.comsudo composer updatesudo composer require workerman/workerman

安装完成后，默认情形下会有三个文件，composer.json、composer.lock、vendor这三个文件，如果没有，请重新实行上面的命令。

├── composer.json├── composer.lock└── vendor

安装完workerman依赖文件，我们就可以撰写系统所需的代码了。
利用nano编辑器，新建一个可实行的php文件，我这里创建的文件名为webSocket.php，大家可自行变动。

nano webSocket.php

代码如下

<?phprequire_once __DIR__ . '/vendor/autoload.php';use Workerman\Worker;$ws_worker = new Worker("websocket://0.0.0.0:8080");$ws_worker->count = 4;$ws_worker->onMessage = function($connection, $data){ $connection->send('hello ' . $data);};Worker::runAll();

这时，一个最基本的websocket做事就编辑完成了，这里的代码意思是，通过/vendor/autoload.php引入Workerman的php文件，然后在8080端口创建websocket做事，并设置进程为4个进程。
然后实行onMessage回调函数，该函数吸收客户端所发过来的数据$data，然后利用send方法将数据发回给客户端。

接下来，我们就可以运行做事器了，实行下面的代码即可运行。

sudo php webSocket.php start

如果看到类似下面的输出，证明我们websocket做事器已经启动，接下来就可以开始配置小程序真个代码了。

1542247109151

小程序连接Websocket做事器是通过wx.connectSocket()API进行连接的，为了方便连接API，我们先看看官方的文档。

我们看到只有url是必填项，其他属性可以不填，那么连接做事器就比较大略了，我们打开index.js文件，写下下面的代码。

Page({onReady: function () {wx.connectSocket({ url: 'wss://weixin.techeek.cn'})},})

有小程序开拓履历的小伙伴都知道，这里的onReady是小程序的生命周期函数，卖力在小程序初次渲染完成后实行的函数，这样我们编译完小程序，小程序就自动连接做事器。
现在编译一下试试，咦，彷佛弗成啊，怎么没看到小程序有反应。
我们打开掌握台，点击Network按钮，如果看到类似下面的内容，就证明你的小程序已经成功链接手事器了。

1542249696427

这里的HTTP状态码是101，101状态码是websocket特有的状态码，我们已经成功连接搭建的做事器。
但是我们能不能直不雅观点看到已经连接做事器呢？当然可以，参考文档利用success属性，我们在个中加入回调函数。
修正代码如下。

Page({ onReady: function () { wx.connectSocket({ url: 'wss://weixin.techeek.cn', success: function (res) { console.log("连接做事器成功") }, fail: function (res) { console.log("连接做事器失落败") } }) },})

我们增加一个回调函数，如果做事器连接成功，向小程序掌握台打印出连接做事器成功。
反正打印连接做事器失落败。

1542250247835

当然，我们也可以将成功的内容展示给小程序前端，代码如下，首先修正index.wxml代码。

<view><text>连接做事器状态：{{status}}</text></view>

然后打开index.js文件，修正代码

Page({ onReady: function () { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn', success: function (res) { myThis.setData({ status: "连接做事器成功" }) }, fail: function (res) { myThis.setData({ status: "连接做事器失落败" }) } }) },})

现在重新编译小程序，你会看到类似这样的界面。

1542250497626

做事器搭建我们说到，我们的做事器的代码内容是将小程序发给做事器的任意字符前加hello之后返回给小程序，现在，我们已经成功连接做事器了。
接下来，我们须要修正代码，以便小程序将数据发给做事器。

官方文档中，利用wx.sendSocketMessage()API将数据发给做事器，根据官方文档，通过 WebSocket 连接发送数据。
须要先wx.connectSocket连接做事器，并在 wx.onSocketOpen 回调之后才能发送。
以是在调用wx.sendSocketMessage()前，须要先调用wx.onSocketOpen监听WebSocket连接是否打开。
代码如下。

Page({ onReady: function () { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn' }) wx.onSocketOpen(function (res) { myThis.setData({ status: "websocket连接做事器成功" }) }) },})

现在，我们就可以利用wx.sendSocketMessage()发送数据到做事器了，先看看官方文档，怎么利用。

我们只须要传data内容给API，就能发内容给做事器了，那么修代码内容如下。

Page({ onReady: function () { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn' }) wx.onSocketOpen(function (res) { wx.sendSocketMessage({ data: "你好", success: function (res) { console.log("数据已发给做事器") } }) myThis.setData({ status: "websocket连接做事器成功" }) }) },})

现在，我们的数据已经可以发给做事器了，可是我们还没有看到做事器返回的数据，这时，我们就该利用另一个API了，监听WebSocket 接管到做事器的事宜wx.onSocketMessage()，该API返回做事器发出的。
但是onReady函数是页面加载就运行的，这时做事器还没反应过来，数据返回了没收到该怎么处理？我们可以引入另一个生命周期函数onLoad，这个函数是小程序卖力监听页面加载的函数，我们可以将做事器事宜监听的API写在这里，当吸收到数据，由这个函数返回干系内容。
以是代码如下。

Page({ onReady: function () { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn' }) wx.onSocketOpen(function (res) { wx.sendSocketMessage({ data: "你好", success: function (res) { console.log("数据已发给做事器") } }) myThis.setData({ status: "websocket连接做事器成功" }) }) }, onLoad: function (options) { var myThis = this; wx.onSocketMessage(function (res) { myThis.setData({ message: res.data }) }) },})

为了方便不雅观察做事器返回的数据，我们修正下前端，增加做事器监听的内容。

<view><text>连接做事器状态：{{status}}</text></view><view><text>做事器：{{message}}</text></view>

现在，重新编译，就能看到做事器返回Hello 你好的内容，我们发出的内容为你好，做事器在内容前加一个Hello然后返回给小程序。
我们可以修正你好为任意内容，看看做事器能否正常返回干系内容。
轻微优化下前端和后端代码，如下。

index.wxml

<button type="primary" bindtap="connect">连接webSocket做事器</button><button type="warn" bindtap="close">断开webSocket做事器</button><input placeholder="在这里输入你要发送的弹幕内容" bindblur="input"/><button bindtap="send">向webSocket做事器发送</button><view><text>连接做事器状态：{{status}}</text></view><view><text>做事器：{{message}}</text></view>

index.js

Page({ connect() { var myThis = this; wx.connectSocket({ url: 'wss://weixin.techeek.cn' }) wx.onSocketOpen(function (res) { myThis.setData({ status:"websocket连接做事器成功" }) }) }, close(){ var myThis = this; wx.closeSocket() wx.onSocketClose(function (res) { myThis.setData({ status: "websocket做事器已经断开" }) }) },send(){ var myThis = this; wx.sendSocketMessage({ data: this.inputValue, success: function (res) { console.log("发送信息") wx.showToast({ title: '已发送', icon: 'success', duration: 1000 }) }, fail: function (res) { myThis.setData({ status: "请连接做事器" }) } })}, input: function (e) { this.inputValue = e.detail.value }, onLoad: function (options) { var myThis = this; wx.onSocketMessage(function (res) { myThis.setData({ message:res.data }) wx.showToast({ title: '你收到来自做事器的', icon: 'none', duration: 2000 }) }) },})

1542253679047

这样，我们就实现了向做事器发送数据，同时做事器返回数据的全部流程。

有人可能会问，这个HTTP通信办法没有差异啊，还是小程序先要求数据到做事器，然后做事器返回数据啊，我没看到什么不同。
虽然表现是这样，但是现在小程序和做事器是长连接状态，做事器可以直接推送内容到小程序，不信？我们试试。
打开你的做事器Websocket.php文件，将代码修正为下面的内容。

<?phprequire_once __DIR__ . '/vendor/autoload.php';use Workerman\Worker;use Workerman\Lib\Timer;$worker = new Worker('websocket://0.0.0.0:8080');$worker->onWorkerStart = function($worker){ Timer::add(10, function()use($worker){ foreach($worker->connections as $connection) { $connection->send('你好！
'); } });};$worker->onMessage = function($connection, $data){ echo $data . "\n"; $connection->send('做事器已经收到了你的');};Worker::runAll();

然后运行做事器。

sudo php webSocket.php start

这行代码中，我们实现了小程序连接做事器后，做事器每隔10秒主动推送数据你好给小程序，无需小程序主动要求内容，同时，小程序发出的内容，可以在做事端显示。
现在点击你小程序连接webSocket做事器按钮，看看效果。

1542254161118

然后我们向做事器发点试试。
做事器也已经收到了小程序发出的数据。

1542254236499

websocket通信在小程序端还是比较大略的，赶紧去自己试试吧~后续我还会先容一篇利用websocket通讯进行谈天室搭建的教程