Compartir tecnología

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

WebSocket

WebSocket es un protocolo de comunicación de red que proporciona un canal para comunicación full-duplex a través de una única conexión TCP persistente a largo plazo.

WebSocket permite el intercambio de datos bidireccional entre el cliente y el servidor, lo que significa que el servidor puede enviar datos activamente al cliente sin tener que esperar la solicitud del cliente. Una vez establecida la conexión WebSocket, tanto el cliente como el servidor pueden enviar datos en cualquier momento, lo que mejora enormemente el tiempo real y la interactividad.

Cliente socket.io

Cuando utilice la interfaz, puede pasar directamentenew WebSocketusar, pero usar nativoWebSocket Las funciones proporcionadas son relativamente simples y algunos problemas deben solucionarse usted mismo.Esto está disponible usandosocket.io-clientpara operar

socket.io-client En comparación con la API WebSocket nativa, proporciona funciones más completas y una compatibilidad más amplia, lo que la convierte en una mejor opción en muchos casos.Lo siguiente essocket.io-client Algunas de las principales ventajas:

1. compatibilidad:
   socket.io-client Recurra automáticamente a otros métodos de transmisión en navegadores que no admiten WebSocket, como sondeo prolongado, Flash Sockets, etc., para garantizar que funcionen en casi todos los navegadores modernos y en algunos navegadores más antiguos.

2. Reconectarse automáticamente:
   Cuando la conexión de red se interrumpe o el servidor se reinicia,socket.io-client La reconexión se puede intentar automáticamente, mientras que WebSocket nativo requiere el manejo manual de la lógica de reconexión.

3. Manejo de errores:
   socket.io-client Proporciona un mecanismo de manejo de errores más completo para informar y manejar mejor los errores de red.

Uso básico

socket.io-client Es una biblioteca para comunicarse con un servidor Socket.IO en el cliente (generalmente un navegador o una aplicación Node.js). Proporciona una API potente que puede manejar la comunicación bidireccional en tiempo real, incluida la reconexión automática, la detección de latidos, el manejo de errores y otras funciones.

Instalar

Primero, necesitas instalar socket.io-client . Ejecute el siguiente comando en el directorio de su proyecto:

npm install socket.io-client
1

Módulo de importación

En su archivo JavaScript, puede utilizar el método de importación del módulo ES6 para introducir socket.io-client：

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

O, si está utilizando módulos CommonJS, puede hacer esto:

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

Crear instancia de socket

Para crear una instancia de Socket generalmente es necesario pasar la URL del servidor. Puede ser una ruta relativa (para el mismo nombre de dominio) o una URL completa (para conexiones entre dominios). Por ejemplo:

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

Escuche eventos

Una vez que crea una instancia de Socket, puede escuchar varios eventos, como cambios de estado de conexión, recepción de mensajes, 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

enviar datos

puedes usar emit Los métodos envían eventos y datos al servidor.

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

Desconectar

Una conexión Socket se puede cerrar explícitamente cuando la conexión ya no es necesaria:

socket.disconnect();
1

Ejemplo completo

Aquí hay un ejemplo completo que muestra cómo usarlo en el lado del cliente. 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