Łączymy się z serwerem websocket za pomocą biblioteki socket.io-client

Aby użyć websocket w aplikacji React, należy najpierw zainstalować bibliotekę websocket, np. socket.io-client. Następnie, w komponencie React, można połączyć się z serwerem websocket i nasłuchiwać na wydarzenia.

Przykład:

				
					import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';
 
const socket = io('http://localhost:3000');
 
const App = () => {
  const [message, setMessage] = useState('');
 
  useEffect(() => {
    socket.on('message', (data) => {
      setMessage(data);
    });
 
    return () => {
      socket.disconnect();
    };
  }, []);
 
  return (
    <div>
      <p>{message}</p>
    </div>
  );
};
 
export default App;

W powyższym przykładzie połączenie z serwerem jest nawiązywane za pomocą io('http://localhost:3000') i nasłuchuje na wydarzenie o nazwie message, aktualizując stan aplikacji.

Kategorie