当前位置：首页 > news >正文

前端跨域解决方案（5）：websocket

news 2025/7/22 18:43:14

1 websocket 核心

WebSocket 是一种基于 TCP 协议的全双工通信协议，在浏览器与服务器间建立持久连接，实现实时数据交互。与传统 HTTP 协议相比，具有以下核心优势：

特性对比	HTTP 1.1	WebSocket
通信模式	请求 - 响应（单向）	全双工（双向）
连接特性	短连接（每次请求重建）	长连接（一次握手，持续通信）
实时性	依赖轮询或长轮询	即时推送
协议开销	每次请求携带完整头部	初始握手后仅需极小帧头
二进制支持	需额外处理	原生支持

1.1 websocket 基本使用方法

1.1.1 创建 WebSocket 连接

首先，你需要在浏览器端创建一个新的 WebSocket 对象，向其传入你想要连接的服务器的 WebSocket 地址。

// 创建 WebSocket 实例（ws:// 非加密，wss:// 加密）
let socket = new WebSocket('ws://www.example.com/socketserver');

1.1.2 处理连接事件

你可以监听几个重要的事件，例如 open、message、error 和 close。

当 WebSocket 连接成功时，open 事件将会被触发。
当从服务器收到数据时，message 事件将会被触发。
当发生错误时，error 事件将会被触发。
当连接关闭时，close 事件将会被触发。

socket.onopen = function(event) {console.log('Connection open');
};socket.onmessage = function(event) {console.log('Received data: ' + event.data);
};socket.onerror = function(error) {console.log('Error detected: ' + error);
};socket.onclose = function(event) {console.log('Connection closed');
};

1.1.3 发送和接收数据

通过 WebSocket 连接，你可以使用 send 方法发送数据到服务器，服务器也可以随时发送数据到客户端。

// 发送文本消息
socket.send('Hello, server!');// 发送 JSON 数据
socket.send(JSON.stringify({ action: 'login', user: 'doubao' }));// 接收并解析 JSON
socket.addEventListener('message', (event) => {try {const data = JSON.parse(event.data);console.log('解析后的数据:', data);} catch (e) {console.log('原始文本数据:', event.data);}
});

1.1.4 关闭连接

当你不再需要 WebSocket 连接时，应当关闭它，以释放资源。

/ 主动关闭连接（状态码可选，默认 1000 表示正常关闭）
socket.close(1000, '用户主动退出');// 检测连接状态
if (socket.readyState === WebSocket.OPEN) {socket.send('当前连接正常');
}

2. 实战案例

2.1 服务端A（servera.js）

// 引入 Express 框架
const express = require('express');
// 创建一个 Express 应用
const app = express();
// 设置静态文件夹
app.use(express.static('public'));
// 定义监听端口
const port = 3000;
// 让应用监听在指定端口并在控制台输出信息
app.listen(port, () => {// 当服务器开始运行时，打印一条消息console.log(`Server is running on http://localhost:${port}`);
});

2.2 静态页面A（a.html）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WebSocket 客户端示例</title>
</head>
<body><script>// 创建 WebSocket 连接const socket = new WebSocket('ws://localhost:4000');// 连接成功时发送消息socket.onopen = () => {console.log('WebSocket 连接已建立');socket.send('hello');};// 接收服务器消息socket.onmessage = (event) => {console.log(`收到消息: ${event.data}`);};// 错误处理socket.onerror = (error) => {console.error('WebSocket 错误:', error);};// 连接关闭时重连socket.onclose = () => {console.log('连接已关闭，尝试重连...');setTimeout(() => {// 实际应用中应实现指数退避重连策略new WebSocket('ws://localhost:4000');}, 3000);};</script>
</body>
</html>

2.3 服务端B（serverb.js）

// serverb.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 4000 });// 客户端连接管理
wss.on('connection', (ws) => {console.log('新客户端已连接');// 接收客户端消息ws.on('message', (message) => {console.log(`收到消息: ${message}`);// 响应客户端ws.send('world');});// 连接关闭ws.on('close', () => {console.log('客户端连接已关闭');});// 错误处理ws.on('error', (error) => {console.error('WebSocket 连接错误:', error);});
});console.log('WebSocket 服务器运行中：ws://localhost:4000');

3 适用场景

场景类型	具体案例	技术优势
实时通信	在线聊天、客服系统	低延迟、双向通信
协作工具	多人文档编辑、实时白板	状态同步、操作即时反馈
实时数据监控	股票行情、物联网监控	数据推送、多客户端同步
游戏应用	网页游戏、多人在线游戏	低延迟、高并发处理
通知系统	新闻推送、系统通知	服务器主动推送、减少轮询开销