Building a Real-time Chat Application with Laravel 10 and Socket.IO

Prerequisites

Before we begin, ensure you have the following installed on your local machine:

PHP >= 7.4
Composer
Node.js and NPM
Laravel CLI

Additionally, you should have a basic understanding of Laravel, PHP, JavaScript, and Vue.js.

Setting up the Laravel 10 project

To set up the Laravel 10 project, run the following command in your terminal:

laravel new realtime-chat-app

This will create a new Laravel project in a directory called realtime-chat-app. Once the installation is complete, navigate to the project directory:

cd realtime-chat-app

Installing dependencies and setting up the environment

We need to install a few dependencies for our chat application. Run the following commands to install the required packages:

composer require laravel/ui
php artisan ui vue --auth
npm install
npm install socket.io-client

Next, create a .env file in the root directory of your project, and copy the contents of the .env.example file into it. Update the DB_CONNECTION, DB_HOST, DB_PORT, DB_DATABASE, DB_USERNAME, and DB_PASSWORD settings to match your database configuration.

Creating the chat interface

In this step, we’ll create a simple chat interface using Vue.js. First, create a new Vue component called ChatComponent.vue in the resources/js/components directory. Add the following code to this file:

<template>
  <div class="chat-container">
    <div class="messages">
      <div v-for="message in messages" :key="message.id" class="message">
        <strong>{{ message.user }}</strong>: {{ message.content }}
      </div>
    </div>
    <div class="input-area">
      <input v-model="newMessage" @keyup.enter="sendMessage" type="text" placeholder="Type your message here...">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: '',
    };
  },
  methods: {
    sendMessage() {
      // Logic to send a new message will go here
    },
  },
};
</script>

Now, register the ChatComponent in the resources/js/app.js file:

Vue.component('chat-component', require('./components/ChatComponent.vue').default);

Finally, add the chat-component to the resources/views/welcome.blade.php file:

<div id="app">
  <chat-component></chat-component>
</div>

Building the server-side logic with Laravel

Next, let’s build the server-side logic. First, create a new route in the routes/web.php file:

Route::post('/send-message', 'ChatController@sendMessage')->name('send-message');

Now, create a new controller called `ChatController` by running the following command:

php artisan make:controller ChatController

In the `ChatController`, add the following `sendMessage` method:

public function sendMessage(Request $request)
{
    $message = [
        'user' => Auth::user()->name,
        'content' => $request->input('content'),
        'id' => uniqid()
    ];

    // Logic to broadcast the message will go here

    return response()->json($message);
}

Implementing real-time communication with Socket.IO

First, install the necessary dependencies:

npm install --save express socket.io

Next, create a new file called server.js in the root directory of your project and add the following code:

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

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

  socket.on('send-message', (message) => {
    io.emit('new-message', message);
  });

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

const port = process.env.PORT || 3000;
server.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Now, update the sendMessage method in ChatComponent.vue:

async sendMessage() {
  if (this.newMessage.trim() === '') return;

  const response = await axios.post('/send-message', { content: this.newMessage });
  this.messages.push(response.data);
  this.newMessage = '';
  this.socket.emit('send-message', response.data);
}

Finally, modify the data() function and add a created() lifecycle hook in the ChatComponent.vue:

data() {
  return {
    messages: [],
    newMessage: '',
    socket: null,
  };
},
created() {
  this.socket = io('http://localhost:3000');
  this.socket.on('new-message', (message) => {
    this.messages.push(message);
  });
}

Testing the application

To test the application, you need to run both the Laravel and Node.js servers. In one terminal, run the following command to start the Laravel server:

php artisan serve

In another terminal, run the following command to start the Node.js server:

node server.js

Now, open your browser and visit http://localhost:8000. You should see the chat interface, and you can start sending messages in real-time.

Conclusion

In this blog post, we have demonstrated how to build a real-time chat application using Laravel 10 and Socket.IO. By leveraging the power of these two technologies, we have created a seamless and engaging user experience. With the basics in place, you can now explore additional features such as user authentication, private messaging, and more to make your chat application even more robust and versatile.