Обмен технологиями

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

Веб-сокет

WebSocket — это сетевой протокол связи, который обеспечивает канал для полнодуплексной связи через одно долгосрочное постоянное TCP-соединение.

WebSocket обеспечивает двунаправленный обмен данными между клиентом и сервером, что означает, что сервер может активно передавать данные клиенту, не дожидаясь запроса клиента. После установки соединения WebSocket и клиент, и сервер могут отправлять данные в любое время, что значительно улучшает работу в режиме реального времени и интерактивность.

socket.io-клиент

При использовании внешнего интерфейса вы можете напрямую передатьnew WebSocketиспользовать, но использовать роднойWebSocket Предоставленные функции относительно просты, и вам придется решать некоторые проблемы самостоятельно.Это доступно с помощьюsocket.io-clientдействовать

socket.io-client По сравнению с собственным API WebSocket он предоставляет более широкие возможности и более широкую совместимость, что во многих случаях делает его лучшим выбором.Ниже приводитсяsocket.io-client Некоторые из основных преимуществ:

1. совместимость:
   socket.io-client Автоматически возвращаться к другим методам передачи в браузерах, которые не поддерживают WebSocket, например к длинному опросу, Flash Sockets и т. д., гарантируя, что они работают практически во всех современных браузерах и в некоторых старых браузерах.

2. Автоматическое повторное подключение:
   Когда сетевое соединение прерывается или сервер перезагружается,socket.io-client Повторное подключение может быть предпринято автоматически, тогда как собственный WebSocket требует ручной обработки логики повторного подключения.

3. Обработка ошибок:
   socket.io-client Предоставляет более полный механизм обработки ошибок, позволяющий лучше сообщать и обрабатывать сетевые ошибки.

Основное использование

socket.io-client Это библиотека для связи с сервером Socket.IO на клиенте (обычно браузере или приложении Node.js). Он предоставляет мощный API, который может обрабатывать двустороннюю связь в реальном времени, включая автоматическое переподключение, обнаружение пульса, обработку ошибок и другие функции.

Установить

Во-первых, вам необходимо установить socket.io-client . Запустите следующую команду в каталоге вашего проекта:

npm install socket.io-client
1

Модуль импорта

В вашем файле JavaScript вы можете использовать метод импорта модуля ES6, чтобы представить socket.io-client：

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

Или, если вы используете модули CommonJS, вы можете сделать это:

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

Создать экземпляр сокета

Для создания экземпляра Socket обычно требуется передать URL-адрес сервера. Это может быть относительный путь (для того же доменного имени) или полный URL-адрес (для междоменных подключений). Например:

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

Слушайте события

Создав экземпляр Socket, вы можете прослушивать различные события, такие как изменение статуса соединения, получение сообщений и т. д.

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

отправить данные

вы можете использовать emit Методы отправляют события и данные на сервер.

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

Отключить

Соединение Socket можно закрыть явно, когда соединение больше не требуется:

socket.disconnect();
1

Полный пример

Вот полный пример, показывающий, как использовать его на стороне клиента. 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