JavaScript教程：深入理解WebSocket技术-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01068/article/details/148940999

JavaScript教程：深入理解WebSocket技术

ko.javascript.info 모던 JavaScript 튜토리얼(The Modern JavaScript Tutorial in Korean ) 项目地址: https://gitcode.com/gh_mirrors/ko/ko.javascript.info

WebSocket是现代Web开发中实现实时双向通信的重要技术。本文将全面介绍WebSocket的工作原理、使用方法以及实际应用场景。

什么是WebSocket？

WebSocket是一种基于TCP的全双工通信协议，它允许服务器和客户端在单个长连接上持续交换数据。与传统的HTTP请求不同，WebSocket连接一旦建立，数据可以双向自由流动，无需重复建立连接。

WebSocket的核心特点

持久连接：建立连接后保持开放状态
双向通信：服务器可以主动推送数据到客户端
低延迟：避免了HTTP的握手开销
轻量级：数据传输开销小

建立WebSocket连接

在JavaScript中创建WebSocket连接非常简单：

// 使用安全的wss协议
let socket = new WebSocket("wss://example.com/ws");

协议选择建议

ws：普通WebSocket协议（不加密）
wss：加密的WebSocket协议（推荐使用）

为什么总是使用wss？ wss不仅提供加密传输，还能避免网络中间设备误判WebSocket流量为异常请求而中断连接。TLS加密确保数据安全传输，防止中间人攻击。

WebSocket事件处理

WebSocket对象提供了四个主要事件：

// 连接建立时触发
socket.onopen = function(event) {
  console.log("连接已建立");
};

// 接收到消息时触发
socket.onmessage = function(event) {
  console.log("收到消息:", event.data);
};

// 发生错误时触发
socket.onerror = function(error) {
  console.error("发生错误:", error);
};

// 连接关闭时触发
socket.onclose = function(event) {
  if(event.wasClean) {
    console.log(`连接正常关闭，代码=${event.code} 原因=${event.reason}`);
  } else {
    console.log("连接异常断开");
  }
};

数据发送与接收

发送数据

使用send()方法发送数据，支持多种格式：

// 发送文本
socket.send("Hello Server!");

// 发送二进制数据（ArrayBuffer）
let buffer = new ArrayBuffer(16);
socket.send(buffer);

// 发送二进制数据（Blob）
let blob = new Blob(["binary data"], {type: "text/plain"});
socket.send(blob);

接收数据

接收数据时，可以通过binaryType属性指定接收格式：

// 默认接收Blob格式
socket.binaryType = "blob";
socket.onmessage = function(event) {
  // event.data是Blob对象
};

// 或者设置为ArrayBuffer格式
socket.binaryType = "arraybuffer";
socket.onmessage = function(event) {
  // event.data是ArrayBuffer对象
};

WebSocket握手过程

当创建WebSocket连接时，客户端和服务器会进行特殊的握手过程：

客户端发送HTTP Upgrade请求
服务器响应101状态码确认协议切换
连接升级为WebSocket协议

握手请求示例

GET /chat HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Version: 13
Origin: https://example.com

握手响应示例

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=

流量控制

当网络状况不佳时，可以使用bufferedAmount属性进行流量控制：

// 检查待发送数据的字节数
if(socket.bufferedAmount === 0) {
  socket.send(moreData);
}

连接管理

关闭连接

可以优雅地关闭连接并指定原因：

socket.close(1000, "工作完成");

常用关闭代码：

1000：正常关闭
1001：端点离开
1006：连接异常断开
1009：消息过大
1011：服务器内部错误

连接状态

通过readyState属性获取当前连接状态：

switch(socket.readyState) {
  case WebSocket.CONNECTING: // 0
    console.log("连接中...");
    break;
  case WebSocket.OPEN: // 1
    console.log("已连接");
    break;
  case WebSocket.CLOSING: // 2
    console.log("正在关闭...");
    break;
  case WebSocket.CLOSED: // 3
    console.log("已关闭");
    break;
}

实战：构建聊天应用

下面我们实现一个简单的WebSocket聊天应用。

客户端实现

<!-- 消息发送表单 -->
<form name="publish">
  <input type="text" name="message">
  <input type="submit" value="发送">
</form>

<!-- 消息显示区域 -->
<div id="messages"></div>

// 建立WebSocket连接
let socket = new WebSocket("wss://example.com/chat");

// 表单提交处理
document.forms.publish.onsubmit = function() {
  let message = this.message.value;
  socket.send(message);
  this.message.value = "";
  return false;
};

// 消息接收处理
socket.onmessage = function(event) {
  let message = event.data;
  let messageElem = document.createElement('div');
  messageElem.textContent = message;
  document.getElementById('messages').prepend(messageElem);
};

服务器端实现（Node.js示例）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

const clients = new Set();

wss.on('connection', function(ws) {
  clients.add(ws);
  
  ws.on('message', function(message) {
    // 限制消息长度为50字符
    message = message.toString().slice(0, 50);
    
    // 广播给所有客户端
    for(let client of clients) {
      if(client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    }
  });
  
  ws.on('close', function() {
    clients.delete(ws);
  });
});