Detailed explanation of Laravel's method of building instant applications-PHP Tutorial-php.cn

This article mainly introduces you to an implementation method of building instant applications in Laravel. Instant messaging is often encountered in our daily development. This article introduces it in detail through sample code. Friends who need it can refer to it. Let’s learn with the editor below. I hope to be helpful.

Instant interactive applications

Everyone should have experienced that instant messaging is required in many scenarios in modern Web applications. For example, the most common payment callback is related to third-party login. These business scenarios basically need to follow the following process:

The client triggers related businesses and generates third-party application operations (such as payment)
The client waits for the server response result (the user completes the operation of the third-party application)
The third-party application notifies the server of the processing result (payment is completed)
The server notifies the client of the processing results
The client makes feedback based on the results (jumps to the payment success page)

In In the past, in order to achieve this kind of instant communication and allow the client to respond correctly to the processing results, the most commonly used technology was polling. Because of the one-way nature of the HTTP protocol, the client could only actively ask the server for the processing results over and over again. This method has obvious flaws. Not only does it occupy server-side resources, it also cannot obtain server-side processing results in real time.

Now, we can use the WebSocket protocol to handle real-time interactions. It is a two-way protocol that allows the server to actively push information to the client. In this article we will use Laravel's powerful event system to build real-time interactions. You will need the following knowledge:

Laravel Event
Redis
Socket.io
Node.js

#Redis

Before we begin, We need to open a redis service and configure and enable it in the Laravel application, because throughout the process, we need to use redis's subscription and publishing mechanism to achieve instant messaging.

Redis is an open source and efficient key-value storage system. It is usually used as a data structure server to store key-value pairs, and it can support strings, hashes, lists, sets and ordered combinations. To use Redis in Laravel you need to install the predis/predis package file through Composer.

Configuration

The Redis configuration file in the application is stored in config/database.php. In this file, you can see a The redis array containing the Redis service information:

&#39;redis&#39; => [
 &#39;cluster&#39; => false,

 &#39;default&#39; => [
 &#39;host&#39; => &#39;127.0.0.1&#39;,
 &#39;port&#39; => 6379,
 &#39;database&#39; => 0,
 ],
]

Copy after login

If you modify the port of the redis service, please keep the port in the configuration file consistent.

Laravel Event

Here we need to use Laravel’s powerful event broadcasting capabilities:

Broadcast Event

Many modern applications use Web Sockets to implement real-time interactive user interfaces. When some data changes on the server, a message is delivered to the client for processing via the WebSocket connection.

To help you build this type of application. Laravel makes it easy to broadcast events over a WebSocket connection. Laravel allows you to broadcast events to share the event name to your server-side and client-side JavaScript frameworks.

Configuration

All event broadcast configuration options are stored in the config/broadcasting.php configuration file. Laravel comes with several available drivers such as Pusher, Redis, and Log. We will use Redis as the broadcast driver, which requires the predis/predis class library.

Since the default broadcast driver uses pusher, we need to set BROADCAST_DRIVER=redis in the .env file.

We create a WechatLoginedEvent event class to broadcast after the user scans WeChat login:

<?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 &#39;wechat.login&#39;;
 }
}

Copy after login

You need to note that the broadcastOn method should return an array, which represents the channel to be broadcast, and broadcastAs returns a string, which represents the event triggered by the broadcast. Laravel's default is to return the full class name of the event class. Here is App\Events\WechatLoginedEvent.

The most important thing is that you need to manually Let this class implement the ShouldBroadcast contract. Laravel has automatically added this namespace when generating events, and this contract only constrains the broadcastOn method.

After the event is completed, the next step is to trigger the event. A simple line of code is enough:

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

Copy after login

This operation will automatically trigger the execution of the event and broadcast the information. The underlying broadcast operation relies on the subscription and publishing mechanism of redis.

RedisBroadcaster will publish the publicly accessible data in the event through the given channel. If you want to have more control over the exposed data, you can add the broadcastWith method to the event, which should return an array:

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

Copy after login

Node.js and Socket.io

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

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

var Redis = require(&#39;ioredis&#39;);
var redis = new Redis();

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

function handler(req, res) {
 res.writeHead(200);
 res.end(&#39;&#39;);
}

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


redis.psubscribe(&#39;*&#39;, function (err, count) {
});

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

Copy after login

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

Socket.io 客户端

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

// client.js
let io = require(&#39;socket.io-client&#39;)

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

Copy after login

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