Maison  >  Article  >  cadre php  >  Explication détaillée de la façon dont Laravel-echo-server crée des applications en temps réel

Explication détaillée de la façon dont Laravel-echo-server crée des applications en temps réel

青灯夜游
青灯夜游avant
2021-09-28 19:42:233422parcourir

La colonne tutorielle suivante de Laravel vous présentera comment utiliser Laravel-echo-server pour créer des applications en temps réel. J'espère qu'elle sera utile à tout le monde !

Explication détaillée de la façon dont Laravel-echo-server crée des applications en temps réel

À mon avis, la communication en temps réel est l'avenir des applications APP. Les services Socket ne sont généralement pas faciles à mettre en œuvre, mais le service Laravel Echo change cette situation.

Dans cet article, je présenterai brièvement comment établir un service Socket en cours d'exécution et diffuser des événements sur ce service. (https://github.com/tlaverdure/laravel-echo-server, documentation de support Laravel : https://learnku.com/docs/laravel/5.6/broadcasting#driver-prerequisites)

C'est entièrement gratuit, il vous suffit exécutez votre propre service Socket. Vous pouvez également utiliser le Pusher intégré par défaut de Laravel. Le seul inconvénient est qu'il est limité et que vous devez payer si vous dépassez la limite. Je préfère structurer ces choses moi-même.

Exigences :

  • Framework Laravel (ce tutoriel utilise la version 5.6)
  • Service Redis
  • Connaissances de base de Laravel

Installer laravel-echo-server

Nous avons d’abord besoin d’une vue d’ensemble Pour installer laravel-echo-server, il vous suffit de saisir la commande suivante dans le terminal.

 $ npm install -g laravel-echo-server

Une fois l'installation terminée, ouvrez votre application Laravel ou démarrez un nouveau projet de test :

 $ composer create-project --prefer-dist laravel/laravel echo-test

Ensuite, installez Predis pour notre application :

 $ composer require predis/predis

Une fois l'installation terminée, passez au répertoire racine du projet et initialisez le Service Socket :

 $ laravel-echo-server init

Après avoir exécuté cette commande, il vous sera demandé quelques informations de configuration sur le service Socket. Vous pouvez les renseigner en fonction de votre propre situation :

Explication détaillée de la façon dont Laravel-echo-server crée des applications en temps réel

N'oubliez pas que dans un environnement de production, peu importe. lorsque vous l'utilisez, vous devez le désactiver.

Nous pouvons essayer de démarrer le service et voir s'il fonctionne correctement :

$ laravel-echo-server start

Le résultat ressemblera à ceci :

Explication détaillée de la façon dont Laravel-echo-server crée des applications en temps réel

Configurez Laravel pour que Laravel Echo Server fonctionne correctement

Ouvrez votre config/app.php et décommentez BroadcastServiceProvider dans le tableau Providers : config/app.php 文件并且取消 BroadcastServiceProvider 在这个 Providers 数组中的注释:

AppProvidersBroadcastServiceProvider::class,

这个 Provider 将会启动广播路由(你或许已经在 routes/channels.php 文件里面已经看到了)

打开 .env  文件,修改  BROADCAST_DRIVER 的值为你在 laravel-echo-server 初始化时定义的值(Redis 或者 Log)。在本教程中我们将使用 Redis 驱动程序。
同时修改  QUEUE_DRIVER 为你喜欢的任何队列驱动程序,在这个示例中你可以轻松的将其更改为 Redis 驱动程序,因为你在前面已经安装并且在运行了。

接下来我们必须安装 Socket.io 客户端和 Laravel-Echo 包,你可以通过以下操作来安装:

$ npm install --save socket.io-client
$ npm install --save laravel-echo

(在运行这个之前你可能需要运行  npm install  来安装 Laravel 及相关依赖)

接下来打开  resources/assets/js/bootstrap.js  文件, 或者你自己的 引入所有 JS 基础代码的 JS 文件。

现在我们要添加启动 Echo 基础服务的代码:

import Echo from 'laravel-echo'

window.io = require('socket.io-client');
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

现在我们准备在频道上监听消息了!我会在本教程中解释怎么开放频道,接下来开始收听我们的第一个频道:

window.Echo.channel('test-event')
    .listen('ExampleEvent', (e) => {
        console.log(e);
    });

我们通过 JS 代码告诉程序我们订阅了名为 ’test-event' 的频道, 并监听 ‘ExampleEvent’ 事件 (这是事件的类名,你也可以根据你的需要自定义)。

让我们创建这个事件类:

$ php artisan make:event ExampleEvent

这将会在 App/Events 目录下面创建一个叫做 ExampleEvent.php 的事件类
让我们对这个事件类稍作调整使得它能够在我们的 Socket 服务 中能够正常运行,首先确保你的事件类继承于 ShouldBroadcast 接口,就像下面这样;

class ExampleEvent implements ShouldBroadcast

接下来向下滚动找到  broadcastOn  函数,修改它使得我们能够在正确的频道上进行广播:

public function broadcastOn()
{
    return new Channel('test-event');
}

让我们在下面新建一个函数,这样我们才能有一些实例数据:

public function broadcastWith()
{
    return [
        'data' => 'key'
    ];
}

这个函数在事件被调用时调用,它将会把数据返回到你的 Socket 服务中。

现在让我们开始尝试它吧!打开你的 routes/web.php

AppProvidersBroadcastServiceProvider::class,🎜
🎜Ce fournisseur sera démarré en diffusion routage (vous l'avez peut-être vu dans le fichier routes/channels.php) 🎜🎜Ouvrez le fichier .env et modifiez la valeur de BROADCAST_DRIVER Pour la valeur que vous avez définie lors de l'initialisation de laravel-echo-server (Redis ou Log). Dans ce tutoriel, nous utiliserons le pilote Redis.
Modifiez également QUEUE_DRIVER en n'importe quel pilote de Explication détaillée de la façon dont Laravel-echo-server crée des applications en temps réel d'attente de votre choix. Dans cet exemple, vous pouvez facilement le remplacer par le pilote Redis puisque vous l'avez déjà installé et exécuté. 🎜🎜Ensuite, nous devons installer le client Socket.io et le package Laravel-Echo, vous pouvez l'installer en procédant comme suit : 🎜
Route::get('test-broadcast', function(){
    broadcast(new \App\Events\ExampleEvent);
});
🎜 (Vous devrez peut-être exécuter npm install pour installer Laravel avant d'exécuter ceci et les dépendances associées)🎜🎜Ouvrez ensuite le fichier resources/assets/js/bootstrap.js, ou votre propre fichier JS qui présente tout le code de base JS. 🎜🎜Maintenant, nous allons ajouter le code pour démarrer le service Echo base : 🎜
$ php artisan queue:listen --tries=1
🎜Maintenant, nous sommes prêts à écouter les messages sur la chaîne ! Je vais vous expliquer comment ouvrir une chaîne dans ce tutoriel, puis commencer à écouter notre première chaîne : 🎜
#!/usr/bin/env bash

laravel-echo-server  start
🎜 Nous disons au programme via le code JS que nous nous abonnons à la chaîne nommée 'test-event', et écoutons le 'ExampleEvent' ' event (C'est le nom de classe de l'événement, vous pouvez également le personnaliser selon vos besoins). 🎜🎜Créons cette classe d'événements :🎜rrreee🎜Cela créera une classe d'événements appelée ExampleEvent.php dans le répertoire App/Events
Ajustons légèrement cet événement afin qu'elle puisse s'exécuter normalement dans notre service Socket. Tout d'abord, assurez-vous que votre classe d'événement hérite de l'interface ShouldBroadcast, comme suit : 🎜
🎜class SampleEvent implémente ShouldBroadcast🎜
 ; 🎜Faites ensuite déExplication détaillée de la façon dont Laravel-echo-server crée des applications en temps réelr vers le bas pour trouver la fonction broadcastOn et modifiez-la afin que nous puissions diffuser sur la bonne chaîne : 🎜rrreee🎜 Créons une nouvelle fonction ci-dessous afin que nous ayons des données d'instance : 🎜rrreee🎜 Cette fonction est appelée lorsque l'événement est appelé et renverra les données à votre service Socket. 🎜🎜Maintenant, commençons à l’essayer ! Ouvrez votre fichier routes/web.php et ajoutez une route test : 🎜
Route::get('test-broadcast', function(){
    broadcast(new \App\Events\ExampleEvent);
});

(有很多种方式来广播 ExampleEvent  类 ,在这个示例中我使用 Laravel 提供的 broadcast() 助手,在我看来这是最简洁的方式)

启动队列监听:

$ php artisan queue:listen --tries=1

浏览器打开一个包含 JS 文件的页面(可以是 Laravel 默认的欢迎页面),这是第一个页面,请不要关闭次页面,我们已经在此页面上订阅了 Socket 服务。

接下来打开另一个页面访问  /test-broadcast ,这将会返回一个空白页面,但是它将会通过你的 ExampleEvent  类广播到你的 Socket 服务上。返回到我们的第一个页面,打开浏览器控制台,应该可以看到类似信息:

Explication détaillée de la façon dont Laravel-echo-server crée des applications en temps réel

正如你所看到的,数据通过这种形式展示在我们的客户端。你能输入任意数据通过你的  ExampleEvent 类来广播他们,这些数据可以是新闻更新,页面更新,总浏览量或者更多。

因为我们有在 laravel-echo-server 配置中有设置开发者模式,所以你能看到 Socket 服务上的所有基本信息:

Explication détaillée de la façon dont Laravel-echo-server crée des applications en temps réel

现在你已经安装并运行了一个基本的 Socket 服务!但这并不是全部,你可以根据这个来做更多的事情,比如为单个用户提供认证的私有渠道。(当您想广播订单更新或私人消息时)

要做到这一点,我建议你去查看 Laravel 文档了解更多相关的内容。通过这个主题你能做很多事情,让你的应用程序变得更加神奇。你可以在这里找到相应的文档:

Broadcasting - Laravel - The PHP framework for web artisans.laravel.com

其他: 在生产环境中运行

正如我之前所说,你必须在 laravel-echo-server.json 配置文件中禁用开发者模式。 当然在服务器上你可以忽略这个文件,重新初始化它,因为你的主机可能和本地不同。

你还需要保持你的 Socket 服务在你的生产环境中运行,你可以用 Supervisor ,但是我通常使用 PM2  ,它可以方便快速的管理你的服务。 (http://pm2.keymetrics.io/)

这里是我使用 PM2 的 Socket.sh 基本配置:

#!/usr/bin/env bash

laravel-echo-server  start

安装了 PM2 后, 你可以通过 pm2 start socket.sh 命令来启动脚本,运行你的 Socket 服务。

我希望它能够帮助到你。 这篇文章主要介绍的是一些基础知识,接下来我们会继续讨论广播路由的授权和不同的广播频道。

感谢你的阅读!

英文原文地址:https://medium.com/@dennissmink/laravel-echo-server-how-to-24d5778ece8b

译文地址:https://learnku.com/laravel/t/13101/using-laravel-echo-server-to-build-real-time-applications

更多编程相关知识,请访问:编程视频!!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer