6.1 Podstawowe pojęcia WebSocket
WebSocket — to protokół komunikacji, który zapewnia pełny dwukierunkowy kanał komunikacji przez jedno połączenie TCP. Pozwala na dwustronną transmisję danych między klientem a serwerem, co czyni go idealnym do aplikacji wymagających ciągłej wymiany danych w czasie rzeczywistym, takich jak czaty, gry online i systemy powiadomień.
Zalety WebSocket
- Dwukierunkowa komunikacja: WebSocket zapewnia dwustronną transmisję danych, pozwalając serwerowi i klientowi na wysyłanie wiadomości do siebie w dowolnym momencie.
- Mniejsza latencja: w porównaniu do tradycyjnych zapytań HTTP, WebSocket redukuje opóźnienia dzięki stałemu połączeniu.
- Mniejsze obciążenie serwera: WebSocket redukuje liczbę zapytań HTTP, co zmniejsza obciążenie serwera.
Podstawowe komponenty WebSocket
- Serwer WebSocket: część serwerowa, która przyjmuje i przetwarza połączenia WebSocket.
- Klient WebSocket: część kliencka, która ustanawia połączenie z serwerem WebSocket i wymienia się danymi.
6.2 Praca z WebSocket w JavaScript
Praca z WebSocket w JavaScript odbywa się za pomocą obiektu WebSocket, który oferuje metody do ustanawiania połączenia, wysyłania i odbierania wiadomości, a także obsługi zdarzeń.
Tworzenie połączenia WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
Zdarzenia WebSocket:
open: uruchamia się, gdy połączenie jest nawiązane.message: uruchamia się, gdy otrzymano wiadomość od serwera.error: uruchamia się w przypadku wystąpienia błędu.close: uruchamia się przy zamknięciu połączenia.
Przykład użycia WebSocket:
JavaScript
const socket = new WebSocket('ws://server.example.com/chat');
socket.addEventListener('open', (event) => {
console.log('Connected to the WebSocket server');
socket.send('Hello Server!');
});
socket.addEventListener('message', (event) => {
console.log('Message from server:', event.data);
});
socket.addEventListener('error', (event) => {
console.error('WebSocket error:', event);
});
socket.addEventListener('close', (event) => {
console.log('Disconnected from WebSocket server');
});
6.3 Przykład serwera WebSocket na Node.js
Aby utworzyć serwer WebSocket, można użyć biblioteki ws w Node.js.
Instalacja biblioteki:
Terminal
npm install ws
Przykład serwera WebSocket:
JavaScript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send(`Server says: ${message}`);
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
console.log('WebSocket server is running on ws://localhost:8080');
6.4 Podstawowe zdarzenia i metody WebSocket
Zdarzenia klienckie:
onopen: uruchamia się, gdy połączenie WebSocket jest nawiązaneonmessage: uruchamia się, gdy otrzymano wiadomość od serweraonclose: uruchamia się, gdy połączenie WebSocket jest zamknięteonerror: uruchamia się w przypadku błędu WebSocket
Metody klienckie
send(data): wysyła dane do serweraclose(code, reason): zamyka połączenie WebSocket z podanym kodem i powodem
Zdarzenia serwerowe
connection: uruchamia się, gdy klient łączy się z serweremmessage: uruchamia się, gdy serwer otrzymuje wiadomość od klientaclose: uruchamia się, gdy połączenie WebSocket jest zamknięteerror: uruchamia się w przypadku błędu WebSocket
Metody serwerowe
send(data): wysyła dane do klientaclose(code, reason): zamyka połączenie WebSocket z podanym kodem i powodem
6.5 Przykłady użycia WebSocket
Przykład: Czat w czasie rzeczywistym
Strona kliencka:
HTML
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Enter your message" />
<button onclick="sendMessage()">Send</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
const chat = document.getElementById('chat');
socket.onopen = function() {
console.log('WebSocket is open now.');
};
socket.onmessage = function(event) {
const message = document.createElement('p');
message.textContent = event.data;
chat.appendChild(message);
};
socket.onclose = function() {
console.log('WebSocket is closed now.');
};
socket.onerror = function(event) {
console.error('WebSocket error observed:', event);
};
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
Strona serwerowa:
JavaScript
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('connection', (ws) => {
console.log('New client connected!');
ws.on('message', (message) => {
console.log('Received:', message);
// Rozsyłanie wiadomości do wszystkich podłączonych klientów
server.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
ws.on('error', (error) => {
console.error('WebSocket error:', error);
});
});
console.log('WebSocket server is running on ws://localhost:8080');
GO TO FULL VERSION