La comunicazione in tempo reale si conferma parte essenziale di molte applicazioni web - che si tratti di chat in tempo reale, aggiornamenti live su dati o giochi multiplayer online, la capacità di fornire informazioni istantanee agli utenti è fondamentale. In questo ambito, una delle tecnologie più utilizzate e potenti per abilitare la comunicazione in tempo reale è WebSocket.
Vediamo ora come implementare WebSocket con React così da creare una comunicazione in tempo reale all’interno delle web app.
Cosa sono i WebSocket?
I WebSocket sono un protocollo di comunicazione full-duplex basato su TCP che consente la comunicazione bidirezionale in tempo reale tra un server e un client. A differenza del protocollo HTTP tradizionale, in cui il client deve fare una richiesta al server per ottenere dati, i WebSocket permettono una comunicazione istantanea in cui sia il server che il client possono inviare messaggi quando necessario, senza dover attendere una richiesta.
I WebSocket sono ideali per situazioni in cui è necessario un flusso costante di dati in entrambe le direzioni, come chat in tempo reale, aggiornamenti live su dati o giochi multiplayer.
Implementazione di un server WebSocket
Per prima cosa, risulta necessaria la configurazione del server WebSocket. In questo articolo, useremo Node.js e il framework `ws` per creare un server WebSocket semplice ma efficace.
Installazione delle dipendenze
Creiamo una directory per il nostro progetto e quindi eseguiamo il seguente comando per inizializzare un progetto Node.js e installare il modulo 'ws':
1
mkdir websocket-react-example1
cd websocket-react-example1
npm init -y1
npm install wsOra, creiamo il nostro server WebSocket utilizzando Node.js e il modulo `ws`. Crea un file chiamato `server.js` nella directory del progetto e aggiungi il seguente codice:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (socket) => {
console.log('Client connected');
socket.on('message', (message) => {
console.log('Received: $ {message}');
// Ecco dove gestire i messaggi inviati dai client e inviare risposte
socket.send('You said: $ {message}');
});
socket.on('close', () => {
console.log('Client disconnected');
});
});
Questo codice crea un server WebSocket che ascolta sulla porta 8080 e gestisce le connessioni dei client. Quando un client si connette, viene registrato un gestore per i messaggi in arrivo e le chiusure della connessione.
Avvio del server WebSocket
Per avviare il server WebSocket, esegui il seguente comando nella directory del progetto:
1
node server.jsIl tuo server WebSocket ora è in esecuzione e pronto per accettare connessioni dai client!
Creazione di un'app React con WebSocket
Ora che abbiamo un server WebSocket in esecuzione, possiamo creare un'app React che lo utilizzi per la comunicazione in tempo reale. Iniziamo creando un nuovo progetto React utilizzando Create React App.
Esegui il seguente comando per creare un nuovo progetto React:
1
2
npx create-react-app websocket-react-app
cd websocket-react-appPer utilizzare WebSocket nell'app React, è necessario installare la libreria `websocket` utilizzando npm o yarn:
1
npm install websocketPer utilizzare WebSocket nell'app React, è necessario installare la libreria `websocket` utilizzando npm o yarn:
1
npm install websocketOra che abbiamo configurato il server WebSocket e creato il progetto React, possiamo procedere con l'implementazione del client WebSocket. Creeremo un componente React chiamato `WebSocketChat` che consentirà agli utenti di inviare messaggi al server e ricevere le risposte in tempo reale.
Iniziamo creando il nostro componente `WebSocketChat.js` nella directory `src`:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React, { useState, useEffect } from 'react';
function WebSocketChat() {
const [message, setMessage] = useState('');
const [receivedMessage, setReceivedMessage] = useState('');
const [socket, setSocket] = useState(null);
useEffect(() => {
// Connessione al server WebSocket quando il componente si monta
const newSocket = new WebSocket('ws://localhost:8080');
newSocket.onopen = () => {
console.log('Connected to WebSocket server');
};
newSocket.onmessage = (event) => {
const received = event.data;
setReceivedMessage(received);
};
setSocket(newSocket);
// Chiudi la connessione WebSocket quando il componente si smonta
return () => {
newSocket.close();
};
}, []);
const sendMessage = () => {
if (socket && message) {
socket.send(message);
setMessage('');
}
};
return (
<div>
<h1>WebSocket Chat</h1>
<div>
<input
type="text"
placeholder="Type your message..."
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendMessage}>Send</button>
</div>
<div>
<p>Received message: {receivedMessage}</p>
</div>
</div>
);
}
export default WebSocketChat;
In questo componente, creiamo una connessione WebSocket quando il componente si monta e la chiudiamo quando il componente si smonta. Quando l'utente invia un messaggio, lo inviamo al server WebSocket utilizzando il metodo `send`. I messaggi ricevuti dal server vengono visualizzati nella parte inferiore del componente.
Utilizzo del componente WebSocketChat
Ora possiamo utilizzare il componente `WebSocketChat` nell'app React principale. Modificando il file `src/App.js` come segue:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import './App.css';
import WebSocketChat from './WebSocketChat';
function App() {
return (
<div className="App">
<WebSocketChat />
</div>
);
}
export default App;
Ora è possibile avviare l'app React eseguendo il seguente comando nella directory del progetto:
1
npm startL'app verrà avviata e puoi aprire il tuo browser per testare la chat WebSocket in tempo reale.
Si tratta di una tecnologia potente che può essere utilizzata per una vasta gamma di applicazioni, dalla chat in tempo reale ai giochi multiplayer e agli aggiornamenti live su dati. Utilizzando WebSocket in combinazione con React, è possibile creare esperienze utente altamente interattive e dinamiche!
Hai bisogno di implementare una Real Time Communication all'interno della tua app? Siamo a disposizione per fornirti una consulenza e affiancarti nello sviluppo React.
Buon coding!
