Développement Laravel : Comment implémenter la communication WebSockets à l'aide de Laravel Echo Server ?

Développement Laravel : Comment utiliser Laravel Echo Server pour implémenter la communication WebSockets ?

Dans les applications Web modernes, la communication par messagerie en temps réel est cruciale. WebSockets est un protocole de communication bidirectionnelle. En plus du HTTP, les WebSockets permettent au serveur d'envoyer des messages au client lorsque cela est nécessaire.

Laravel Echo Server est un serveur WebSockets construit sur Node.js pour la communication de messages en temps réel. Il vous permet d'utiliser le package Laravel Echo pour communiquer facilement avec les clients via WebSockets, facilitant ainsi l'établissement d'une communication en temps réel.

Dans cet article, nous verrons comment utiliser Laravel Echo Server pour implémenter la communication WebSockets.

Étape 1 - Installation de Laravel et Laravel Echo

Avant d'utiliser Laravel Echo Server, nous devons installer Laravel et ses dépendances.

Nous pouvons trouver plus d'informations sur Laravel sur : https://laravel.com/docs/8.x/installation

De même, dans cet article, le package Laravel Echo doit également être installé. Nous pouvons l'installer à l'aide de Composer :

$ composer require laravel/echo

Étape 2 - Installer Laravel Echo Server

Maintenant, nous devons installer Laravel Echo Server.

$ npm install -g laravel-echo-server

Étape 3 - Fichier de configuration

Une fois Laravel Echo Server installé, nous devons créer un fichier de configuration. Le fichier de configuration par défaut peut être généré à l'aide de la commande suivante :

$ laravel-echo-server init

Cela générera un fichier laravel-echo-server.json dans le répertoire courant. laravel-echo-server.json 文件。

接下来，我们需要修改此文件的一些配置，以确保它符合我们的应用程序需求。

在 laravel-echo-server.json 文件中，我们需要配置以下属性：

{
    "authHost": "http://your-app.com",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "host": "127.0.0.1",
            "port": "6379"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

• authHost：定义 Echo Server 要监听的地址（一般情况下与应用程序的地址相同）。
• authEndpoint：定义了 Echo Server 将在此地址上等待客户端发送 Auth 信息以进行身份验证。
• database：定义 Echo Server 用于存储连接和频道信息的数据库的类型。
• databaseConfig：具体的数据库配置，这里我们使用 Redis。
• devMode：如果设置为 true，你将会看到调试日志。
• host：定义 Echo Server 监听的地址。如果未设置，Echo Server 将监听所有可用的网络接口。
• port：定义 Echo Server 监听的端口。
• protocol：定义 Echo Server 使用的协议。
• socketio：更高级的配置参数，请查阅文档。
• sslCertPath：路径到 SSL 根证书。
• sslKeyPath：路径到 SSL 密钥。
• sslCertChainPath：用于上传可选 SSL 根证书链。
• sslPassphrase：如果写入了 SSL 密钥，则可能需要该值。
• subscribers：定义能够订阅 Echo Server 的客户端类型。
• apiOriginAllow：允许跨域请求的主机。

一旦我们完成了上述配置并保存 laravel-echo-server.json 文件，我们可以使用以下命令启动 Echo Server：

$ laravel-echo-server start

步骤4 - 前端代码

现在，需要在我们的前端代码中引入 Echo 包。 确保在底部添加以下代码

<script src="https://cdn.jsdelivr.net/npm/laravel-echo@1.9.3/dist/echo.js"></script>

在您的 JavaScript 文件中添加以下代码：

import Echo from 'laravel-echo'

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    auth: {
        headers: {
            'Authorization': 'Bearer ' + token
        }
    }
});

window.Echo.channel('YourChannel')
    .listen('YourEvent', (e) => {
        console.log(e);
    });

这将连接到 Echo 服务器并使用权限调用进行身份验证。 还将创建一个 YourChannel 频道并监听 YourEvent 事件。

步骤5 - 应用场景

现在，我们已经成功配置了 Laravel Echo Server 和前端代码。我们可以将这些工具用于多种应用场景，例如：

• 实时聊天室应用程序
• 实时博客评论
• 实时用户状态更新

需要注意的是，Echo Server 只是实现了 WebSockets 通信的服务端。 如果我们需要实现实时通信的功能，我们还需要在应用程序中实现相应的逻辑。

我们可以使用 Laravel 的 broadcast

Ensuite, nous devons modifier certaines configurations de ce fichier pour nous assurer qu'il répond aux besoins de notre application.

Dans le fichier laravel-echo-server.json, nous devons configurer les propriétés suivantes :

rrreee

• authHost : Définir l'adresse à laquelle le Echo Server écoutera (généralement la même adresse que l'application).
• authEndpoint : définit l'adresse à laquelle Echo Server attendra que le client envoie les informations d'authentification pour l'authentification.
• base de données : définit le type de base de données utilisée par Echo Server pour stocker les informations de connexion et de canal.
• databaseConfig : Configuration spécifique de la base de données, nous utilisons ici Redis.
• devMode : s'il est défini sur true, vous verrez les journaux de débogage.
• host : Définissez l'adresse qu'Echo Server écoute. S’il n’est pas défini, Echo Server écoutera sur toutes les interfaces réseau disponibles.
• port : définissez le port sur lequel Echo Server écoute.
• protocole : Définit le protocole utilisé par Echo Server.
• socketio : Pour des paramètres de configuration plus avancés, veuillez consulter la documentation.
• sslCertPath : Chemin d'accès au certificat racine SSL.
• sslKeyPath : Chemin d'accès à la clé SSL.
• sslCertChainPath : utilisé pour télécharger une chaîne de certificat racine SSL facultative.
• sslPassphrase : Cette valeur peut être requise si une clé SSL est écrite.
• abonnés : définit les types de clients pouvant s'abonner à Echo Server.
• apiOriginAllow : hôte qui autorise les requêtes inter-domaines.

Une fois que nous avons terminé la configuration ci-dessus et enregistré le fichier laravel-echo-server.json, nous pouvons démarrer le serveur Echo en utilisant la commande suivante :

rrreee

Step 4 - Code Frontend

Maintenant, nous devons introduire le package Echo dans notre code front-end. Assurez-vous d'ajouter le code suivant en bas 🎜rrreee🎜Dans votre fichier JavaScript, ajoutez le code suivant : 🎜rrreee🎜Cela se connectera au serveur Echo et s'authentifiera à l'aide de l'appel d'autorisations. Une chaîne YourChannel sera également créée et écoutera les événements YourEvent. 🎜🎜Étape 5 - Scénario d'application🎜🎜Maintenant, nous avons configuré avec succès Laravel Echo Server et le code frontal. Nous pouvons utiliser ces outils pour une variété de scénarios d'application, tels que : 🎜

• Application de salon de discussion en temps réel
• Commentaires de blog en temps réel
• En temps réel mises à jour du statut des utilisateurs

🎜Il convient de noter qu'Echo Server n'implémente que le côté serveur de la communication WebSockets. Si nous devons implémenter la fonction de communication en temps réel, nous devons également implémenter la logique correspondante dans l'application. 🎜🎜Nous pouvons utiliser la fonction broadcast de Laravel pour implémenter ces logiques. Consultez la documentation Laravel pour savoir comment utiliser la diffusion. 🎜🎜Conclusion🎜🎜Dans cet article, nous avons détaillé comment implémenter la communication WebSockets à l'aide de Laravel Echo Server. 🎜🎜Le processus est simple et peut être utilisé pour mettre en œuvre une variété d'applications en temps réel, vous permettant d'envoyer des messages à vos utilisateurs et de recevoir des commentaires de leur part en temps réel. 🎜🎜En utilisant Laravel Echo Server, nous pouvons plus facilement mettre en œuvre des applications de communication en temps réel efficaces et améliorer l'expérience utilisateur et l'interactivité de nos 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!