Real-time

Real-time WebSocket Chat

Bidirectional communication using WebSockets for real-time messaging with connection management.

WebSocketNode.jsReact

Real-time WebSocket Chat

This demo simulates a WebSocket connection for real-time bidirectional communication. In production, this would connect to a real WebSocket server.

Disconnected• Attempts: 0

✓ Real-time Communication

Bidirectional data flow between client and server

✓ Connection Management

Automatic reconnection and connection state tracking

✓ Low Latency

Instant message delivery without polling

✓ Scalable

Handles thousands of concurrent connections

Use Cases

• Live chat applications

• Real-time notifications

• Collaborative editing

• Live sports scores

• Stock market tickers

• Multiplayer games

Code

const useWebSocket = (url: string) => {
  const [messages, setMessages] = useState([])
  const ws = useRef<WebSocket | null>(null)
  
  useEffect(() => {
    ws.current = new WebSocket(url)
    
    ws.current.onmessage = (event) => {
      setMessages(prev => [...prev, event.data])
    }
    
    return () => ws.current?.close()
  }, [url])
  
  const sendMessage = (msg: string) => {
    ws.current?.send(msg)
  }
  
  return { messages, sendMessage }
}