前端开发者必备技术：WebSocket 通信实战指南

🎓 作者简介 ： 前端领域优质创作者

🚪 资源导航： 传送门=>

🎬 个人主页： 江城开朗的豌豆

🌐 个人网站: 江城开朗的豌豆 🌍

📧 个人邮箱: [email protected] 📩

💬 个人微信: y_t_t_t_ 📱

📌 座 右 铭: 生活就像心电图，一帆风顺就证明你挂了。 💔

👥 QQ群: 906392632 (前端技术交流群) 💬

---

WebSocket 作为现代 Web 应用实时通信的核心技术，已经成为前端开发者必须掌握的技能。本文将带你从零开始，使用 Vue3 和 Node.js 实现完整的 WebSocket 通信方案。

一、WebSocket 是什么？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它解决了 HTTP 协议无法实现服务器主动推送的问题。与传统的轮询方式相比，WebSocket 具有：

• 更低的延迟：建立连接后持续通信
• 更高的效率：无需重复建立连接
• 双向通信：服务端可以主动推送消息

二、为什么需要 WebSocket？

想象一下以下场景：

• 实时聊天应用
• 股票行情实时更新
• 多人协作编辑文档
• 在线游戏状态同步

这些场景都需要服务端能主动推送数据给客户端，这正是 WebSocket 的用武之地。

三、Node.js 服务端实现

1. 创建基础服务

// server.js
const express = require('express');
const WebSocket = require('ws');

const app = express();
const port = 3000;

// 创建HTTP服务器
const server = app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// 创建WebSocket服务器
const wss = new WebSocket.Server({ server });

// 连接池
const clients = new Set();

wss.on('connection', (ws) => {
  console.log('New client connected');
  clients.add(ws);
  
  // 接收消息
  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    
    // 广播消息给所有客户端
    clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(`Server: ${message}`);
      }
    });
  });
  
  // 连接关闭
  ws.on('close', () => {
    console.log('Client disconnected');
    clients.delete(ws);
  });
});

2. 启动服务

node server.js

四、Vue3 客户端实现

1. 封装 WebSocket 工具类

// src/utils/websocket.js
class SocketService {
  constructor() {
    this.socket = null;
    this.callbacks = {};
  }
  
  connect(url) {
    if (!this.socket || this.socket.readyState !== WebSocket.OPEN) {
      this.socket = new WebSocket(url);
      
      this.socket.onopen = () => {
        console.log('WebSocket connected');
      };
      
      this.socket.onmessage = (event) => {
        const data = JSON.parse(event.data);
        const callback = this.callbacks[data.type];
        callback && callback(data.payload);
      };
      
      this.socket.onclose = () => {
        console.log('WebSocket disconnected');
      };
    }
  }
  
  on(type, callback) {
    this.callbacks[type] = callback;
  }
  
  send(type, payload) {
    if (this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify({ type, payload }));
    }
  }
  
  disconnect() {
    this.socket?.close();
  }
}

export const socketService = new SocketService();

2. 在 Vue 组件中使用

<template>
  <div>
    <h1>WebSocket Demo</h1>
    <input v-model="message" @keyup.enter="sendMessage" />
    <button @click="sendMessage">Send</button>
    <div>
      <h3>Messages:</h3>
      <ul>
        <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { socketService } from '@/utils/websocket';

const message = ref('');
const messages = ref([]);

// 初始化WebSocket连接
onMounted(() => {
  socketService.connect('ws://localhost:3000');
  
  socketService.on('message', (data) => {
    messages.value.push(data);
  });
});

// 发送消息
const sendMessage = () => {
  if (message.value.trim()) {
    socketService.send('message', message.value);
    message.value = '';
  }
};

// 组件卸载时断开连接
onUnmounted(() => {
  socketService.disconnect();
});
</script>

五、核心功能扩展

1. 心跳检测机制

// 在SocketService中添加
startHeartbeat() {
  this.heartbeatInterval = setInterval(() => {
    if (this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify({ type: 'heartbeat' }));
    }
  }, 30000); // 30秒一次心跳
}

stopHeartbeat() {
  clearInterval(this.heartbeatInterval);
}

2. 自动重连机制

// 修改connect方法
connect(url) {
  this.url = url;
  this.socket = new WebSocket(url);
  
  this.socket.onclose = () => {
    console.log('WebSocket disconnected, attempting to reconnect...');
    setTimeout(() => this.connect(url), 5000);
  };
  
  // ...其他事件监听
}

3. 消息队列（断线重发）

class SocketService {
  constructor() {
    this.messageQueue = [];
    // ...其他初始化
  }
  
  send(type, payload) {
    if (this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify({ type, payload }));
    } else {
      this.messageQueue.push({ type, payload });
    }
  }
  
  // 在onopen中添加
  this.socket.onopen = () => {
    while (this.messageQueue.length > 0) {
      const msg = this.messageQueue.shift();
      this.socket.send(JSON.stringify(msg));
    }
  };
}

六、生产环境最佳实践

1. 使用WSS协议：生产环境务必使用加密的WebSocket（wss://）
2. 限制连接数：服务端需要对单个IP的连接数做限制
3. 消息大小限制：防止大消息导致内存问题
4. 认证授权：连接时验证用户身份
5. 监控告警：监控连接数和消息频率

七、常见问题解答

Q：WebSocket和HTTP有什么区别？

A：HTTP是单向的请求-响应模式，而WebSocket是全双工的持久连接，服务端可以主动推送消息。

Q：如何选择WebSocket和SSE？

A：SSE(Server-Sent Events)只支持服务端到客户端的单向通信，如果需要双向通信则选择WebSocket。

Q：WebSocket连接数有限制吗？

A：浏览器对单个域的WebSocket连接数通常有限制（Chrome是255个），但实际应用中很少需要这么多连接。

八、总结

WebSocket 为现代 Web 应用提供了真正的实时通信能力。通过本文的实践，你已经学会了：

1. 如何在 Node.js 中创建 WebSocket 服务
2. 如何在 Vue3 中封装和使用 WebSocket
3. 实现心跳检测、自动重连等生产级功能
4. 了解 WebSocket 的最佳实践

完整代码已上传 GitHub，欢迎 Star 和讨论。在实际项目中，你还可以考虑使用 Socket.IO 等库来简化开发。

---

相关资源：

• MDN WebSocket文档
• ws Node.js库
• Socket.IO官网

欢迎在评论区分享你的 WebSocket 使用经验！

---

欢迎在评论区分享你的想法和建议！如果你觉得这篇文章有用，别忘了点赞和收藏哦~