Laravel Daily
Home Topics

How to Broadcast Events in Laravel with Socket.io

Updated: Mar 25, 2023

Are you looking for a way to broadcast events in your Laravel application using Socket.io? Look no further because this article will guide you through the entire process.

What is Socket.io?

Real-time, bidirectional, and event-based communication between the server and the client are made possible by the JavaScript library known as Socket.io. It ensures that your application functions flawlessly and across all platforms, browsers, and devices.

Why use Socket.io with Laravel?

The potent PHP framework Laravel makes it simple to create reliable and scalable apps. Laravel can easily handle real-time events and messages when paired with Socket.io. Laravel is the best framework for creating chat applications, real-time analytics dashboards, and other applications because Socket.io enables events to be broadcast to numerous clients in real-time.

Installing Socket.io in Laravel

Before you can start using Socket.io in your Laravel application, you need to install it first. Here's how:

  1. Install Node.js and NPM on your machine.
  2. Open your Laravel application directory and run the following command to install the Socket.io server:
npm install --save socket.io

Next, run the following command to install the Socket.io client:

npm install --save socket.io-client

Creating the Event

The first step in broadcasting events with Socket.io is to create the event that you want to broadcast. Here's an example:

namespace App\Events;

use Illuminate<span class="hljs-title">Broadcasting<span class="hljs-title">Channel;
use Illuminate<span class="hljs-title">Broadcasting<span class="hljs-title">InteractsWithSockets;
use Illuminate<span class="hljs-title">Broadcasting<span class="hljs-title">PresenceChannel;
use Illuminate<span class="hljs-title">Broadcasting<span class="hljs-title">PrivateChannel;
use Illuminate<span class="hljs-title">Contracts<span class="hljs-title">Broadcasting<span class="hljs-title">ShouldBroadcast;
use Illuminate<span class="hljs-title">Foundation<span class="hljs-title">Events<span class="hljs-title">Dispatchable;
use Illuminate<span class="hljs-title">Queue<span class="hljs-title">SerializesModels;


class NewMessage implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;


<span class="hljs-keyword">public</span> $message;

<span class="hljs-comment">/**
 * Create a new event instance.
 *
 * <span class="hljs-doctag">@return</span> void
 */</span><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">__construct</span><span class="hljs-params">($message)</span>
</span>{
    <span class="hljs-keyword">$this</span>-&gt;message = $message;
}

<span class="hljs-comment">/**
 * Get the channels the event should broadcast on.
 *
 * <span class="hljs-doctag">@return</span> \Illuminate\Broadcasting\Channel|array
 */</span><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">broadcastOn</span><span class="hljs-params">()</span>
</span>{
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Channel(<span class="hljs-string">'chat'</span>);
}



}

This event will broadcast a new message to the 'chat' channel. You can customize this event to suit your needs.

Broadcasting the Event

Once you've created the event, the next step is to broadcast it. Here's an example:

use App<span class="hljs-title">Events<span class="hljs-title">NewMessage;
use Illuminate<span class="hljs-title">Support<span class="hljs-title">Facades<span class="hljs-title">Broadcast;


Broadcast::channel('chat', function ($user) {
return true;
});


broadcast(new NewMessage('Hello, World!'))->toOthers();

This code broadcasts the 'NewMessage' event to all connected clients on the 'chat' channel.

Receiving the Event

To receive the event on the client-side, you need to add the following code to your JavaScript file:

import Echo from 'laravel-echo';


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


Echo.channel('chat')
.listen('NewMessage', (message) => {
console.log(message);
});

This code initializes the Socket.io client and listens for the 'NewMessage' event on the 'chat' channel.

Conclusion

In conclusion, broadcasting events in Laravel with Socket.io is a powerful way to add real-time functionality to your applications. By following the steps outlined in this article, you can easily broadcast events and messages to multiple clients in

Tutorial Package Freelancing