การเชื่อมต่อ Socket.io ฝั่งไคลเอนต์

Socket.io เพิ่มอะไรจาก WebSocket แบบพื้นฐาน

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

npm install socket.io-client

การเชื่อมต่อ

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

const socket = io('https://api.example.com', {
  transports: ['websocket'], // skip polling fallback for speed
  auth: { token: localStorage.getItem('jwt') }
});

socket.on('connect', () => console.log('connected', socket.id));

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

socket.emit('chat-message', {
  room: 'general',
  text: 'Hello everyone!'
});

socket.emit('typing', { user: 'Alice' });

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

socket.on('chat-message', (msg) => {
  console.log(`${msg.user}: ${msg.text}`);
  appendMessage(msg);
});

socket.on('user-joined', (user) => {
  console.log(`${user.name} joined`);
});

การยืนยันการรับข้อความ (ฟังก์ชันเรียกกลับ Ack)

socket.emit('create-post', { title: 'Hello' }, (response) => {
  if (response.error) {
    console.error(response.error);
  } else {
    console.log('Created post', response.id);
  }
});

emitWithAck ที่ทำงานด้วย Promise

try {
  const response = await socket.emitWithAck('create-post', { title: 'Hello' });
  console.log('Created', response.id);
} catch (err) {
  console.error('Failed', err);
}

ห้อง

// Client:
socket.emit('join-room', { roomId: 'general' });

// Listen to messages in any room you've joined:
socket.on('room-message', ({ room, message }) => {
  if (room === activeRoom) appendMessage(message);
});

// Leave:
socket.emit('leave-room', { roomId: 'general' });

เนมสเปซ

const chatSocket = io('https://api/chat');
const adminSocket = io('https://api/admin');

มีการเชื่อมต่อใหม่ในตัว

const socket = io({
  reconnection: true,
  reconnectionAttempts: Infinity,
  reconnectionDelay: 1000,
  reconnectionDelayMax: 30000,
  randomizationFactor: 0.5
});

socket.on('reconnect', (attempt) => console.log('reconnected after', attempt));
socket.on('reconnect_attempt', (attempt) => console.log('trying...', attempt));

การจัดการเมื่อถูกตัดการเชื่อมต่อ

socket.on('disconnect', (reason) => {
  console.log('Disconnected:', reason);
  if (reason === 'io server disconnect') {
    // Server kicked us — must reconnect manually
    socket.connect();
  }
});

การผสานรวมกับ React

// useSocket.ts
import { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';

let socket: Socket;

export function useSocket() {
  const [connected, setConnected] = useState(false);
  useEffect(() => {
    if (!socket) socket = io('/');
    socket.on('connect', () => setConnected(true));
    socket.on('disconnect', () => setConnected(false));
    return () => { /* keep socket alive across remounts */ };
  }, []);
  return { socket, connected };
}

ควรใช้ Socket.io หรือ WebSocket แบบพื้นฐานเมื่อใด

ตรวจสอบความเข้าใจ

สรุป: ไคลเอ็นต์ Socket.io