Websocket使用简单示例

在前端开发中，WebSocket 用于建立客户端与服务器的持久化双向通信连接，相比 HTTP 的单向请求响应模式，能更高效地实现实时数据交互（如聊天、实时通知、数据更新等场景）。基本步骤如下：

1. 建立 WebSocket 连接​

通过WebSocket构造函数创建连接，传入服务器WebSocket接口地址（协议为ws://或加密的wss://）：

// 连接服务器WebSocket端点
const socket = new WebSocket('ws://localhost:8080/chat');

// 连接成功回调
socket.onopen = (event) => {
  console.log('WebSocket连接已建立');
  // 可在连接成功后发送初始消息（如身份验证）
  socket.send(JSON.stringify({ type: 'login', userId: '123' }));
};

2. 监听并处理服务器消息​

通过onmessage事件接收服务器发送的消息，消息数据需根据约定格式解析（通常为 JSON）：

// 接收服务器消息
socket.onmessage = (event) => {
  // 消息内容在event.data中，需解析为JSON对象
  const message = JSON.parse(event.data);
  
  // 根据消息类型处理不同业务
  switch (message.type) {
    case 'chat':
      console.log(`收到消息：${message.content}`);
      // 渲染到页面（如添加到聊天记录列表）
      renderMessage(message);
      break;
    case 'system':
      console.log(`系统通知：${message.info}`);
      break;
  }
};

3. 发送消息到服务器​

通过send()方法向服务器发送数据，数据格式通常为字符串（可将对象转为JSON字符串）：

// 发送消息函数（如点击发送按钮时调用）
const sendMessage = (content) => {
  if (socket.readyState === WebSocket.OPEN) { // 确保连接处于打开状态
    socket.send(JSON.stringify({
      type: 'chat',
      content: content,
      timestamp: new Date().getTime()
    }));
  } else {
    console.error('WebSocket连接未建立，无法发送消息');
  }
};

4. 处理连接关闭与错误​

监听onclose和onerror事件，处理连接关闭、异常等情况，并可实现重连机制：

// 连接关闭回调
socket.onclose = (event) => {
  console.log(`连接关闭，代码：${event.code}，原因：${event.reason}`);
  // 实现自动重连（如延迟一段时间后重新创建连接）
  setTimeout(() => {
    console.log('尝试重连...');
    // 重新初始化WebSocket连接（可封装为函数）
  }, 3000);
};

// 连接错误回调
socket.onerror = (error) => {
  console.error('WebSocket错误：', error);
};

5. 主动关闭连接​

在不需要通信时（如页面卸载、用户退出），可主动关闭连接：

// 关闭连接
const closeSocket = () => {
  if (socket.readyState === WebSocket.OPEN) {
    socket.close(1000, '客户端主动关闭连接'); // 1000表示正常关闭
  }
};

// 页面离开时关闭连接
window.addEventListener('beforeunload', closeSocket);

注意事项​
兼容性：现代浏览器普遍支持 WebSocket，但部分旧环境（如 IE10 以下）不支持，可通过 Socket.IO 等库实现降级兼容（自动切换为轮询等方式）。​
安全性：生产环境建议使用wss://协议（WebSocket Secure），通过 TLS 加密（保证数据完整性和数据机密性）传输数据，防止中间人攻击。​
心跳机制：为避免连接因长时间无数据传输被断开，可定期发送心跳消息（如每 30 秒发送{ type: ‘ping’ }），服务器响应pong确认连接存活。（例如，在金融交易平台中，WebSocket 连接用于推送实时行情，若连接意外断开可能导致用户错过关键信息。通过每 30 秒发送 “ping” 并等待 “pong” 响应，可确保连接持续稳定，同时在异常时快速恢复，保障服务可靠性。）​
通过以上步骤，前端可快速实现与服务器的实时双向通信，满足各类实时交互场景需求。

贴一个小小的示例～