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 的一些主要优点：
-
兼容性:
socket.io-client在不支持 WebSocket 的浏览器中自动回退到其他传输方式，如长轮询（long-polling）、Flash Sockets 等，确保在几乎所有现代浏览器和一些旧版浏览器中都能工作。 -
自动重连:
当网络连接中断或服务器重启时，socket.io-client可以自动尝试重新连接，而原生 WebSocket 需要手动处理重连逻辑。 -
错误处理:
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();