How To Build A Simple Chatroom Using Socket.io

Socket.IO is a powerful library designed for real-time web applications, enabling seamless, bi-directional communication between web clients and servers. Here’s an overview of its key features, architecture, and usage.

Overview

• Event-Driven Architecture: Socket.IO allows for event-based communication, meaning that both the client and server can emit and listen to events. This makes it suitable for applications requiring real-time updates, such as chat applications or live notifications.
• Components: It consists of two main components:
  • A client that runs in the browser.
  • A server built on Node.js.

Both components share a similar API, facilitating ease of use and integration.

Key Features

• Transport Protocols: Primarily utilizes the WebSocket protocol but falls back to polling methods when necessary. This ensures reliable connections even in challenging network conditions, such as behind proxies or firewalls.
• Namespaces and Rooms: Supports multiple namespaces for creating separate communication channels within the same connection, allowing for organized event handling.
• Binary Support: Can handle various data types, including JSON, ArrayBuffer, and Blob, making it versatile for different use cases

Below are some of the main scripts which I have used. You can check the code in Github.

App.tsx

import React, { useState, useEffect, useRef } from 'react';
import { io, Socket } from 'socket.io-client';
import { Send } from 'lucide-react';

function App() {
  const [messages, setMessages] = useState<string[]>([]);
  const [inputMessage, setInputMessage] = useState('');
  const socketRef = useRef<Socket | null>(null);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    socketRef.current = io('http://localhost:3000');

    socketRef.current.on('chat message', (msg: string) => {
      setMessages((prevMessages) => [...prevMessages, msg]);
    });

    return () => {
      socketRef.current?.disconnect();
    };
  }, []);

  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (inputMessage.trim() && socketRef.current) {
      socketRef.current.emit('chat message', inputMessage);
      setInputMessage('');
    }
  };

  return (
    <div className="flex flex-col h-screen bg-gray-100">
      <header className="bg-blue-600 text-white py-4">
        <h1 className="text-2xl font-bold text-center">Simple Chat App</h1>
      </header>
      <div className="flex-1 overflow-y-auto p-4">
        {messages.map((msg, index) => (
          <div key={index} className="bg-white rounded-lg p-3 mb-2 shadow">
            {msg}
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>
      <form onSubmit={handleSubmit} className="bg-white p-4 flex">
        <input
          type="text"
          value={inputMessage}
          onChange={(e) => setInputMessage(e.target.value)}
          className="flex-1 border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          placeholder="Type a message..."
        />
        <button
          type="submit"
          className="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <Send size={24} />
        </button>
      </form>
    </div>
  );
}

export default App;

Server.js

import express from 'express';
import { createServer } from 'http';
import { Server } from 'socket.io';

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:5173",
    methods: ["GET", "POST"]
  }
});

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

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });

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

const PORT = 3000;
httpServer.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Conclusion

Socket.IO is an essential tool for developers looking to implement real-time features in web applications. Its robust architecture and ease of integration make it a popular choice for modern web development projects focused on interactivity and responsiveness