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.
#laravel #laravel-8x #socketio #broadcasting