การใช้ Socket.IO กับ React

เหตุใดจึงต้องใช้ Socket.IO

การติดตั้งไคลเอนต์

npm install socket.io-client

การสร้างอินสแตนซ์ซ็อกเก็ต

// src/lib/socket.ts
import { io } from 'socket.io-client';

export const socket = io('https://api.example.com', {
  autoConnect: false, // connect manually
  withCredentials: true,
});

การเชื่อมต่อใน useEffect

useEffect(() => {
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

การรับฟังเหตุการณ์

useEffect(() => {
  function onMessage(data) {
    setMessages(prev => [...prev, data]);
  }

  socket.on('message', onMessage);

  return () => {
    socket.off('message', onMessage);
  };
}, []);

การส่งเหตุการณ์

function sendMessage(text) {
  socket.emit('message', { text, timestamp: Date.now() }, (ack) => {
    console.log('Server acknowledged:', ack);
  });
}

ฮุก useSocket กำหนดเอง

function useSocket(event, handler) {
  useEffect(() => {
    socket.on(event, handler);
    return () => socket.off(event, handler);
  }, [event, handler]);
}

// Usage:
useSocket('message', (data) => setMessages(m => [...m, data]));

ห้องและเนมสเปซ

// Join a room
socket.emit('join-room', 'room-123');

// Connect to a namespace
const chatSocket = io('https://api.example.com/chat');

สถานะการเชื่อมต่อ

const [isConnected, setIsConnected] = useState(socket.connected);

useEffect(() => {
  socket.on('connect', () => setIsConnected(true));
  socket.on('disconnect', () => setIsConnected(false));
  return () => {
    socket.off('connect');
    socket.off('disconnect');
  };
}, []);

การส่งแบบไม่รับประกัน

// Position updates — OK to lose some
function onMouseMove(e) {
  socket.volatile.emit('cursor', { x: e.clientX, y: e.clientY });
}

Socket.IO กับ WebSocket โดยตรง

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน