Build a Real-Time Chat App with WebSockets

HTTP (Request-Response):
  Client: "Any new messages?"     → Server: "No."
  Client: "Any new messages?"     → Server: "No."
  Client: "Any new messages?"     → Server: "Yes! Here's one."
  Client: "Any new messages?"     → Server: "No."
  (Wasteful — constant polling)

WebSocket (Persistent Connection):
  Client: "Open connection"       → Server: "Connected."
  ...
  Server: "New message from John!"  (pushed instantly)
  Server: "Jane is typing..."      (pushed instantly)
  Server: "New message from Jane!" (pushed instantly)
  (Efficient — data pushed only when it exists)

# Install the plugin
go get github.com/MUKE-coder/grit-plugins/grit-websockets

                    ┌─────────────────┐
  Client A ────────→│                 │
  Client B ────────→│      Hub        │──→ Room: "general"  (A, B, C)
  Client C ────────→│  (manages all   │──→ Room: "support"  (D, E)
  Client D ────────→│   connections)  │──→ Room: "random"   (A, D)
  Client E ────────→│                 │
                    └─────────────────┘

  Flow:
  1. Client A sends message to "general"
  2. Hub receives the message
  3. Hub looks up all clients in "general" (A, B, C)
  4. Hub sends the message to B and C (not back to A)

  When Client D disconnects:
  1. Hub removes D from all rooms
  2. Hub broadcasts "D left" to rooms D was in

import ws "github.com/MUKE-coder/grit-plugins/grit-websockets"

func SetupRoutes(r *gin.Engine, s *services.Services) {
    // Create and start the WebSocket Hub
    wsHub := ws.NewHub()
    go wsHub.Run()

    // General WebSocket endpoint (all connected clients)
    r.GET("/ws", ws.HandleConnection(wsHub))

    // Room-specific WebSocket endpoint
    r.GET("/ws/room/:name", ws.HandleRoomConnection(wsHub))

    // ... other API routes
}

// Connect to the WebSocket server
const socket = new WebSocket('ws://localhost:8080/ws/room/general')

// Event: connection opened
socket.onopen = () => {
    console.log('Connected to chat!')
}

// Event: message received from server
socket.onmessage = (event) => {
    const data = JSON.parse(event.data)
    console.log('New message:', data.content)
}

// Event: connection closed
socket.onclose = () => {
    console.log('Disconnected from chat')
}

// Event: error occurred
socket.onerror = (error) => {
    console.error('WebSocket error:', error)
}

// Send a message
socket.send(JSON.stringify({
    type: 'message',
    content: 'Hello everyone!'
}))

// Custom hook for WebSocket chat connection
// useState: messages array, connectionStatus string
// useEffect: create WebSocket, set up handlers, cleanup on unmount

// On mount:
//   const ws = new WebSocket(url)
//   ws.onopen → setStatus('connected')
//   ws.onmessage → add parsed message to messages array
//   ws.onclose → setStatus('disconnected')

// Cleanup:
//   return () => ws.close()

// Send function:
//   ws.send(JSON.stringify({ type, content }))

// Return: { messages, status, send }

// ChatRoom component — takes roomName as prop
//
// State:
//   messages: array of { id, user, content, timestamp }
//   inputValue: string (current input field text)
//   status: 'connecting' | 'connected' | 'disconnected'
//
// Layout:
//   <div> — full height flex container
//     <header> — room name + connection status dot
//       Green dot = connected, Red dot = disconnected
//     </header>
//
//     <div> — scrollable message list (flex-1, overflow-y-auto)
//       For each message:
//         <div> — message bubble
//           <span> — sender name (bold)
//           <p> — message content
//           <span> — timestamp (muted text)
//         </div>
//       Auto-scroll: useRef on container, scrollTo bottom on new message
//     </div>
//
//     <form> — input area (sticky bottom)
//       <input> — message text, onSubmit sends via WebSocket
//       <button> — Send (disabled when disconnected)
//     </form>
//   </div>

// Connect to the "general" room
const general = new WebSocket('ws://localhost:8080/ws/room/general')

// Connect to the "support" room
const support = new WebSocket('ws://localhost:8080/ws/room/support')

// Messages sent on "general" only go to "general" clients
general.send(JSON.stringify({
    type: 'message',
    content: 'Hello general!'
}))

// Messages sent on "support" only go to "support" clients
support.send(JSON.stringify({
    type: 'message',
    content: 'I need help!'
}))

// Room switching logic:
// 1. User clicks "support" in the sidebar
// 2. Close current connection: currentSocket.close()
// 3. Open new connection: new WebSocket('ws://.../ws/room/support')
// 4. Clear message list
// 5. Load message history from REST API: GET /api/messages?room=support
// 6. Display historical messages + listen for new ones

// Client: pass JWT token as query parameter
const token = localStorage.getItem('access_token')
const socket = new WebSocket(
    'ws://localhost:8080/ws/room/general?token=' + token
)

// Server: verify token in the connection handler
// The grit-websockets plugin does this automatically:
// 1. Extract token from query parameter
// 2. Verify JWT signature and expiration
// 3. Attach user info to the connection
// 4. Reject connection if token is invalid (HTTP 401)

// Chat message — displayed in the message list
{
    "type": "message",
    "user": "John",
    "content": "Hello everyone!",
    "room": "general",
    "timestamp": "2025-01-15T10:30:00Z"
}

// Typing indicator — show "John is typing..."
{
    "type": "typing",
    "user": "John",
    "room": "general"
}

// Stop typing — hide the typing indicator
{
    "type": "stop_typing",
    "user": "John",
    "room": "general"
}

// User joined — show notification
{
    "type": "join",
    "user": "Jane",
    "room": "general"
}

// User left — show notification
{
    "type": "leave",
    "user": "Jane",
    "room": "general"
}

// Online users — update the user list
{
    "type": "online_users",
    "room": "general",
    "users": ["John", "Jane", "Bob"],
    "count": 3
}

// Inside onmessage handler:
// Parse the JSON data
// Switch on data.type:
//
//   case "message":
//     Add to messages array, display in chat
//
//   case "typing":
//     Show "John is typing..." below the message list
//     Set a timeout to hide it after 3 seconds
//
//   case "stop_typing":
//     Hide the typing indicator for that user
//
//   case "join":
//     Show "Jane joined the room" as a system message
//     Update online user count
//
//   case "leave":
//     Show "Jane left the room" as a system message
//     Update online user count
//
//   case "online_users":
//     Update the sidebar user list and count