Compartilhamento de tecnologia

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

Soquete da Web

WebSocket é um protocolo de comunicação de rede que fornece um canal para comunicação full-duplex em uma única conexão TCP persistente de longo prazo.

O WebSocket permite a troca bidirecional de dados entre o cliente e o servidor, o que significa que o servidor pode enviar dados ativamente para o cliente sem ter que esperar pela solicitação do cliente. Depois que a conexão WebSocket é estabelecida, tanto o cliente quanto o servidor podem enviar dados a qualquer momento, o que melhora muito o tempo real e a interatividade.

socket.io-client

Ao usar o front-end, você pode passar diretamentenew WebSocketusar, mas use o nativoWebSocket As funções fornecidas são relativamente simples e você mesmo precisa resolver alguns problemas.Isto está disponível usandosocket.io-clientoperar

socket.io-client Comparado com a API WebSocket nativa, ele oferece recursos mais avançados e compatibilidade mais ampla, o que o torna uma escolha melhor em muitos casos.A seguirsocket.io-client Algumas das principais vantagens:

1. compatibilidade:
   socket.io-client Recorra automaticamente a outros métodos de transmissão em navegadores que não suportam WebSocket, como long-polling, Flash Sockets, etc., garantindo que funcionem em quase todos os navegadores modernos e em alguns navegadores mais antigos.

2. Reconectar automaticamente:
   Quando a conexão de rede é interrompida ou o servidor reinicia,socket.io-client A reconexão pode ser tentada automaticamente, enquanto o WebSocket nativo requer manipulação manual da lógica de reconexão.

3. Manipulação de erros:
   socket.io-client Fornece um mecanismo de tratamento de erros mais completo para melhor relatar e tratar erros de rede.

Uso básico

socket.io-client É uma biblioteca para comunicação com um servidor Socket.IO no cliente (geralmente um navegador ou um aplicativo Node.js). Ele fornece uma API poderosa que pode lidar com comunicação bidirecional em tempo real, incluindo reconexão automática, detecção de pulsação, tratamento de erros e outras funções.

Instalar

Primeiro, você precisa instalar socket.io-client . Execute o seguinte comando no diretório do seu projeto:

npm install socket.io-client
1

Módulo de importação

No seu arquivo JavaScript, você pode usar o método de importação do módulo ES6 para introduzir socket.io-client：

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

Ou, se estiver usando módulos CommonJS, você pode fazer isto:

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

Criar instância de soquete

A criação de uma instância de Socket geralmente requer a passagem da URL do servidor. Pode ser um caminho relativo (para o mesmo nome de domínio) ou um URL completo (para conexões entre domínios). Por exemplo:

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

Ouça eventos

Depois de criar uma instância de Socket, você pode ouvir vários eventos, como alterações no status da conexão, recebimento de mensagens, 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 dados

você pode usar emit Os métodos enviam eventos e dados para o servidor.

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

desconectar

Uma conexão Socket pode ser fechada explicitamente quando a conexão não for mais necessária:

socket.disconnect();
1

Exemplo completo

Aqui está um exemplo completo mostrando como usá-lo no lado do 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