WebSocket：
- 定义：WebSocket是一种在单个TCP连接上进行全双工通信的协议，实现了客户端与服务器之间的实时双向通信。
- 特点：基于HTTP协议，但通过握手升级为WebSocket协议，支持持久连接，减少延迟和带宽使用。
- 适用场景：需要实时双向通信的应用，如在线聊天、实时游戏、股票行情等。
Socket.IO：
- 定义：Socket.IO是一个基于WebSocket的库，但不仅限于WebSocket，还支持其他实时传输协议，如轮询。
- 特点：提供了一层抽象，自动选择最佳传输方式，支持事件驱动、房间、命名空间等高级功能。
- 适用场景：需要跨浏览器和设备兼容性，以及更高级实时功能的应用。
流式接口：
- 定义：流式接口通常指通过HTTP协议持续发送数据块，客户端可以逐步接收和处理数据。
- 特点：基于HTTP，支持服务器推送，但不如WebSocket高效，适用于单向数据流。
- 适用场景：需要服务器向客户端持续发送数据，但不需要双向通信的场景，如实时日志、视频流等。

在了解了这三个技术的基本概念后，我需要进一步分析它们之间的区别，以及在不同场景下如何选用。这包括：

协议基础：WebSocket是协议，Socket.IO是库，流式接口是数据传输方式。
连接方式：WebSocket是持久连接，流式接口是HTTP连接上的持续数据流。
双向通信：WebSocket和Socket.IO支持双向通信，流式接口通常单向。
兼容性：Socket.IO具有更好的跨浏览器和设备兼容性。
使用场景：根据实时性需求、双向通信需求、兼容性需求选择。

一、核心区别

特性	WebSocket	Socket.IO	流式接口（如SSE）
协议基础	独立协议（基于TCP）	封装层（支持WebSocket/轮询等）	HTTP协议扩展
连接方式	持久化双向连接	抽象层，自动降级（如长轮询）	短连接，持续HTTP响应流
双向通信	全双工（双向实时）	全双工（依赖底层传输）	通常单向（服务器→客户端）
兼容性	需浏览器/客户端原生支持	自动兼容旧浏览器（降级方案）	需浏览器支持EventSource API
数据格式	任意二进制/文本	任意数据（JSON优先）	纯文本（UTF-8）
典型场景	实时游戏、在线协作	跨平台聊天、实时数据同步	实时日志、股票行情推送
复杂度	★★☆（需手动处理心跳/重连）	★★★（开箱即用）	★☆☆（简单实现）

二、选用建议

选WebSocket
- 场景：需要低延迟双向通信，如在线游戏、实时协作编辑、金融交易。
- 优势：协议轻量、延迟最低、支持二进制传输。
- 注意：需处理浏览器兼容性（如IE需polyfill）。
选Socket.IO
- 场景：需要跨平台兼容性或高级功能（如房间、事件广播），且开发效率优先。
- 优势：自动降级（如长轮询）、开箱即用的房间/命名空间管理。
- 注意：增加依赖库体积，性能略低于原生WebSocket。
选流式接口（如SSE）
- 场景：只需服务器单向推送（如实时结果、日志、新闻更新），且希望简化实现。
- 优势：基于HTTP，无需额外协议，浏览器原生支持。
- 注意：不支持客户端主动发消息，数据需为文本格式。

三、混合使用案例

WebSocket + SSE：主交互用WebSocket，辅助推送用SSE（如游戏内聊天用WebSocket，公告用SSE）。
Socket.IO fallback：在WebSocket不可用时，Socket.IO自动切换到长轮询，适合对兼容性要求高的场景。

四、总结

实时性优先 → WebSocket
开发效率/兼容性优先 → Socket.IO
简单服务器推送 → SSE（流式接口）

五、代码示例

一、WebSocket 代码示例

<!DOCTYPE html>
<html>
<body><button onclick="connect()">连接</button><button onclick="disconnect()">断开</button><button onclick="sendMessage()">发送消息</button><div id="messages"></div><script>let socket = null;let heartbeatTimer = null;function connect() {socket = new WebSocket('ws://localhost:8080');socket.onopen = () => {console.log('已连接到服务器');startHeartbeat();};socket.onmessage = (event) => {const data = JSON.parse(event.data);if (data.type === 'message') {document.getElementById('messages').innerHTML += `<p>${data.sender}: ${data.content}</p>`;} else if (data.type === 'online_list') {console.log('在线用户:', data.users);}};socket.onclose = () => {console.log('连接已关闭');stopHeartbeat();setTimeout(connect, 3000); // 自动重连};}function disconnect() {socket.close();}function sendMessage() {socket.send(JSON.stringify({type: 'message',content: 'Hello from client!'}));}function startHeartbeat() {heartbeatTimer = setInterval(() => {if (socket.readyState === WebSocket.OPEN) {socket.send(JSON.stringify({ type: 'heartbeat' }));}}, 10000);}function stopHeartbeat() {clearInterval(heartbeatTimer);}</script>
</body>
</html>

二、Socket.IO 代码示例

vue3中socket.io使用（取消自动连接）_vue3 socketio-CSDN博客