Building Real-Time Applications with WebSockets

Key Features

websocket-tutorial/
├── src/
│   ├── app/
│   │   ├── page.tsx          # Main chat interface
│   │   ├── layout.tsx        # App layout
│   │   └── globals.css       # Global styles
│   ├── hooks/
│   │   └── useSocket.ts      # Custom hook for Socket.IO connection
│   └── types/
│       └── message.ts        # Message type definitions
├── server.ts                 # Socket.IO server with Next.js integration
├── package.json
└── README.md

// server.ts
import { createServer } from 'http';
import { Server } from 'socket.io';
import next from 'next';

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handler = app.getRequestHandler();

app.prepare().then(() => {
  const server = createServer(handler);
  const io = new Server(server);

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

    socket.on('chat message', (msg) => {
      // Broadcast message to all connected clients
      io.emit('chat message', msg);
    });

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

  server.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
  });
});

// src/hooks/useSocket.ts
import { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';
import { Message } from '@/types/message';

export const useSocket = () => {
  const [socket, setSocket] = useState<Socket | null>(null);
  const [isConnected, setIsConnected] = useState(false);
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    const socketInstance = io();

    socketInstance.on('connect', () => {
      setIsConnected(true);
    });

    socketInstance.on('disconnect', () => {
      setIsConnected(false);
    });

    socketInstance.on('chat message', (message: Message) => {
      setMessages((prev) => [...prev, message]);
    });

    setSocket(socketInstance);

    return () => socketInstance.close();
  }, []);

  const sendMessage = (text: string) => {
    if (socket && text.trim()) {
      const message: Message = {
        id: Date.now().toString(),
        text,
        timestamp: new Date(),
        isSent: true,
      };
      socket.emit('chat message', message);
    }
  };

  return { socket, isConnected, messages, sendMessage };
};

// src/types/message.ts
export interface Message {
  id: string;
  text: string;
  timestamp: Date | string;
  isSent: boolean;
}

// src/app/page.tsx
'use client';

import { useState, useRef, useEffect } from 'react';
import { useSocket } from '@/hooks/useSocket';

export default function ChatPage() {
  const { isConnected, messages, sendMessage } = useSocket();
  const [inputValue, setInputValue] = useState('');
  const messagesEndRef = useRef<HTMLDivElement>(null);

  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (inputValue.trim()) {
      sendMessage(inputValue);
      setInputValue('');
    }
  };

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
      <div className="flex items-center gap-2 mb-4">
        <div className={`w-3 h-3 rounded-full ${
          isConnected ? 'bg-green-500' : 'bg-red-500'
        }`} />
        <span className="text-sm text-gray-600">
          {isConnected ? 'Connected' : 'Disconnected'}
        </span>
      </div>

      <div className="flex-1 overflow-y-auto mb-4 space-y-2">
        {messages.map((message) => (
          <div
            key={message.id}
            className={`flex ${
              message.isSent ? 'justify-end' : 'justify-start'
            }`}
          >
            <div
              className={`max-w-xs px-4 py-2 rounded-lg ${
                message.isSent
                  ? 'bg-blue-500 text-white'
                  : 'bg-gray-200 text-gray-800'
              }`}
            >
              {message.text}
            </div>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          className="flex-1 px-4 py-2 border rounded-lg"
          placeholder="Type a message..."
          disabled={!isConnected}
        />
        <button
          type="submit"
          disabled={!isConnected || !inputValue.trim()}
          className="px-6 py-2 bg-blue-500 text-white rounded-lg disabled:opacity-50"
        >
          Send
        </button>
      </form>
    </div>
  );
}

Prerequisites

• • Node.js (version 18 or higher)
• • npm or yarn

Installation Steps

1. 1
   Clone the repository:

   git clone https://github.com/audoir/websocket-tutorial.git
2. 2
   Navigate to the project directory:

   cd websocket-tutorial
3. 3
   Install dependencies:

   npm install
4. 4
   Start the development server:

   npm run dev
5. 5
   Open your browser and navigate to:

   http://localhost:3000

1. 1. Open multiple browser tabs/windows to http://localhost:3000
2. 2. Type a message in one tab and press Send
3. 3. Observe the message appearing in all other tabs in real-time
4. 4. Notice the connection status indicator
5. 5. Try refreshing a tab to see reconnection behavior