前端跨域解决方案（5）：websocket-EW帮帮网

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 适用场景

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

WebSocket 作为现代实时 Web 应用的基础设施，已广泛应用于社交、金融、工业监控等领域。

下一章将介绍 Nginx 方案，敬请期待！

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