Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

WebSocket

WebSocket est un protocole de communication réseau qui fournit un canal pour la communication en duplex intégral sur une seule connexion TCP persistante à long terme.

WebSocket permet un échange de données bidirectionnel entre le client et le serveur, ce qui signifie que le serveur peut activement transmettre des données au client sans avoir à attendre la demande du client. Une fois la connexion WebSocket établie, le client et le serveur peuvent envoyer des données à tout moment, ce qui améliore considérablement le temps réel et l'interactivité.

socket.io-client

Lorsque vous utilisez le frontal, vous pouvez passer directementnew WebSocketà utiliser, mais utilisez natifWebSocket Les fonctions fournies sont relativement simples et vous devez résoudre vous-même certains problèmes.Ceci est disponible en utilisantsocket.io-clientopérer

socket.io-client Par rapport à l'API WebSocket native, elle offre des fonctionnalités plus riches et une compatibilité plus large, ce qui en fait un meilleur choix dans de nombreux cas.Ce qui suit estsocket.io-client Quelques-uns des principaux avantages :

1. compatibilité:
   socket.io-client Revenir automatiquement à d'autres méthodes de transmission dans les navigateurs qui ne prennent pas en charge WebSocket, telles que les interrogations longues, Flash Sockets, etc., garantissant qu'elles fonctionnent dans presque tous les navigateurs modernes et certains navigateurs plus anciens.

2. Se reconnecter automatiquement:
   Lorsque la connexion réseau est interrompue ou que le serveur redémarre,socket.io-client La reconnexion peut être tentée automatiquement, tandis que WebSocket natif nécessite une gestion manuelle de la logique de reconnexion.

3. La gestion des erreurs:
   socket.io-client Fournit un mécanisme de gestion des erreurs plus complet pour mieux signaler et gérer les erreurs réseau.

Utilisation de base

socket.io-client Est une bibliothèque permettant de communiquer avec un serveur Socket.IO sur le client (généralement un navigateur ou une application Node.js). Il fournit une API puissante capable de gérer la communication bidirectionnelle en temps réel, notamment la reconnexion automatique, la détection du rythme cardiaque, la gestion des erreurs et d'autres fonctions.

Installer

Tout d'abord, vous devez installer socket.io-client . Exécutez la commande suivante dans le répertoire de votre projet :

npm install socket.io-client
1

Module d'importation

Dans votre fichier JavaScript, vous pouvez utiliser la méthode d'importation du module ES6 pour introduire socket.io-client：

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

Ou, si vous utilisez des modules CommonJS, vous pouvez faire ceci :

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

Créer une instance de socket

La création d'une instance Socket nécessite généralement de transmettre l'URL du serveur. Il peut s'agir d'un chemin relatif (pour le même nom de domaine) ou d'une URL complète (pour les connexions entre domaines). Par exemple:

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

Écoutez les événements

Une fois que vous avez créé une instance Socket, vous pouvez écouter divers événements, tels que les changements d'état de connexion, la réception de messages, etc.

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

envoyer des données

vous pouvez utiliser emit Les méthodes envoient des événements et des données au serveur.

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

Déconnecter

Une connexion Socket peut être fermée explicitement lorsque la connexion n'est plus nécessaire :

socket.disconnect();
1

Exemple complet

Voici un exemple complet montrant comment l'utiliser côté client 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