WebSocket是一种基于TCP的全双工通信协议，只需一次握手即可建立持久连接，实现客户端与服务器间的实时数据交换。相比HTTP的无状态、短连接机制，WebSocket通过浏览器原生支持的API，使用new WebSocket('ws://...')创建连接，支持onopen、onmessage、onerror、onclose事件监听，可实时收发字符串、Blob等数据，并通过send()方法传输消息，close()关闭连接。实际应用中需添加心跳检测与自动重连机制，广泛用于聊天、协作、通知和游戏等场景。
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端和服务器之间实时交换数据。与传统的 HTTP 请求不同，HTTP 是无状态、短连接的，每次通信都需要重新建立连接，而 WebSocket 只需一次握手，之后便可实现持久连接，双方可随时发送数据。
在 JavaScript 中使用 WebSocket 非常简单，浏览器原生支持 WebSocket API，开发者可以直接通过 JavaScript 创建连接、收发消息并监听状态变化。
创建 WebSocket 连接
要建立一个 WebSocket 连接，只需实例化一个 WebSocket 对象，并传入服务器的 URL（以 ws:// 或 wss:// 开头）：
const socket = new WebSocket('ws://localhost:8080');
wss:// 表示加密的 WebSocket 连接，类似于 HTTPS，适用于生产环境。
立即学习“Java免费学习笔记（深入）”；
监听连接事件
WebSocket 提供了多个事件来处理连接生命周期：
- onopen：连接成功建立时触发
- onmessage：收到服务器消息时触发
- onerror：通信发生错误时触发
- onclose：连接关闭时触发
示例代码：
socket.onopen = function(event) {
console.log('连接已建立');
};
socket.onmessage = function(event) {
console.log('收到消息:', event.data);
};
socket.onerror = function(event) {
console.error('发生错误:', event);
};
socket.onclose = function(event) {
console.log('连接已关闭');
};
发送数据
通过调用 send() 方法，可以向服务器发送数据。支持字符串、Blob 或 ArrayBuffer：
socket.send('你好，服务器！');
例如，在用户输入后实时发送聊天内容：
document.getElementById('sendBtn').onclick = function() {
const input = document.getElementById('messageInput');
if (input.value) {
socket.send(input.value);
input.value = '';
}
};
关闭连接
若需主动关闭连接，调用 close() 方法即可：
socket.close();
这会触发 onclose 事件，通知客户端连接已终止。
基本上就这些。WebSocket 让网页具备了实时能力，广泛应用于聊天应用、在线协作、实时通知和游戏等场景。只要后端也支持 WebSocket 协议（如 Node.js 的 ws 库、Java 的 Spring WebSocket 等），前端 JavaScript 就能轻松实现双向通信。不复杂但容易忽略的是连接异常处理和重连机制，实际项目中建议加入心跳检测和自动重连逻辑。
