在react中使用socket.io

星光不问赶路人2025-02-27 18:38

客户端初始化

ts 复制代码

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

export const socket = io('ws://localhost:3001', {
  autoConnect: false,
  // transports: ['websocket'],
  auth: (cb: (token: object) => void) => {
    cb({ token: localStorage.getItem('token') });
  },
});

参数介绍

autoConnect默认为true。客户端立即打开与服务器的连接。设置false后，需要手动维护ws连接。
auth 携带鉴权信息。服务端获取方式：client.handshake?.auth?.token

演示代码

ts 复制代码

  useEffect(() => {
    const onConnect = () => {
      console.log('connected');
      socket.volatile.emit('joinRoom', {
        chatroomId: chatroomId,
      });
    };

    const onConnectError = (err: any) => {
      console.log('error', err);
    };

    const onDisconnect = (reason: Socket.DisconnectReason) => {
      console.log('disconnect', reason);
    };

    socket.on('connect', onConnect);
    socket.on('connect_error', onConnectError);
    socket.on('disconnect', onDisconnect);
    socket.connect();
    return () => {
      socket.off('connect', onConnect);
      socket.off('connect_error', onConnectError);
      socket.off('disconnect', onDisconnect);
      socket.disconnect();
    };
  }, [chatroomId]);

参考

How to use with React