html代码

Linux下源码包安装使用Swoole增加),前提系统现已设置好了Swoole

1 3月 , 2020  

ThinkPHP使用Swoole需要安装think-swoole Composer包,前提系统已经安装好了Swoole
PECL 拓展

本文实例讲述了ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例。分享给大家供大家参考,具体如下:

随着微信的普及,扫码登录方式越来越被现在的应用所使用。它因为不用去记住密码,只要有微信号即可方便快捷登录。微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实现。这里基于微信公众平台的带参数临时二维码,并且结合
Swoole 的 WebSocket 服务实现扫码登录。大体流程如下:

tp5的项目根目录下执行composer命令安装think-swoole:

ThinkPHP使用Swoole需要安装 think-swoole
Composer包,前提系统已经安装好了Swoole PECL
拓展(相关文章:Linux下源码包安装使用Swoole扩展)

客户端打开登录界面,连接到 WebSocket 服务 WebScoket
服务生成带参数二维码返回给客户端 用户扫描展示的带参数二维码
微信服务器回调扫码事件并通知开发者服务器 开发者服务器通知 WebSocket 服务
WebSocket 服务通知客户端登录成功

composer require topthink/think-swoole

在tp5的项目根目录下执行composer命令安装think-swoole:

连接 WebSocket 服务

话不多说,直接上代码:

composer require topthink/think-swoole

安装完 Swoole 之后,我们需用使用到 WebSocket 服务。新建一个 WebSocket
服务非常简单:

新建WebSocket.php控制器:

话不多说,直接上代码:

$server = new swoole_websocket_server;$server->on('open', function (swoole_websocket_server $server, $request) use { echo "server: handshake success with fd{$request->fd}n";});$server->on('message', function (swoole_websocket_server $server, $frame) {});

(监听端口要确认服务器放行,宝塔环境还需要添加安全组规则)

新建WebSocket.php控制器:

这里的 message
回调其实用不到,因为都是服务端下发消息的,但是必须设定一个。设定的端口号如果低于
1024 则必须要有 root 权限,服务器记得去防火墙开启该端口。

 4, //设置启动的Worker进程数 'daemonize' => false, //守护进程化 'backlog' => 128, //Listen队列长度 'dispatch_mode' => 2, //固定模式,保证同一个连接发来的数据只会被同一个worker处理 //心跳检测:每60秒遍历所有连接,强制关闭10分钟内没有向服务器发送任何数据的连接 'heartbeat_check_interval' => 60, 'heartbeat_idle_time' => 600 ]; //建立连接时回调函数 public function onOpen { $fd = $req->fd;//客户端标识 $uid = $req->get['uid'];//客户端传递的用户id $token = $req->get['token'];//客户端传递的用户登录token //省略token验证逻辑...... if  { $arr = array('status'=>2,'message'=>'token已过期'); $server->push($fd, json_encode; $server->close; return; } //省略给用户绑定fd逻辑...... echo "用户{$uid}建立了连接,标识为{$fd}n"; } //接收数据时回调函数 public function onMessage { $fd = $frame->fd; $message = $frame->data; //省略通过fd查询用户uid逻辑...... $uid = 666; $data['uid'] = $uid; $data['message'] = '用户'.$uid.'发送了:'.$message; $data['post_time'] = date; $arr = array('status'=>1,'message'=>'success','data'=>$data); //仅推送给当前连接用户 //$server->push($fd, json_encode; //推送给全部连接用户 foreach($server->connections as $fd) { $server->push($fd, json_encode; } } //连接关闭时回调函数 public function onClose { echo "标识{$fd}关闭了连接n"; }}

(监听端口要确认服务器放行,宝塔环境还需要添加安全组规则)

生成带参数二维码

(省略控制器判断登录状态、分配数据逻辑……)

 4, //设置启动的Worker进程数 'daemonize'=> false, //守护进程化 'backlog'=> 128, //Listen队列长度 'dispatch_mode' => 2, //固定模式,保证同一个连接发来的数据只会被同一个worker处理 //心跳检测:每60秒遍历所有连接,强制关闭10分钟内没有向服务器发送任何数据的连接 'heartbeat_check_interval' => 60, 'heartbeat_idle_time' => 600 ]; //建立连接时回调函数 public function onOpen { $fd = $req->fd;//客户端标识 $uid = $req->get['uid'];//客户端传递的用户id $token = $req->get['token'];//客户端传递的用户登录token //省略token验证逻辑...... if  { $arr = array('status'=>2,'message'=>'token已过期'); $server->push($fd, json_encode; $server->close; return; } //省略给用户绑定fd逻辑...... echo "用户{$uid}建立了连接,标识为{$fd}n"; } //接收数据时回调函数 public function onMessage { $fd = $frame->fd; $message = $frame->data; //省略通过fd查询用户uid逻辑...... $uid = 666; $data['uid'] = $uid; $data['message'] = '用户'.$uid.'发送了:'.$message; $data['post_time'] = date; $arr = array('status'=>1,'message'=>'success','data'=>$data); //仅推送给当前连接用户 //$server->push($fd, json_encode; //推送给全部连接用户 foreach($server->connections as $fd) { $server->push($fd, json_encode; } } //连接关闭时回调函数 public function onClose { echo "标识{$fd}关闭了连接n"; }}

WebSocket
服务在客户端连接成功后,需要生成一张微信的带参数二维码返回给客户端展示:

Chat   在线聊天 退出           发送  $ { var uid = 666;//当前用户id var token = 'abcdefg';//用户token //判断浏览器是否支持WebSocket var supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in window; if  { //建立WebSocket连接 var ws = new WebSocket("ws://127.0.0.1:9501?u&token="+token); ws.onopen = function () { layer.msg('服务器连接成功',{shade:0.1,icon:1,time:600}); }; ws.onerror = function () { layer.msg('服务器连接失败',{shade:0.1,icon:2,time:600}); }; ws.onmessage = function  { var data = $.parseJSON; //错误提示 if{ layer.alert(data.message,{icon:2}); return; } //消息返回 if (data.status==1 && data.data.message!='') { var html = ""; if  { html += "<div style='word-break:break-all' class="show"><div class="time">"+data.data.post_time+"</div><div class="msg"><img src=""+data.data.head_img+"" alt="" /><p><i clas="msg_input"></i>"+data.data.message+"</p></div></div>"; }else{ html += "<div style='word-break:break-all' class="send"><div class="time">"+data.data.post_time+"</div><div class="msg"><img src=""+data.data.head_img+"" alt="" /><p><i clas="msg_input"></i>"+data.data.message+"</p></div></div>"; } } $.append; setTimeout { .children.scrollIntoView; }; ws.onclose = function  { }; //按钮发送 $.click { var contents = $; if(contents == null || contents == ""){ layer.msg('内容为空',{shade:0.1,icon:2,time:600}); return false; }else{ ws.send.val; //回车发送 $.keydown { var that = $; if  { evel.cancelBubble = true; evel.preventDefault(); evel.stopPropagation(); var contents = that.val; if(contents == null || contents == ""){ layer.msg('内容为空',{shade:0.1,icon:2,time:600}); return false; }else{ ws.send; that.val; }else{ layer.alert("您的浏览器不支持 WebSocket!"); }});

(省略控制器判断登录状态、分配数据逻辑……)

$server->on('open', function (swoole_websocket_server $server, $request) use { $app = Factory::officialAccount; $result = $app->qrcode->temporary; $url = $app->qrcode->url; $server->push($request->fd, json_encode([ 'message_type' => 'qrcode_url', 'url' => $url ]));});

服务器移到项目根目录开启服务:

Chat   在线聊天 退出          发送  $ { var uid = 666;//当前用户id var token = 'abcdefg';//用户token //判断浏览器是否支持WebSocket var supportsWebSockets = 'WebSocket' in window || 'MozWebSocket' in window; if  { //建立WebSocket连接 var ws = new WebSocket("ws://127.0.0.1:9501?u&token="+token); ws.onopen = function () { layer.msg('服务器连接成功',{shade:0.1,icon:1,time:600}); }; ws.onerror = function () { layer.msg('服务器连接失败',{shade:0.1,icon:2,time:600}); }; ws.onmessage = function  { var data = $.parseJSON; //错误提示 if{ layer.alert(data.message,{icon:2}); return; } //消息返回 if (data.status==1 && data.data.message!='') { var html = ""; if  { html += "<div style='word-break:break-all' class="show"><div class="time">"+data.data.post_time+"</div><div class="msg"><img src=""+data.data.head_img+"" alt="" /><p><i clas="msg_input"></i>"+data.data.message+"</p></div></div>"; }else{ html += "<div style='word-break:break-all' class="send"><div class="time">"+data.data.post_time+"</div><div class="msg"><img src=""+data.data.head_img+"" alt="" /><p><i clas="msg_input"></i>"+data.data.message+"</p></div></div>"; } } $.append; setTimeout { .children.scrollIntoView; }; ws.onclose = function  { }; //按钮发送 $.click { var contents = $; if(contents == null || contents == ""){ layer.msg('内容为空',{shade:0.1,icon:2,time:600}); return false; }else{ ws.send.val; //回车发送 $.keydown { var that = $; if  { evel.cancelBubble = true; evel.preventDefault(); evel.stopPropagation(); var contents = that.val; if(contents == null || contents == ""){ layer.msg('内容为空',{shade:0.1,icon:2,time:600}); return false; }else{ ws.send; that.val; }else{ layer.alert("您的浏览器不支持 WebSocket!"); }});

我们在 open
回调中,生成一张临时的二维码,二维码的场景值就是客户端连接的文件描述符,这样就可以保证每个客户端的唯一性.有效时间设置为
120 秒,防止一张二维码被多次扫码使用。消息 push 到客户端的时候必须要
json,方便客户端处理。客户端代码也很简单:

php public/index.php Websocket/start

服务器移到项目根目录开启服务:

const socket = new WebSocket('ws://127.0.0.1:1099'); socket.addEventListener('message', function  { var data = JSON.parse; if (data.message_type == 'qrcode_url'){ $.attr; } });

这里的路径,是因为我绑定了home模块为默认模块,tp5默认情况是:php public/index.php index/Websocket/start)

php public/index.php Websocket/start

回调扫码事件

开启成功,查看端口已经被监听:

(这里的路径,是因为我绑定了home模块为默认模块,tp5默认情况是:php public/index.php index/Websocket/start

在客户端展示二维码后,需要提示用户扫码。对于用户扫临时的二维码,微信会触发相应的回调事件,我们需要在该回调事件中处理用户的扫码行为。其中我们需要用到微信传递过来的一些参数:

lsof -i:9501

开启成功,查看端口已经被监听:

FromUserName 发送方帐号MsgType 消息类型,eventEvent 事件类型,subscribeEventKey 事件 KEY 值,qrscene_为前缀,后面为二维码的参数值

很多PHPer在进阶的时候总会遇到一些问题和瓶颈,业务代码写多了没有方向感,不知道该从那里入手去提升,对此我整理了一些资料,包括但不限于:分布式架构、高可扩展、高性能、高并发、服务器性能调优、TP6,laravel,YII2,Redis,Swoole、Swoft、Kafka、Mysql优化、shell脚本、Docker、微服务、Nginx等多个知识点高级进阶干货需要的可以免费分享给大家,需要请戳这里

lsof -i:9501

这里要注意一点:微信已关注扫码推送的 EventKey 是没有 qrscene_
前缀的,只有未关注扫码然后关注才有。

总结

用户每刷新重连一次,fd标识都会改变。

收到微信回调后我们首先要根据不同的事件类型做不同处理:

以上所述是小编给大家介绍的PHP框架实现WebSocket在线聊天通讯系统,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI框架进阶教程》、《Zend
FrameWork框架入门教程》及《PHP模板技术总结》。

if ($message['MsgType'] == 'event'){ if ($message['Event'] == 'subscribe'){ //关注 return $this->subscribe; } if ($message['Event'] == 'unsubscribe') { //取消关注 return $this->unsubscribe; } if ($message['Event'] == 'SCAN'){ //已关注扫码 return $this->scan; }}else{ return "您好!欢迎使用 SwooleWechat 扫描登录";}

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

这里只讲解一个关注事件的业务逻辑,其他根据需要自行编码:

public function subscribe{ $eventKey = intval(str_replace('qrscene_', '', $message['EventKey'])); $openId = $message['FromUserName']; $user = $this->app->user->get; $this->notify(json_encode([ 'type' => 'scan', 'fd' => $eventKey, 'nickname' => $user['nickname'] ])); $count = $this->count; $msgTemp = "%s,登录成功!n这是你第%s次登录,玩的开心!"; return sprintf($msgTemp, $user['nickname'], $count);}

这里的 EventKey 实际上就是连接 WebSocket
的客户端文件描述符,获取到扫码用户的 OPEN_ID ,根据用户的 OPEN_ID
获取用户信息,通知 WebSocket 服务,响应文本消息给微信。

这里一个比较麻烦的点就是如何通知 WebSocket
服务,我们知道处理微信回调的代码是是不在 WebSocket 服务上的,那么不同
Server 间如何通信呢?Swoole 官方给出的解决方案有两个:

额外监听一个UDP端口 使用 swoole_client 作为客户端访问 Server

这里我们选择第二个方案,Swoole 1.8 版本支持一个 Server
监听多个端口,我们在 WebSocket 服务新增监听一个 TCP 的端口:

$tcp_server = $server->addListener('0.0.0.0', 9999, SWOOLE_SOCK_TCP);$tcp_server->set;$tcp_server->on('receive', function ($serv, $fd, $threadId, $data) { });

主服务器是 WebSocket 或 Http 协议,新监听的 TCP 端口默认会继承主 Server
的协议设置,必须单独调用 set 方法设置新的协议才会启用新协议

然后我们就可以在扫码回调的进程中去通知 WebSocket 服务:

public function notify{ $client = new swoole_client; if (!$client->connect('127.0.0.1', $this->config['notify_port'], -1)) { return "connect failed. Error: {$client->errCode}n"; } $ret = $client->send;}

通知登录成功

在 WebSocket
服务收到登录成功的通知后,就可以根据需要处理一下用户信息,然后把用户信息传递给客户端的浏览器展示结果,还记得我们刚刚新监听的
TCP 端口吗?就可以在 receive 事件中处理:

$tcp_server->on('receive', function ($serv, $fd, $threadId, $data) { $data = json_decode; if ($data['type'] == 'scan'){ $serv->push($data['fd'], json_encode([ 'message_type' => 'scan_success', 'user' => $data['nickname'] ])); } $serv->close;

总结

Linux下源码包安装使用Swoole增加),前提系统现已设置好了Swoole。整个过程并不难,主要的两个难点就是对应连接用户的扫码用户、不同 Server
之间的通信,我们的解决办法就是把连接的文件描述符作为临时二维码场景值(这里也可以采用
Redis 来存储映射关系)、监听新的 TCP 端口来接受通知消息。可以访问
试试看,记得要用电脑打开。

以上所述是小编给大家介绍的基于 Swoole
的微信扫码登录功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

, , , , , , ,


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图