WebSocket.jpeg

Websocket是一种服务端和客户端可以持久连接的通信协议，我们可以利用WebSocket的特性实现服务器主动向客户端推送消息的功能。

这里我们用TP5.1框架结合Workerman来做演示

首先用Composer下载TP5.1框架composer create-project topthink/think=5.1.* tp5  --prefer-dist

下载完成后再在项目目录下通过  composer  引入  workermancomposer require topthink/think-worker

等完成后就可以在 vendor 目录里看到  workerman注意：本人环境CentOS7，TP5.1框架，PHP版本5.6.0

然后在项目的根目录下新建一个  start.php 文件，用于启动WebSocket服务。<?phpuse  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)

})

作者：IT青年

链接：https://www.jianshu.com/p/67c320d19814