6.1 Concetti di base di WebSocket
WebSocket — è un protocollo di comunicazione che fornisce un canale di comunicazione full-duplex su una singola connessione TCP. Permette di effettuare trasmissione dati bidirezionale tra client e server, il che lo rende ideale per applicazioni che richiedono uno scambio di dati continuo in tempo reale, come chat, giochi online e sistemi di notifiche.
Vantaggi di WebSocket
- Comunicazione bidirezionale: WebSocket fornisce trasmissione dati bidirezionale, permettendo al server e al client di inviare messaggi tra loro in qualsiasi momento.
- Minore latenza: rispetto alle tradizionali richieste HTTP, WebSocket riduce la latenza grazie alla connessione persistente.
- Minore carico sul server: WebSocket riduce il numero di richieste HTTP, diminuendo così il carico sul server.
Componenti principali di WebSocket
- Server WebSocket: la parte server che accetta e gestisce le connessioni WebSocket.
- Client WebSocket: la parte client che stabilisce la connessione con il server WebSocket e scambia dati.
6.2 Lavorare con WebSocket in JavaScript
Lavorare con WebSocket in JavaScript avviene tramite l'oggetto WebSocket, che fornisce metodi per stabilire connessioni, inviare e ricevere messaggi, e gestire eventi.
Creazione di una connessione WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
Eventi WebSocket:
open: si attiva quando la connessione è stabilita.message: si attiva quando un messaggio è ricevuto dal server.error: si attiva in caso di errore.close: si attiva alla chiusura della connessione.
Esempio di utilizzo di WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('Connesso al server WebSocket');
socket.send('Hello Server!');
});
socket.addEventListener('message', (event) => {
console.log('Messaggio dal server:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('Errore WebSocket:', event);
});
socket.addEventListener('close', (event) => {
console.log('Disconnesso dal server WebSocket');
});
6.3 Esempio di server WebSocket su Node.js
Per creare un server WebSocket puoi usare la libreria ws in Node.js.
Installazione della libreria:
Terminal
npm install ws
Esempio di server WebSocket:
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('Nuovo client connesso');
ws.on('message', (message) => {
console.log('Ricevuto:', message);
ws.send(`Il server dice: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnesso');
});
});
console.log('Il server WebSocket è in esecuzione su ws://localhost:8080');
6.4 Eventi e metodi principali di WebSocket
Eventi lato client:
onopen: si attiva quando la connessione WebSocket è stabilitaonmessage: si attiva quando un messaggio è ricevuto dal serveronclose: si attiva quando la connessione WebSocket è chiusaonerror: si attiva in caso di errore WebSocket
Metodi lato client
send(data): invia dati al serverclose(code, reason): chiude la connessione WebSocket con un codice e una ragione specificati
Eventi lato server
connection: si attiva quando un client si connette al servermessage: si attiva quando il server riceve un messaggio da un clientclose: si attiva quando la connessione WebSocket è chiusaerror: si attiva in caso di errore WebSocket
Metodi lato server
send(data): invia dati al clientclose(code, reason): chiude la connessione WebSocket con un codice e una ragione specificati
6.5 Esempi di utilizzo di WebSocket
Esempio: Chat in tempo reale
Parte client:
HTML
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Inserisci il tuo messaggio" />
<button onclick="sendMessage()">Invia</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket è ora aperto.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket è ora chiuso.');
};
socket.onerror = function(event) {
console.error('Osservato errore WebSocket:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
Parte server:
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('Nuovo client connesso!');
ws.on('message', (message) => {
console.log('Ricevuto:', message);
// Invia il messaggio a tutti i client connessi
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnesso');
});
ws.on('error', (error) => {
console.error('Errore WebSocket:', error);
});
});
console.log('Il server WebSocket è in esecuzione su ws://localhost:8080');
GO TO FULL VERSION