Laravel-Entwicklung: Wie implementiert man die WebSockets-Kommunikation mit Laravel Echo Server?

Laravel-Entwicklung: Wie verwende ich Laravel Echo Server, um die WebSockets-Kommunikation zu implementieren?

In modernen Webanwendungen ist die Echtzeit-Messaging-Kommunikation von entscheidender Bedeutung. WebSockets ist ein Protokoll für die bidirektionale Kommunikation. Zusätzlich zu HTTP ermöglichen WebSockets dem Server, bei Bedarf Nachrichten an den Client zu senden.

Laravel Echo Server ist ein WebSockets-Server, der auf Node.js für die Nachrichtenkommunikation in Echtzeit basiert. Es ermöglicht Ihnen die Verwendung des Laravel Echo-Pakets zur einfachen Kommunikation mit Clients über WebSockets und erleichtert so den Aufbau einer Echtzeitkommunikation.

In diesem Artikel besprechen wir, wie man Laravel Echo Server zur Implementierung der WebSockets-Kommunikation verwendet.

Schritt 1 – Installation von Laravel und Laravel Echo

Bevor wir Laravel Echo Server verwenden, müssen wir Laravel und seine Abhängigkeiten installieren.

Weitere Informationen zu Laravel finden Sie unter: https://laravel.com/docs/8.x/installation

Ebenso muss in diesem Artikel auch das Laravel Echo-Paket installiert werden. Wir können es mit Composer installieren:

$ composer require laravel/echo

Schritt 2 – Laravel Echo Server installieren

Jetzt müssen wir Laravel Echo Server installieren.

$ npm install -g laravel-echo-server

Schritt 3 – Konfigurationsdatei

Sobald Laravel Echo Server installiert ist, müssen wir eine Konfigurationsdatei erstellen. Die Standardkonfigurationsdatei kann mit dem folgenden Befehl generiert werden:

$ laravel-echo-server init

Dadurch wird eine laravel-echo-server.json-Datei im aktuellen Verzeichnis generiert. 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

Als nächstes müssen wir einige Konfigurationen dieser Datei ändern, um sicherzustellen, dass sie unseren Anwendungsanforderungen entspricht.

In der Datei laravel-echo-server.json müssen wir die folgenden Eigenschaften konfigurieren:

rrreee

• authHost: Definieren Sie die Adresse, die der Echo Server hört zu (im Allgemeinen dieselbe Adresse wie die Anwendung).
• authEndpoint: Definiert die Adresse, an der Echo Server darauf wartet, dass der Client Auth-Informationen zur Authentifizierung sendet.
• Datenbank: Definiert den Datenbanktyp, den Echo Server zum Speichern von Verbindungs- und Kanalinformationen verwendet.
• databaseConfig: Spezifische Datenbankkonfiguration, hier verwenden wir Redis.
• devMode: Wenn auf true gesetzt, werden Debug-Protokolle angezeigt.
• host: Definieren Sie die Adresse, auf die Echo Server lauscht. Wenn nicht festgelegt, überwacht Echo Server alle verfügbaren Netzwerkschnittstellen.
• port: Definieren Sie den Port, auf dem Echo Server lauscht.
• Protokoll: Definiert das von Echo Server verwendete Protokoll.
• socketio: Weitere erweiterte Konfigurationsparameter finden Sie in der Dokumentation.
• sslCertPath: Pfad zum SSL-Root-Zertifikat.
• sslKeyPath: Pfad zum SSL-Schlüssel.
• sslCertChainPath: Wird zum Hochladen einer optionalen SSL-Stammzertifikatskette verwendet.
• sslPassphrase: Dieser Wert kann erforderlich sein, wenn ein SSL-Schlüssel geschrieben wird.
• subscribers: Definiert die Clienttypen, die Echo Server abonnieren können.
• apiOriginAllow: Host, der domänenübergreifende Anfragen zulässt.

Sobald wir die obige Konfiguration abgeschlossen und die Datei laravel-echo-server.json gespeichert haben, können wir den Echo Server mit dem folgenden Befehl starten:

rrreee

Schritt 4 – Frontend-Code

Jetzt müssen wir das Echo-Paket in unseren Frontend-Code einführen. Stellen Sie sicher, dass Sie unten den folgenden Code hinzufügen: 🎜rrreee🎜Fügen Sie in Ihrer JavaScript-Datei den folgenden Code hinzu: 🎜rrreee🎜Dadurch wird eine Verbindung zum Echo-Server hergestellt und die Authentifizierung mithilfe des Berechtigungsaufrufs durchgeführt. Außerdem wird ein YourChannel-Kanal erstellt, der auf YourEvent-Ereignisse wartet. 🎜🎜Schritt 5 – Anwendungsszenario🎜🎜Jetzt haben wir Laravel Echo Server und Front-End-Code erfolgreich konfiguriert. Wir können diese Tools für eine Vielzahl von Anwendungsszenarien verwenden, wie zum Beispiel: 🎜

• Echtzeit-Chatroom-Anwendung
• Echtzeit-Blogkommentare
• Echtzeit Aktualisierungen des Benutzerstatus

🎜Es ist zu beachten, dass Echo Server nur die Serverseite der WebSockets-Kommunikation implementiert. Wenn wir die Funktion der Echtzeitkommunikation implementieren müssen, müssen wir auch die entsprechende Logik in der Anwendung implementieren. 🎜🎜Wir können die broadcast-Funktion von Laravel verwenden, um diese Logiken zu implementieren. Informationen zur Verwendung von Broadcast finden Sie in der Laravel-Dokumentation. 🎜🎜Fazit🎜🎜In diesem Artikel haben wir detailliert beschrieben, wie Sie die WebSockets-Kommunikation mit Laravel Echo Server implementieren. 🎜🎜Der Prozess ist einfach und kann zur Implementierung verschiedener Echtzeitanwendungen verwendet werden, sodass Sie Nachrichten an Ihre Benutzer senden und in Echtzeit Feedback von ihnen erhalten können. 🎜🎜Durch den Einsatz von Laravel Echo Server können wir effizientere Echtzeit-Kommunikationsanwendungen einfacher implementieren und das Benutzererlebnis und die Interaktivität unserer Anwendungen verbessern. 🎜

Das obige ist der detaillierte Inhalt vonLaravel-Entwicklung: Wie implementiert man die WebSockets-Kommunikation mit Laravel Echo Server?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!