前言:
在项目中, 系统需要接入微信登录, 当手机扫描二维码, PHP后端如何通知前端用户是否同意微信登录
实现方式有两种:
- 轮询(耗费资源)
- websocket
本文主要使用PHP workerman实现server端
1. 流程分析
- 用户点击二维码登录, 弹出二维码, 前端和server端连接websocket连接
- 当用户扫描二维码时, 请求后端某一个接口, 后端在接口里连接server端, 向server推送消息
- server端接收到推送的消息, 将其推送给浏览器, 从而完成交互过程
2. 具体实现
参考官网文档: http://doc.workerman.net/worker/listen.html
composer安装workerman/workerman
composer require workerman/workermanserver端代码如下
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, 模拟多个用户
