Laravel development: How to implement WebSockets communication using Laravel Echo Server?

Laravel Development: How to use Laravel Echo Server to implement WebSockets communication?

In modern web applications, real-time message communication is crucial. WebSockets is a protocol for two-way communication. In addition to HTTP, WebSockets allow the server to send messages to the client when necessary.

Laravel Echo Server is a WebSockets server built on Node.js for real-time message communication. It allows you to use the Laravel Echo package to easily communicate with clients via WebSockets, making it easier to establish real-time communication.

In this article, we will discuss how to use Laravel Echo Server to implement WebSockets communication.

Step 1 - Installation of Laravel and Laravel Echo

Before using Laravel Echo Server, we need to install Laravel and its dependencies.

We can find more information about Laravel at the following location: https://laravel.com/docs/8.x/installation

Similarly, in this article, Laravel also needs to be installed Echo bag. We can install it using Composer:

$ composer require laravel/echo

Step 2 - Install Laravel Echo Server

Now, we need to install Laravel Echo Server.

$ npm install -g laravel-echo-server

Step 3 - Configuration File

Once Laravel Echo Server is installed, we need to create a configuration file. The default configuration file can be generated using the following command:

$ laravel-echo-server init

This will generate a laravel-echo-server.json file in the current directory.

Next, we need to modify some configuration of this file to ensure that it meets our application needs.

In the laravel-echo-server.json file, we need to configure the following properties:

{
    "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: Define Echo Server The address to listen on (usually the same as the application's address).
• authEndpoint: Defines the address on which the Echo Server will wait for the client to send Auth information for authentication.
• database: Defines the type of database used by Echo Server to store connection and channel information.
• databaseConfig: Specific database configuration, here we use Redis.
• devMode: If set to true, you will see debug logs.
• host: Define the address that Echo Server listens to. If not set, Echo Server will listen on all available network interfaces.
• port: Define the port that Echo Server listens on.
• protocol: Defines the protocol used by Echo Server.
• socketio: For more advanced configuration parameters, please consult the documentation.
• sslCertPath: Path to the SSL root certificate.
• sslKeyPath: Path to the SSL key.
• sslCertChainPath: Used to upload an optional SSL root certificate chain.
• sslPassphrase: This value may be required if an SSL key is written.
• subscribers: Defines the client types that can subscribe to Echo Server.
• apiOriginAllow: Host that allows cross-domain requests.

Once we have completed the above configuration and saved the laravel-echo-server.json file, we can start the Echo Server using the following command:

$ laravel-echo-server start

Step 4 - Front-end code

Now, we need to introduce the Echo package into our front-end code. Make sure to add the following code at the bottom

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

In your JavaScript file add the following code:

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);
    });

This will connect to the Echo server and authenticate using the permissions call. A YourChannel channel will also be created and listen for YourEvent events.

Step 5 - Application Scenario

Now, we have successfully configured Laravel Echo Server and front-end code. We can use these tools for a variety of application scenarios, such as:

• Real-time chat room application
• Real-time blog comments
• Real-time user status updates

It should be noted that Echo Server only implements the server side of WebSockets communication. If we need to implement the function of real-time communication, we also need to implement the corresponding logic in the application.

We can use Laravel's broadcast function to implement these logics. See the Laravel documentation for how to use broadcast.

Conclusion

In this article, we detailed how to implement WebSockets communication using Laravel Echo Server.

The process is simple and can be used to implement a variety of real-time applications, allowing you to send messages to your users and receive feedback from them in real time.

By using Laravel Echo Server, we can more easily implement efficient real-time communication applications and improve the user experience and interactivity of our applications.

The above is the detailed content of Laravel development: How to implement WebSockets communication using Laravel Echo Server?. For more information, please follow other related articles on the PHP Chinese website!