PHP使用workerman实现后端消息推送前端, 完成微信登录

php基础

浏览数:74

2019-9-7

前言:

在项目中, 系统需要接入微信登录, 当手机扫描二维码, PHP后端如何通知前端用户是否同意微信登录
实现方式有两种:

  1. 轮询(耗费资源)
  2. websocket
    本文主要使用PHP workerman实现server端

1. 流程分析

  • 用户点击二维码登录, 弹出二维码, 前端和server端连接websocket连接
  • 当用户扫描二维码时, 请求后端某一个接口, 后端在接口里连接server端, 向server推送消息
  • server端接收到推送的消息, 将其推送给浏览器, 从而完成交互过程

2. 具体实现

参考官网文档: http://doc.workerman.net/worker/listen.html

  • composer安装workerman/workerman
    composer require workerman/workerman

  • server端代码如下
    server.php

<?php
/**
 * 认真编码 快乐生活
 * User: helloJiu
 * Date: 2018/9/12
 * Time: 17:42
 */
use Workerman\Worker;
require_once __DIR__ . '/vendor/autoload.php';

// 初始化一个worker容器, 监听19999端口, 用于接收浏览器websocket请求
$worker = new Worker('websocket://0.0.0.0:19999');

$worker->count = 4;

// worker进程启动后创建一个text Worker以便打开一个内部通讯端口
$worker->onWorkerStart = function ($worker){    

    // 开启一个内部端口,方便内部系统推送数据,Text协议格式 文本+换行符
    $inner_text_worker = new Worker('text://0.0.0.0:10002');
    $inner_text_worker->onMessage = function ($connection, $buffer){
        // 使用uid判断需要向哪个页面推送数据
        // $data数组格式,里面有uid,表示向那个uid的页面推送数据
        $data = json_decode($buffer, true);
        $uid = $data['uid'];
        
        // 通过workerman,向uid的页面推送数据
        $res = sendMessageByUid($uid, $buffer);
        $connection->send($res ? 'ok' : 'fail');
    };
    $inner_text_worker->listen();
};


$worker->uidConnections = [];

// 当有客户端发来消息时执行的回调函数, 客户端需要表明自己是哪个uid
$worker->onMessage = function ($connection, $data){
    global $worker;
    if(!isset($connection->uid)){
        // 没验证的话把第一个包当做uid(这里为了方便演示,没做真正的验证)
        $connection->uid = $data;
        $worker->uidConnections[$connection->uid] = $connection;
        return ;
    }
};

$worker->onClose = function ($connection){
    global $worker;
    if(isset($connection->uid)){
        unset($worker->uidConnections[$connection->uid]);
    }
};

function broadCast($message){
    global $worker;
    foreach ($worker->uidConnections as $connection){
        $connection->send($message);
    }
}

// 向客户端某一个uid推送数据
function sendMessageByUid($uid, $message){
    global $worker;
    if(isset($worker->uidConnections[$uid])){
        $connection = $worker->uidConnections[$uid];
        $connection->send($message);
        return true;
    }
    return false;
}

Worker::runAll();
  • 客户端代码
    建立websocket连接, 等待消息推送
    client.html
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <h3>WebSocket协议的客户端程序</h3>
    <button id="btConnect">连接到WS服务器</button>
    <button id="btSendAndReceive">向WS服务器发消息并接收消息</button>
    <button id="btClose">断开与WS服务器的连接</button>
    <div id="val"></div>
<script type="text/javascript">
    var wsClient=null;
    btConnect.onclick=function(){
        wsClient=new WebSocket('ws://127.0.0.1:19999');
        console.log(wsClient)
        wsClient.onopen = function(){
            var uid = 'uid1';
            // 表名自己是uid1
            wsClient.send(uid);
            console.log('ws客户端已经成功连接到服务器上')
        }
        wsClient.onmessage = function(e){
            console.log('ws客户端收到一个服务器消息:'+e.data);
            val.innerHTML=e.data;
        }
    }
    btSendAndReceive.onclick = function(){
        wsClient.send('Hello Server');
        wsClient.onmessage = function(e){
            console.log('ws客户端收到一个服务器消息:'+e.data);
            val.innerHTML=e.data;
        }
    }
    btClose.onclick = function(){
        wsClient.close();
        wsClient.onclose = function(){
            console.log('到服务器的连接已经断开');
        }
    }
</script>
</body>
</html>
  • 模拟微信登陆后 请求php接口, 完成消息推送
    push.php
<?php
/**
 * 认真编码 快乐生活
 * User: helloJiu
 * Date: 2018/9/12
 * Time: 18:06
 */
// 建立socket连接到内部推送端口
$client = stream_socket_client('tcp://127.0.0.1:10002', $errno, $errmsg, 1);
// 推送的数据,包含uid字段,表示是给这个uid推送
$data = array('uid'=>'uid1', 'percent'=>'88%');
// 发送数据,注意5678端口是Text协议的端口,Text协议需要在数据末尾加上换行符
fwrite($client, json_encode($data)."\n");
// 读取推送结果
echo fread($client, 8192);
fclose($client);

3. 模拟过程

  • 在终端里执行php server.php, 开启服务, 等待客户端(浏览器和php客户端)连接

    server.png

  • 浏览器里打开client.html, 打开控制台console, 点击按钮->链接到websocket

    client.png

  • 另开一个终端, 执行php push.php, 此时再客户端就能看到php推送过来的消息, 从而完成一次交互

    push.png

    客户端接收到php推送的消息

    success.png

  • 可以使用多个客户端, 将uid改成uid2, 模拟多个用户

作者:其实我很dou