Time to Create and Join Chat Rooms

Lecture 395:- Time to Create and Join Chat Rooms

Creating and joining chat rooms using Socket.io involves the following steps:

1. In the server, create a Socket.io instance and listen for incoming connections.
2. When a new connection is established, listen for a join event from the client.
3. When the join event is received, create a new room using socket.join(roomName).
4. Emit a joined event back to the client to confirm that they have successfully joined the room.
5. When the client sends a message to the server, emit a message event to all other users in the room.

Here's some example code that demonstrates how to create and join chat rooms using Socket.io:

Server-side code:

javascriptCopy code

const io = require('socket.io')(server); io.on('connection', (socket) => {  console.log('A user has connected');  socket.on('join', (roomName) => {    console.log(`User ${socket.id} has joined room ${roomName}`);    socket.join(roomName);    socket.emit('joined', `You have joined room ${roomName}`);    socket.to(roomName).emit('joined', `User ${socket.id} has joined the room`);  });  socket.on('message', (data) => {    console.log(`Received message from user ${socket.id}: ${data.message}`);    socket.to(data.room).emit('message', data.message);  });  socket.on('disconnect', () => {    console.log(`User ${socket.id} has disconnected`);  }); });

Client-side code:

javascriptCopy code

const socket = io(); socket.emit('join', 'roomName'); socket.on('joined', (message) => {  console.log(message); }); socket.on('message', (message) => {  console.log(message); }); document.querySelector('form').addEventListener('submit', (event) => {  event.preventDefault();  const messageInput = document.querySelector('#message');  const message = messageInput.value;  socket.emit('message', { message, room: 'roomName' });  messageInput.value = ''; });

In this example, the server listens for incoming connections and then listens for join, message, and disconnect events. When a user sends a join event, the server creates a new room with the specified name and emits a joined event back to the client to confirm that they have joined the room. When a user sends a message event, the server emits the message to all other users in the room. Finally, when a user disconnects, the server logs a message to the console.

On the client-side, the join event is sent when the page loads. When the joined event is received, the client logs a message to the console. The message event is sent when the user submits a message through a form, and the message is displayed in the console when it is received.