Łączymy się z serwerem websocket za pomocą biblioteki ws

Aby użyć biblioteki ws (WebSockets) w aplikacji React, należy najpierw zainstalować ją za pomocą npm install ws. 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 WebSocket from 'ws';
 
const socket = new WebSocket('ws://localhost:3000');
 
const App = () => {
  const [message, setMessage] = useState('');
 
  useEffect(() => {
    socket.onopen = () => {
      console.log('Connected to WebSocket');
    };
 
    socket.onmessage = (event) => {
      setMessage(event.data);
    };
 
    return () => {
      socket.close();
    };
  }, []);
 
  return (
    <div>
      <p>{message}</p>
    </div>
  );
};
 
export default App;

W powyższym przykładzie połączenie z serwerem jest nawiązywane za pomocą new WebSocket('ws://localhost:3000') i nasłuchuje na wydarzenia onopen i onmessage, aktualizując stan aplikacji.

 

Kategorie