HTML 正确关闭 WebSocket（HTML5，Javascript）

在本文中，我们将介绍如何正确关闭 WebSocket 连接，以确保避免任何潜在的问题和资源浪费。WebSocket 是 HTML5 中新增的一项技术，允许客户端和服务器之间进行全双工的通信。

阅读更多：HTML 教程

WebSocket 概述

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。与传统的 HTTP 请求-响应模型不同，WebSocket 允许服务器主动推送数据给客户端，而不需要客户端发起请求。

通过 WebSocket，可以实现实时聊天、实时数据更新、多人协同编辑等功能。然而，当不再需要使用 WebSocket 连接时，我们需要正确关闭它以释放资源。

关闭 WebSocket 连接

在使用 WebSocket 连接时，当我们认为不再需要该连接时，应该显式地关闭它。下面是一个示例代码，演示如何关闭 WebSocket 连接：

// 创建 WebSocket 连接对象
const socket = new WebSocket("wss://example.com");

// 监听连接成功事件
socket.onopen = function(event) {
   console.log("WebSocket 连接已打开");
};

// 监听接收消息事件
socket.onmessage = function(event) {
   console.log("接收到消息：" + event.data);
};

// 关闭 WebSocket 连接
function closeWebSocket() {
   socket.close();
}

// 监听连接关闭事件
socket.onclose = function(event) {
    console.log("WebSocket 连接已关闭");
};

// 在不需要连接时调用 closeWebSocket 函数进行关闭

在上述代码中，我们使用 socket.close() 方法来关闭 WebSocket 连接。当连接关闭后，socket.onclose 事件会被触发，并执行相关的操作。

需要注意的是，关闭 WebSocket 连接时，服务器可能还会发送一些未接收的消息。因此，我们应该在关闭连接之前，确保已接收所有需要的消息。

优雅关闭 WebSocket 连接

除了直接调用 close() 方法来关闭 WebSocket 连接之外，还可以通过发送关闭帧来优雅地关闭连接。WebSocket 协议定义了两种关闭帧：一种是由客户端发送的关闭帧，另一种是由服务器发送的关闭帧。

下面是一个优雅关闭 WebSocket 连接的示例代码：

// 创建 WebSocket 连接对象
const socket = new WebSocket("wss://example.com");

// 监听连接成功事件
socket.onopen = function(event) {
   console.log("WebSocket 连接已打开");
};

// 监听接收消息事件
socket.onmessage = function(event) {
   console.log("接收到消息：" + event.data);
};

// 优雅关闭 WebSocket 连接
function gracefulCloseWebSocket() {
   socket.send("bye");
   socket.close();
}

// 监听连接关闭事件
socket.onclose = function(event) {
    console.log("WebSocket 连接已关闭");
};

// 在不需要连接时调用 gracefulCloseWebSocket 函数进行优雅关闭