Laravel构建即时应用的一种实现方法详解


Posted in PHP onAugust 31, 2017

即时交互的应用

大家应该都有所体会,在现代的 Web 应用中很多场景都需要运用到即时通讯,比如说最常见的支付回调,与三方登录。这些业务场景都基本需要遵循以下流程:

  • 客户端触发相关业务,并产生第三方应用的操作(比如支付)
  • 客户端等待服务端响应结果(用户完成第三方应用的操作)
  • 第三方应用通知服务端处理结果(支付完成)
  • 服务端通知客户端处理结果
  • 客户端依据结果做出反馈 (跳转到支付成功页面)

在过去,为了实现这种即时通讯,能让客户端正确响应处理结果,最为常用的技术就是轮询,因为 HTTP 协议的单向性,客户端只能一遍一遍的主动询问服务端的处理结果。这种方式有显见的缺陷,占用服务端资源不说,还不能实时获得服务端处理结果。

现在,我们可以使用 WebSocket 协议来处理实时交互,它是一种双向协议,允许服务端主动推送信息到客户端。本篇我们将借助 Laravel 强大的事件系统来构建实时的交互。你将需要用到以下知识:

  • Laravel Event
  • Redis
  • Socket.io
  • Node.js

Redis

在开始之前,我们需要开启一个 redis 服务,并在 Laravel 应用中进行配置启用,因为在整个流程中,我们需要借助 redis 的订阅和发布机制来实现即时通讯。

Redis 是一个开源高效的键值对存储系统。它通常作为一个数据结构服务器来存储键值对,它可以支持字符串,散列,列表,集合和有序结合。在 Laravel 中使用 Redis 你需用通过 Composer 来安装 predis/predis 包文件。

配置

Redis 在应用中的配置文件存储在 config/database.php,在这个文件中,你可以看到一个包含了 Redis 服务信息的 redis 数组:

'redis' => [
 'cluster' => false,

 'default' => [
 'host' => '127.0.0.1',
 'port' => 6379,
 'database' => 0,
 ],
]

如果你修改了 redis 服务的端口,请保持配置文件中的端口一致。

Laravel Event

这里我们需要借助 Laravel 强大的事件广播能力:

广播事件

很多现代化的应用中,会使用 Web Sockets 来实现实时交互的用户接口。当一些数据在服务端变更时,一条消息会通过 WebSocket 连接来传递到客户端进行处理。

为了帮助你构建这种类型的应用。Laravel 使通过 WebSocket 连接进行广播事件变的非常简单。Laravel 允许你广播事件来共享事件的名称到你的服务端和客户端的 JavaScript 框架。

配置

所有的事件广播配置选项都被存储在 config/broadcasting.php 配置文件中。Laravel 附带了几种可用的驱动如 Pusher,Redis,和 Log,我们将使用 Redis 作为广播驱动,这里需要依赖 predis/predis 类库。

由于默认的广播驱动使用的是 pusher,所以我们需要在 .env 文件中设置 BROADCAST_DRIVER=redis

我们创建一个 WechatLoginedEvent 事件类用来在用户扫描微信登录后进行广播:

<?php

namespace App\Events;

use App\Events\Event;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class WechatLoginedEvent extends Event implements ShouldBroadcast
{
 use SerializesModels;

 public $token;
 protected $channel;

 /**
  * Create a new event instance.
  *
  * @param string $token
  * @param string $channel
  * @return void
  */
 public function __construct($token, $channel)
 {
  $this->token = $token;
  $this->channel = $channel;
 }

 /**
  * Get the channels the event should be broadcast on.
  *
  * @return array
  */
 public function broadcastOn()
 {
  return [$this->channel];
 }

 /**
  * Get the name the event should be broadcast on.
  *
  * @return string
  */
 public function broadcastAs()
 {
  return 'wechat.login';
 }
}

其中你需要注意 broadcastOn 方法应返回一个数组,它表示所需广播的频道,而 broadcastAs 返回的是一个字符串,它表示广播所触发的事件,Laravel 默认的是返回事件类的全类名,这里是 App\Events\WechatLoginedEvent.

最重要的是你需要手动的让该类实现 ShouldBroadcast 契约。Laravel 在生成事件时,已经自动添加了该命名空间,该契约只约束 broadcastOn 方法。

事件完成接下来就是触发事件了,简单的一行代码就可以:

event(new WechatLoginedEvent($token, $channel));

这个操作会自动的触发事件的执行并将信息广播出去。该广播操作底层借助了 redis 的订阅和发布机制。

RedisBroadcaster 会将事件中的允许公开访问的数据通过给定的频道发布出去。如果你想对公开的数据拥有更多的控制,你可以在事件中添加 broadcastWith 方法,它应该返回一个数组:

/**
 * Get the data to broadcast.
 *
 * @return array
 */
 public function broadcastWith() 
 {
 return ['user' => $this->user->id];
 }

Node.js 和 Socket.io

对于发布出去的信息,我们需要一个服务来对接,让其能对 redis 的发布能够进行订阅,并且能把信息以 WebSocket 协议转发出去,这里我们可以借用 Node.js 和 socket.io 来非常方便的构建这个服务:

// server.js
var app = require('http').createServer(handler);
var io = require('socket.io')(app);

var Redis = require('ioredis');
var redis = new Redis();

app.listen(6001, function () {
 console.log('Server is running!') ;
});

function handler(req, res) {
 res.writeHead(200);
 res.end('');
}

io.on('connection', function (socket) {
 socket.on('message', function (message) {
 console.log(message)
 })
 socket.on('disconnect', function () {
 console.log('user disconnect')
 })
});


redis.psubscribe('*', function (err, count) {
});

redis.on('pmessage', function (subscrbed, channel, message) {
 message = JSON.parse(message);
 io.emit(channel + ':' + message.event, message.data);
});

这里我们使用 Node.js 引入 socket.io 服务端并监听 6001 端口,借用 redis 的 psubscribe 指令使用通配符来快速的批量订阅,接着在消息触发时将消息通过 WebSocket 转发出去。

Socket.io 客户端

在 web 前端,我们需要引入 Socket.io 客户端开启与服务端 6001 端口的通讯,并订阅频道事件:

// client.js
let io = require('socket.io-client')

var socket = io(':6001')
  socket.on($channel + ':wechat.login', (data) => {
  socket.close()
  // save user token and redirect to dashboard
})

至此整个通讯闭环结束,开发流程看起来就是这样的:

  • 在 Laravel 中构建一个支持广播通知的事件
  • 设置需要进行广播的频道及事件名称
  • 将广播设置为使用 redis 驱动
  • 提供一个持续的服务用于订阅 redis 的发布,及将发布内容通过 WebSocket 协议推送到客户端
  • 客户端打开服务端 WebSocket 隧道,并对事件进行订阅,根据指定事件的推送进行响应。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

PHP 相关文章推荐
动态网站web开发 PHP、ASP还是ASP.NET
Oct 09 PHP
php 字符串函数收集
Mar 29 PHP
使用php实现下载生成某链接快捷方式的解决方法
May 07 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
Sep 29 PHP
ThinkPHP模板输出display用法分析
Nov 26 PHP
php中Socket创建与监听实现方法
Jan 05 PHP
PHP 实现类似js中alert() 提示框
Mar 18 PHP
php通过asort()给关联数组按照值排序的方法
Mar 18 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
Dec 19 PHP
PHP判断一个数组是另一个数组子集的方法详解
Jul 31 PHP
PHP环形链表实现方法示例
Sep 15 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
Sep 21 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
Aug 31 #PHP
PHP下 Mongodb 连接远程数据库的实例代码
Aug 30 #PHP
php实现与python进行socket通信的方法示例
Aug 30 #PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
Aug 30 #PHP
PHP Socket网络操作类定义与用法示例
Aug 30 #PHP
[原创]php token使用与验证示例【测试可用】
Aug 30 #PHP
Laravel框架中VerifyCsrfToken报错问题的解决
Aug 30 #PHP
You might like
apache rewrite_module模块使用教程
2008/01/10 PHP
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
php session的应用详细介绍
2017/03/22 PHP
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
原生js实现轮播图
2017/02/27 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
微信小程序canvas实现刮刮乐效果
2018/07/09 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python 多个参数不为空校验方法
2019/02/14 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
python PIL模块的基本使用
2020/09/29 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
优秀团队获奖感言
2014/02/19 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
2014全国两会学习心得体会2000字
2014/03/10 职场文书
霸气队列口号
2014/06/18 职场文书
应届生找工作求职信
2014/06/24 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
图文详解nginx日志切割的实现
2022/01/18 Servers
mybatis源码解读之executor包语句处理功能
2022/02/15 Java/Android
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS