WebSocket, socket.io-client

2024-07-12

WebSocket

WebSocket ist ein Netzwerkkommunikationsprotokoll, das einen Kanal für die Vollduplex-Kommunikation über eine einzige, langfristig persistente TCP-Verbindung bereitstellt.

WebSocket ermöglicht den bidirektionalen Datenaustausch zwischen Client und Server, was bedeutet, dass der Server Daten aktiv an den Client pushen kann, ohne auf die Anfrage des Clients warten zu müssen. Nachdem die WebSocket-Verbindung hergestellt wurde, können sowohl der Client als auch der Server jederzeit Daten senden, was die Echtzeit und Interaktivität erheblich verbessert.

socket.io-client

Wenn Sie das Frontend verwenden, können Sie direkt passierennew WebSocketzu verwenden, aber verwenden Sie nativeWebSocket Die bereitgestellten Funktionen sind relativ einfach und Sie müssen einige Probleme selbst lösen.Dies ist verfügbar übersocket.io-clientzu bedienen

socket.io-client Im Vergleich zur nativen WebSocket-API bietet es umfangreichere Funktionen und eine größere Kompatibilität, was es in vielen Fällen zur besseren Wahl macht.Das Folgende istsocket.io-client Einige der Hauptvorteile:

Kompatibilität:
socket.io-client Greifen Sie in Browsern, die WebSocket nicht unterstützen, automatisch auf andere Übertragungsmethoden zurück, z. B. Long-Polling, Flash Sockets usw., um sicherzustellen, dass sie in fast allen modernen Browsern und einigen älteren Browsern funktionieren.
Automatisch wieder verbinden:
Wenn die Netzwerkverbindung unterbrochen wird oder der Server neu startet,socket.io-client Eine erneute Verbindung kann automatisch versucht werden, während natives WebSocket eine manuelle Handhabung der Wiederverbindungslogik erfordert.
Fehlerbehandlung:
socket.io-client Bietet einen umfassenderen Mechanismus zur Fehlerbehandlung, um Netzwerkfehler besser zu melden und zu behandeln.

Grundlegende Verwendung

socket.io-client Ist eine Bibliothek für die Kommunikation mit einem Socket.IO-Server auf dem Client (normalerweise ein Browser oder eine Node.js-Anwendung). Es bietet eine leistungsstarke API, die die bidirektionale Kommunikation in Echtzeit verarbeiten kann, einschließlich automatischer Wiederverbindung, Heartbeat-Erkennung, Fehlerbehandlung und anderen Funktionen.

Installieren

Zuerst müssen Sie installieren socket.io-client . Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:

npm install socket.io-client
1

Modul importieren

In Ihrer JavaScript-Datei können Sie zur Einführung die ES6-Modulimportmethode verwenden socket.io-client：

import { io } from 'socket.io-client';
1

Wenn Sie CommonJS-Module verwenden, können Sie auch Folgendes tun:

const io = require('socket.io-client');
1

Erstellen Sie eine Socket-Instanz

Das Erstellen einer Socket-Instanz erfordert normalerweise die Übergabe der URL des Servers. Dies kann ein relativer Pfad (für denselben Domänennamen) oder eine vollständige URL (für domänenübergreifende Verbindungen) sein. Zum Beispiel:

const socket = io('http://localhost:3000');
const socket = io('https://yourdomain.com');
const socket = io("wss://server-domain.com");
1
2
3

Hören Sie auf Ereignisse

Sobald Sie eine Socket-Instanz erstellt haben, können Sie verschiedene Ereignisse überwachen, z. B. Änderungen des Verbindungsstatus, den Empfang von Nachrichten usw.

socket.on('connect', () => {
  console.log('Connected to server');
});

socket.on('disconnect', (reason) => {
  console.log('Disconnected from server', reason);
});

socket.on('message', (data) => {
  console.log('Received message from server', data);
});
1
2
3
4
5
6
7
8
9
10
11

Daten senden

Sie können verwenden emit Methoden senden Ereignisse und Daten an den Server.

socket.emit('chat message', { message: 'Hello from the client!' });
1

Trennen

Eine Socket-Verbindung kann explizit geschlossen werden, wenn die Verbindung nicht mehr benötigt wird:

socket.disconnect();
1

Vollständiges Beispiel

Hier ist ein vollständiges Beispiel, das zeigt, wie es auf der Clientseite verwendet wird socket.io-client：

import { io } from 'socket.io-client';

// 创建 Socket 实例
const socket = io('http://localhost:3000');

// 监听连接事件
socket.on('connect', () => {
  console.log('Connected to server');
});

// 监听接收消息事件
socket.on('message', (data) => {
  console.log('Received message from server', data);
});

// 发送消息到服务器
socket.emit('chat message', { message: 'Hello from the client!' });

// 当组件销毁时，关闭 Socket 连接
// 如果你是在 Vue 或 React 的生命周期钩子中使用，确保在这里调用 disconnect
// 或者使用适当的事件来触发断开连接
// socket.disconnect();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Technologieaustausch