javascript - 从 useEffect 连接 socket.io

Question

我想连接我的socket连接useEffectcomponentDidMount

const Chat = () => {
  const [user, setUser] = useState('');
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [isConnected, setIsConnected] = useState(false);

  const socketRef = useRef(
    io('http://localhost:3002', {
      query: { token }
    })
  );

  useEffect(() => {
    socketRef.current.on('connected', msg => {
      console.log('connected');
      setUser(msg.user);
      setIsConnected(true);
      socketRef.current.on('message', message => {
        setMessages(messages => [...messages, message]);
      });
    });
  }, []);

  const inputChangeHandler = e => setInput(e.target.value);

  const sendMessage = () => {
    socketRef.current.emit('newMessage', `${user}: ${input}`);
    socketRef.current.on('messages', newMessages => setMessages(newMessages));
    setInput('');
  };

  if (!isConnected) {
    return <h1>Waiting for connection...</h1>;
  }
  return (
    <div className={cx('chat-container')}>
      <div className={cx('messages-container')}>
        <div className={cx('message-container')}>Greetings {user}!!!</div>
        {messages.map((message, index) => (
          <div className={cx('message-container')} key={index}>
            {message}
          </div>
        ))}
      </div>
      <div className={cx('inputs-container')}>
        <input
          className={cx('input')}
          value={input}
          onChange={e => inputChangeHandler(e)}
        />
        <button className={cx('send-button')} onClick={sendMessage}>
          Send
        </button>
      </div>
    </div>
  );
};

export default Chat;

它应该显示“Waiting for connection...”，然后当我的代码到达时useEffect它应该连​​接，然后用内容重新渲染我的组件，但我应该在每次运行 react 时手动刷新页面服务器。刷新后我的代码完全按照我的设想工作。

它似乎没有及时收到事件。

标签： javascriptreactjsasynchronoussocket.ioreact-hooks