WebSocket.jpeg
Websocket是一种服务端和客户端可以持久连接的通信协议,我们可以利用WebSocket的特性实现服务器主动向客户端推送消息的功能。
这里我们用TP5.1框架结合Workerman来做演示
首先用Composer下载TP5.1框架
composer create-project topthink/think=5.1.* tp5 --prefer-dist
下载完成后再在项目目录下通过 composer 引入 workerman
composer require topthink/think-worker
等完成后就可以在 vendor 目录里看到 workerman
注意:本人环境CentOS7,TP5.1框架,PHP版本5.6.0
然后在项目的根目录下新建一个 start.php 文件,用于启动WebSocket服务。
use Workerman\Worker;
require_once __DIR__ . '/vendor/workerman/workerman/Autoloader.php';
// 创建一个Worker监听2345端口,使用websocket协议通讯
$http_worker = new Worker("websocket://0.0.0.0:2345");
// 这里进程数必须设置为1
$http_worker->count = 1;
// 接收到浏览器发送的数据时广播给所有用户
$http_worker->onMessage = function($connection, $data)use($http_worker)
{
// 向每一个用户推送消息
foreach($http_worker->connections as $connection)
{
//验证管理端秘钥
$text = explode("KEY:", $data);
if($text[1]=='gi4lXpAOw6ddtFg'){
$connection->send($text[0]);
}
}
};
Worker::runAll();
在根目录下打开命令行工具以daemon(守护进程)方式启动
php start.php start -d
下面是管理端广播消息页面的一张截图
WX20180821-144140.png
管理端js代码如下
var ws = new WebSocket("ws://47.94.222.65:2345");
ws.onopen = function(evt) {
console.log("连接成功");
};
$('#send').click(function(){
var text = $('#text').val() + 'KEY:gi4lXpAOw6ddtFg';
ws.send(text);
});
微信小程序端接收推送演示
WX20180821-155230.png
微信小程序端代码
wx.connectSocket({
url: 'ws://47.94.222.65:2345'
})
wx.onSocketOpen(function (res) {
console.log('WebSocket连接已打开!')
})
wx.onSocketMessage(function (res) {
console.log('收到服务器内容:' + res.data)
})