WebSocket连接的建立与关闭-WebSocket入门与案例实战

当前位置:　首页>> 技术小册>> WebSocket入门与案例实战

### WebSocket连接的建立与关闭

在《WebSocket入门与案例实战》一书中，深入探讨WebSocket连接的建立与关闭机制是理解并高效利用WebSocket技术的关键。WebSocket作为一种在单个TCP连接上进行全双工通讯的协议，它允许服务器主动向客户端推送信息，极大地提升了实时通信应用的性能和用户体验。本章将详细阐述WebSocket连接的建立过程、保持连接的机制以及优雅关闭连接的方法。

#### 一、WebSocket连接建立

##### 1.1 WebSocket协议基础

WebSocket协议建立在HTTP协议之上，但完成握手后，它便独立于HTTP协议进行数据传输。WebSocket的URL以`ws://`（非加密）或`wss://`（加密，即WebSocket Secure）开头，分别对应于HTTP和HTTPS。WebSocket的握手过程本质上是一个HTTP升级请求，客户端通过发送一个带有特定头部（如`Upgrade: websocket`）的HTTP请求来请求服务器升级到WebSocket协议。

##### 1.2 握手过程详解

**步骤1：客户端发起请求**

客户端通过发送一个HTTP GET请求到服务器，请求中包含几个关键的HTTP头部，用于告知服务器客户端希望升级到WebSocket协议。这些头部包括：

- `Connection: Upgrade`：表示客户端希望升级连接。
- `Upgrade: websocket`：指明客户端希望升级到的协议是WebSocket。
- `Sec-WebSocket-Key`：一个由客户端随机生成的Base64编码的值，用于确保握手的安全性。
- `Sec-WebSocket-Version`：客户端支持的WebSocket协议版本，目前广泛使用的是13。
- `Sec-WebSocket-Extensions`（可选）：客户端支持的扩展。
- `Sec-WebSocket-Protocol`（可选）：客户端希望使用的子协议。

**步骤2：服务器响应**

服务器接收到客户端的升级请求后，如果同意升级，将返回一个HTTP 101 Switching Protocols响应，并包含以下关键头部：

- `Upgrade: websocket`：确认协议升级。
- `Connection: Upgrade`：确认连接升级。
- `Sec-WebSocket-Accept`：一个基于客户端`Sec-WebSocket-Key`计算出的值，用于验证握手的有效性。
- `Sec-WebSocket-Extensions`（如果协商成功）：服务器选择的扩展。
- `Sec-WebSocket-Protocol`（如果协商成功）：服务器选择的子协议。

**步骤3：连接建立**

一旦服务器返回了正确的响应，WebSocket连接就正式建立。之后，双方就可以通过这条连接进行全双工通信，无需再发送HTTP请求。

##### 1.3 握手过程中的安全性

WebSocket握手过程中的安全性主要通过`Sec-WebSocket-Key`和`Sec-WebSocket-Accept`头部来保证。客户端生成的`Sec-WebSocket-Key`是一个随机值，服务器接收到后，会将其与固定的字符串（如"258EAFA5-E914-47DA-95CA-C5AB0DC85B11"）拼接，然后通过SHA-1哈希算法和Base64编码生成`Sec-WebSocket-Accept`的值。这个机制可以防止未授权的WebSocket连接尝试。

#### 二、WebSocket连接的保持

WebSocket连接一旦建立，就会保持开启状态，直到被任何一方显式关闭或由于网络问题、超时等原因自动关闭。为了保持连接的活跃性，WebSocket协议本身并没有规定心跳机制，但实际应用中，通常会实现心跳机制来检测连接的存活状态。

##### 2.1 心跳机制

心跳机制是客户端和服务器之间定期发送的小数据包，用于确认对方仍然在线且连接正常。心跳可以是客户端发起的，也可以是服务器发起的，或者双方都可以发起。心跳包的内容通常很简单，可能只是一个时间戳或特定的标识符。

##### 2.2 心跳实现示例

以下是一个简单的WebSocket心跳实现示例（以JavaScript为例）：

```javascript
// 客户端
let lastPing = new Date().getTime();

function sendHeartbeat() {
    const now = new Date().getTime();
    if (now - lastPing > 5000) { // 每5秒发送一次心跳
        ws.send('ping');
        lastPing = now;
    }
    setTimeout(sendHeartbeat, 1000); // 每秒检查一次是否需要发送心跳
}

// 监听服务器的心跳响应
ws.onmessage = function(event) {
    if (event.data === 'pong') {
        lastPing = new Date().getTime(); // 更新最后心跳时间
    }
};

// 发送初始心跳
sendHeartbeat();

// 服务器端（伪代码）
function onMessage(message) {
    if (message === 'ping') {
        ws.send('pong');
    }
}

// 服务器端也需要实现类似的心跳检测逻辑
```

#### 三、WebSocket连接的关闭

##### 3.1 关闭连接的必要性

WebSocket连接虽然可以长时间保持，但在某些情况下，如用户注销、页面关闭、网络断开或服务器维护时，需要主动关闭连接以释放资源。

##### 3.2 关闭连接的步骤

WebSocket提供了关闭连接的标准方法，即使用`close()`函数，并可以指定状态码和关闭原因。状态码是一个无符号短整型（0-4999），用于表示关闭的原因，而关闭原因是一个可选的UTF-8编码的字符串，用于提供关闭的额外信息。

**客户端关闭连接**

```javascript
ws.close(1000, '正常关闭');
```

这里，`1000`是状态码，表示正常关闭；`'正常关闭'`是关闭原因。

**服务器关闭连接**

服务器端关闭连接的方式与客户端类似，但通常是在处理完特定逻辑后，或者在检测到客户端异常时执行。

##### 3.3 关闭连接的握手过程

WebSocket连接的关闭也涉及一个握手过程，但与建立连接时的握手不同。当一方决定关闭连接时，它会发送一个关闭帧（Close Frame），包含状态码和关闭原因（可选）。对方收到关闭帧后，如果同意关闭，也会发送一个关闭帧作为响应，然后连接正式关闭。

##### 3.4 优雅关闭

优雅关闭WebSocket连接意味着在关闭连接之前，完成所有必要的清理工作，如发送未发送的数据、更新服务器状态等。这要求开发者在关闭连接前编写相应的逻辑来确保数据的完整性和系统状态的一致性。

#### 四、总结

WebSocket连接的建立与关闭是WebSocket技术中不可或缺的部分。通过理解WebSocket的握手过程、保持连接的机制以及优雅关闭连接的方法，开发者可以更加高效地利用WebSocket技术构建实时通信应用。在实际开发中，还需要注意处理网络异常、超时等问题，以确保WebSocket连接的稳定性和可靠性。

该分类下的相关小册推荐：

Javascript-ES6与异步编程

剑指javascript

npm script实战构建前端工作流

Flutter核心技术与实战

javascript设计模式原理与实战

Javascript编程指南

web前端开发性能优化实战

剑指javascript-ES6

深入学习前端重构知识体系

ES6入门指南

JavaScript面试指南

KnockoutJS入门指南