เมนู
ในหน้านี้

Real-time ด้วย WebSocket

Implement การสื่อสารแบบสองทิศทางแบบ real-time ด้วย WebSocket

WebSocket ให้ช่องทางการสื่อสารแบบ full-duplex ผ่าน TCP connection เดียว ทำให้ส่งข้อมูลแบบ real-time ระหว่าง client และ server ต่างจากรูปแบบ request-response ของ HTTP, WebSocket เปิด connection ค้างไว้ ทำให้ server สามารถ push updates ได้ทันที ผม implement WebSocket ด้วย custom hook pattern ที่จัดการ connection lifecycle, auto reconnection และ message serialization — ทำให้สร้างฟีเจอร์ real-time เช่น chat, notifications และ live updates ได้ง่าย

ผมแสดงแนวคิด WebSocket ด้วยการจำลองที่นี่ ใน production คุณจะเชื่อมต่อ WebSocket server จริง (ใช้ ws, Socket.io หรือ Pusher) รูปแบบที่แสดง — การจัดการ connection, reconnection logic และ message handling — ใช้ได้กับทุกการ implement WebSocket สำหรับ use cases ที่ง่ายกว่า ลองพิจารณา Server-Sent Events (SSE) หรือ polling

วิธีการทำงาน

lib/
└── websocket/
    └── useWebSocket.ts      # Custom WebSocket hook

providers/
└── WebSocketProvider.tsx    # Context provider for WebSocket

components/
└── Chat/
    └── ChatWindow.tsx       # Chat UI component

Real-time

Instant bidirectional communication for live updates.

Auto Reconnect

Automatic reconnection with configurable retry intervals.

Persistent Connection

Maintains open connection for continuous data flow.

คุณสมบัติหลัก

  • •การสื่อสารสองทิศทางแบบ real-time
  • •Auto reconnection เมื่อขาดการเชื่อมต่อ
  • •จัดการ connection state
  • •Message queue สำหรับข้อความขณะ offline
  • •จัดการข้อความแบบ event-based

ตัวอย่างการใช้งาน
Mock

WebSocket Chat Simulator

Alice

Alice
เชื่อมต่อแล้ว

ยังไม่มีข้อความ เริ่มบทสนทนาเลย!

Bob

Bob
เชื่อมต่อแล้ว

ยังไม่มีข้อความ เริ่มบทสนทนาเลย!

วิธีการทำงานของ demo นี้:

  • • Simulated WebSocket: Demo นี้จำลองพฤติกรรม WebSocket โดยใช้ shared React state
  • • Real-time Sync: ข้อความปรากฏทันทีทั้งสองฝั่ง เหมือนการ sync แบบ real-time
  • • Connection Toggle: ใช้ปุ่มเชื่อมต่อเพื่อจำลองสถานะ เชื่อมต่อ/ขาดการเชื่อมต่อ
  • • Message History: ข้อความทั้งหมดถูกเก็บไว้ในประวัติการสนทนา