minhas informações de contato
Correspondência[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
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.
Ao usar o front-end, você pode passar diretamentenew WebSocket
usar, 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-client
operar
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:
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.
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.
Manipulação de erros:
socket.io-client
Fornece um mecanismo de tratamento de erros mais completo para melhor relatar e tratar erros de rede.
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.
Primeiro, você precisa instalar socket.io-client
. Execute o seguinte comando no diretório do seu projeto:
npm install socket.io-client
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';
Ou, se estiver usando módulos CommonJS, você pode fazer isto:
const io = require('socket.io-client');
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");
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);
});
você pode usar emit
Os métodos enviam eventos e dados para o servidor.
socket.emit('chat message', { message: 'Hello from the client!' });
Uma conexão Socket pode ser fechada explicitamente quando a conexão não for mais necessária:
socket.disconnect();
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();