WebSocket Real-Time Features

Overview

WebSockets enable bidirectional communication between client and server. Build real-time features like chat, notifications, and live updates.

Use Cases

• Chat Applications: Instant messaging
• Live Notifications: Real-time alerts
• Collaborative Editing: Multiple users editing documents
• Gaming: Real-time multiplayer interactions
• Live Dashboards: Real-time data visualization

Server Setup with Socket.IO

npm install socket.io express

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

const app = express()
const server = http.createServer(app)
const io = new Server(server, {
  cors: { origin: '*' }
})

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

  // Listen for events
  socket.on('message', (data) => {
    // Broadcast to all clients
    io.emit('message', data)
  })

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

server.listen(3000, () => console.log('Server running'))

Client Setup

import { io } from 'socket.io-client'

const socket = io('http://localhost:3000')

socket.on('connect', () => {
  console.log('Connected')
})

socket.on('message', (data) => {
  console.log('Received:', data)
})

// Send message
socket.emit('message', { text: 'Hello' })

React Component Example

import { useEffect, useState } from 'react'
import { io, Socket } from 'socket.io-client'

export function ChatRoom() {
  const [messages, setMessages] = useState<any[]>([])
  const [socket, setSocket] = useState<Socket | null>(null)

  useEffect(() => {
    const newSocket = io('http://localhost:3000')
    setSocket(newSocket)

    newSocket.on('message', (data) => {
      setMessages(prev => [...prev, data])
    })

    return () => newSocket.close()
  }, [])

  const sendMessage = (text: string) => {
    socket?.emit('message', { text })
  }

  return (
    <div>
      {messages.map((msg, i) => (
        <p key={i}>{msg.text}</p>
      ))}
      <input onKeyPress={(e) => {
        if (e.key === 'Enter') {
          sendMessage(e.currentTarget.value)
          e.currentTarget.value = ''
        }
      }} />
    </div>
  )
}

WebSockets can handle thousands of concurrent connections with sub-100ms latency.