HTML5 WebSocket

WebSocket 是下一代客户端-服务器通信技术。它在单个 TCP 连接上提供了一个全双工 (full-duplex) 的通信信道，这意味着客户端和服务器可以在任何时候互相发送数据，实现了真正的实时、双向通信。

这与传统的 HTTP 请求-响应模型形成了鲜明对比。在 HTTP 中，通信总是由客户端发起，服务器只能被动地响应。WebSocket 打破了这一限制。

WebSocket 的优势

真正的双向通信: 客户端和服务器都可以主动向对方发送数据。
低延迟: 一旦连接建立，数据交换就不再需要发送繁重的 HTTP 头部，大大减少了开销，降低了延迟。
持久连接: 连接会一直保持打开状态，直到一方明确关闭它。

WebSocket 非常适合需要高频率、低延迟数据交换的应用，例如：

在线多人游戏
实时聊天应用
协同编辑工具 (如 Google Docs)
金融应用的实时数据推送

客户端实现

在客户端使用 WebSocket 非常直接。你需要创建一个 WebSocket 对象，并为其提供一个特殊的 ws 或 wss (安全) 协议的 URL。

1. 创建 WebSocket 连接

// 创建一个 WebSocket 实例
// 'ws://' 是不加密的协议，'wss://' 是加密的
const socket = new WebSocket('ws://www.example.com/socketserver');

2. WebSocket 事件

WebSocket 对象有四个核心事件：

onopen: 当与服务器的连接成功建立时触发。

socket.onopen = function(event) {
  console.log('连接已建立!');
  // 连接建立后，可以开始向服务器发送消息
  socket.send('你好，服务器!');
};

onmessage: 当从服务器接收到消息时触发。消息内容在 event.data 中。

socket.onmessage = function(event) {
  console.log('收到消息: ' + event.data);
};

onclose: 当连接被关闭时触发。

socket.onclose = function(event) {
  if (event.wasClean) {
    console.log(`连接正常关闭, code=${event.code} reason=${event.reason}`);
  } else {
    // 例如，服务器进程被杀死或网络中断
    console.log('连接意外断开');
  }
};

onerror: 当通信发生错误时触发。

socket.onerror = function(error) {
  console.log(`[error] ${error.message}`);
};

3. 发送消息和关闭连接

socket.send(data): 向服务器发送数据。数据可以是字符串、Blob、ArrayBuffer 等。
socket.close([code], [reason]): 关闭连接。

服务器端实现

WebSocket 需要专门的服务器端支持，因为它不是标准的 HTTP。服务器必须能够理解 WebSocket 的“握手”请求，并将 HTTP 连接“升级”为 WebSocket 连接。

许多后端语言和框架都提供了 WebSocket 的库，例如：

Node.js: ws, Socket.IO
Python: websockets, Tornado
Java: JSR 356, Spring Framework
Go: gorilla/websocket

服务器端的逻辑通常是：监听连接，接收来自特定客户端的消息，然后决定是将消息广播给所有其他客户端（如聊天室），还是只回复给原始客户端。

#HTML5 WebSocket

#WebSocket 的优势

#客户端实现

#1. 创建 WebSocket 连接

#2. WebSocket 事件

#3. 发送消息和关闭连接