WebSocket、socket.io-client

WebSocket

WebSocket 是一种网络通信协议，它提供了一个在单个长期持久的 TCP 连接上进行全双工（full-duplex）通信的通道。

WebSocket 允许客户端和服务器之间进行双向的数据交换，这意味着服务器可以主动向客户端推送数据，而不必等待客户端的请求。在 WebSocket 连接建立后，客户端和服务器都可以在任何时候发送数据，这大大提高了实时性和交互性。

socket.io-client

前端使用时可以直接通过new WebSocket来使用，但是使用原生的WebSocket提供的功能比较简单，需要自己处理一些问题。这是可以使用socket.io-client来进行操作

socket.io-client 与原生的 WebSocket API 相比，提供了更丰富的特性和更广泛的兼容性，这使得它在许多情况下成为更优的选择。以下是 socket.io-client 的一些主要优点：

1. 兼容性:
   socket.io-client 在不支持 WebSocket 的浏览器中自动回退到其他传输方式，如长轮询（long-polling）、Flash Sockets 等，确保在几乎所有现代浏览器和一些旧版浏览器中都能工作。

2. 自动重连:
   当网络连接中断或服务器重启时，socket.io-client 可以自动尝试重新连接，而原生 WebSocket 需要手动处理重连逻辑。

3. 错误处理:
   socket.io-client 提供了更完善的错误处理机制，可以更好地报告和处理网络错误。

基本使用

socket.io-client 是一个用于在客户端（通常是浏览器或Node.js应用）上与 Socket.IO 服务器进行通信的库。它提供了一个强大的 API，能够处理实时双向通信，包括自动重连、心跳检测、错误处理等功能。

安装

首先，你需要安装 socket.io-client。在你的项目目录中运行以下命令：

npm install socket.io-client

引入模块

在你的 JavaScript 文件中，可以使用 ES6 模块导入方式引入 socket.io-client：

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

或者，如果你使用的是 CommonJS 模块，可以这样：

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

创建 Socket 实例

创建一个 Socket 实例通常需要传入服务器的 URL。这可以是相对路径（对于同一域名），也可以是完整的 URL（对于跨域连接）。例如：

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

监听事件

一旦你创建了 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);
});

发送数据

你可以使用 emit 方法向服务器发送事件和数据。

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

断开连接

当不再需要连接时，可以显式地关闭 Socket 连接：

socket.disconnect();

完整示例

下面是一个完整的示例，展示如何在客户端使用 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();