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服务。

<?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代码如下

<script>
  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);
  });</script>

微信小程序端接收推送演示

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