This module focuses on implementing real-time chat functionality in your application using Socket.io. You will learn how to handle user connections, manage message broadcasting, and ensure that chat interactions are smooth and responsive. By the end, your chat application will allow users to communicate instantly.

Understanding Socket.io

Before diving into the implementation, it’s important to understand how Socket.io works. Socket.io enables real-time, bi-directional communication between the client and server. It uses WebSocket under the hood, but can fall back to other methods if WebSocket is unavailable.

Key Features of Socket.io

• Real-time Communication: Allows messages to be sent and received instantly.
• Event-based Communication: Uses events to trigger actions on the client and server.
• Automatic Reconnection: Automatically tries to reconnect if the connection is lost.

Enhancing the Server-Side Code

Step 1: Setting Up Events for Chat Messages

Open your server code in index.js. You need to ensure that the server listens for incoming messages and broadcasts them to all connected clients.

1. Listen for Incoming Messages: In the connection event, add an event listener for chat messages:

   socket.on('chat message', (msg) => {
       const name = users[socket.id] || 'Anonymous';
       const message = `${name}: ${msg}`;
       console.log(`Message received: ${message}`);
       io.emit('chat message', message); // Send message to all clients
   });
   

Step 2: Handling User Connections

When a user connects, it’s helpful to notify everyone in the chat. Add a message that announces new users when they join.

1. Notify on User Connection: Inside the connection event, emit a notification:

   socket.broadcast.emit('chat message', `${users[socket.id]} has joined the chat`);
   

2. Notify on User Disconnection: Similarly, notify everyone when a user leaves:

   socket.on('disconnect', () => {
       const name = users[socket.id];
       delete users[socket.id];
       socket.broadcast.emit('chat message', `${name} has left the chat`);
   });
   

Updating the Client-Side Code

Step 1: Receiving Chat Messages

Open your script.js file. You need to listen for messages broadcasted from the server and display them in the chat interface.

1. Listen for Incoming Messages: Add the following code to handle incoming chat messages:

   socket.on('chat message', (msg) => {
       const messageElement = document.createElement('div');
       messageElement.classList.add('message');
       messageElement.textContent = msg;
       messagesContainer.appendChild(messageElement);
       messagesContainer.scrollTop = messagesContainer.scrollHeight; // Auto-scroll
   });
   

Step 2: Sending Messages

You have already set up a click event for the send button. Ensure that messages are sent when the button is clicked or when the Enter key is pressed.

1. Modify the Send Button Logic: Update the button click event listener:

   sendButton.addEventListener('click', () => {
       const msg = messageInput.value.trim();
       if (msg) {
           socket.emit('chat message', msg); // Emit message to server
           messageInput.value = ''; // Clear input field
       }
   });
   

2. Capture Enter Key Press: Add an event listener for the Enter key:

   messageInput.addEventListener('keypress', (event) => {
       if (event.key === 'Enter') {
           sendButton.click(); // Trigger the send button click event
       }
   });
   

Handling User Names

Step 1: Prompting for User Names

Prompt users for their names when they first connect. This can be done in the client-side JavaScript.

1. Add User Name Prompt: Right after establishing the socket connection, prompt the user for their name:

   const userName = prompt('What is your name?');
   socket.emit('set name', userName);
   

Step 2: Updating User Name on the Server

On the server, ensure that user names are stored and used in messages.

1. Store User Names: Update your server’s connection logic to handle user names:

   socket.on('set name', (name) => {
       users[socket.id] = name; // Store the name
       socket.emit('name set', name); // Acknowledge name set
       socket.broadcast.emit('chat message', `${name} has joined the chat`); // Notify others
   });
   

Testing the Real-time Functionality

Step 1: Running the Application

Make sure your server is running and then open multiple browser windows or tabs to test the chat application with different users.

Step 2: Sending Messages

In each instance of the application, test sending messages. Ensure they appear in all connected clients and that user names are displayed correctly.

Step 3: Joining and Leaving Notifications

Observe the notifications for when users join and leave the chat. Ensure these messages appear correctly for all users.

Adding Features for Better User Experience

Step 1: Displaying Timestamps

You can enhance message visibility by adding timestamps. Modify the message format to include the time when a message was sent.

1. Get Current Time: Update your message event on the server:

   const time = new Date().toLocaleTimeString();
   const message = `${time} ${name}: ${msg}`;
   

Step 2: Styling Messages

Update the CSS to make messages visually distinct, perhaps by adding colors based on the user or type of message.

1. Add CSS Styles for Timestamps:

   .timestamp {
       color: gray;
       font-size: 0.8em;
   }
   

2. Modify the Message Display Logic:

   const messageElement = document.createElement('div');
   messageElement.classList.add('message');
   messageElement.innerHTML = `<span class="timestamp">${time}</span> ${msg}`;
   

Step 3: Customizing User Colors

You can assign different colors to each user’s messages for easier identification. Use a simple color array and assign a color based on user name.

1. Define a Color Palette:

   const colors = ['#FF5733', '#33FF57', '#3357FF', '#F3FF33'];
   

2. Assign Colors Based on User:

   const userColor = colors[socket.id % colors.length]; // Simple color assignment
   messageElement.style.color = userColor;
   

Conclusion

In this module, you implemented real-time chat functionality using Socket.io. You enhanced the server to handle user connections, manage chat messages, and notify users of changes in the chatroom. The client-side JavaScript was updated to display messages and handle user interactions smoothly. With this foundation, your chat application is now capable of supporting real-time communication, allowing users to connect and interact effectively. This sets the stage for adding more features and polishing the user experience in subsequent modules.