How To Create Socket.io Server With Express Js In Laravel

Hello Artisan,

In this Laravel brand new socket io Laravel tutorial, I will explain from scratch that how to create your own socket server in your Laravel application and create a real-time broadcasting system in Laravel. We can use the Laravel echo server to create a real-time event broadcasting system in Laravel. But in this example, I will use a socket io server to do that.

So from this tutorial, you will learn how to create a socket server in Laravel with node express js and how to create a real-time simple demo messaging system in Laravel using that socket server. To create this socket server in Laravel, I will use Express js. You know that Express is a flexible Node.js web application framework. 

In my many previous tutorials, I have published tutorials on real-time broadcasting in Laravel using pusher or socket io. But in this example, I will use socket io using express js. That's different from the other broadcasting tutorial of my blog.

Let's start the tutorial of the Laravel socket io demo messaging example.

Step 1: Download Laravel

I am going to start from scratch so that you can do it step by step. Let's download a fresh Laravel project by the following command:

laravel new socketio

Step 2: Create Route

In this step, we will create a route. So add the following route like that.

routes/web.php

Route::get('/', function () {
    return view('welcome');
});

Step 3: Install Express Js

You know that I told you that I will use express js to set up socket.io the server. To install express js, just run the below command:

npm install
//and then run
npm install express

Now after installing express js, now create a file called server.js and update it like below:

your_project/server.js

const express = require('express');

const app = express();

const server = require('http').createServer(app);

const io = require('socket.io')(server, {
    cors: { origin: "*"}
});

io.on('connection', (socket) => {
    console.log('connection');

    socket.on('sendChatToServer', (message) => {
        console.log(message);

        // io.sockets.emit('sendChatToClient', message); 
        socket.broadcast.emit('sendChatToClient', message); 
    });

    socket.on('disconnect', (socket) => {
        console.log('Disconnect');
    });
});

server.listen(3000, () => {
    console.log('Server is running');
});

Read also: Laravel Event Broadcasting Using Socket.io with Redis

Step 4: Create Blade View

Now in this step, we need to create welcome.blade.php for showing our messaging form. So create it like that.

resources/views/welcome.blade.php

All are set to go. Now we can start our server and test this real-time messaging system in Laravel using socket.io and express js. Open a terminal and start the socket server and Laravel server like

And start Laravel server like

Read also : Real Time Broadcasting with Laravel 8.x Vuejs and Pusher

Now open two browsers and test them by typing a message. Hope this Laravel socket.io and express js tutorial will help you.