Vue 3 和 WebRTC 实现点对点聊天应用 使用 Vue 3 和 WebRTC 来实现一个简单的点对点聊天应用，服务端使用 WebSocket (ws) 来建立信令服务器，用于连接和交换 WebRTC 所需的 SDP 和 ICE 候选信息。1. 项目初始化首先，我们创建一个基于 Vue 3 的项目：npm init vue@latest webrtc-chat cd webrtc-chat npm install然后，安装 WebSocket 依赖：npm install ws2. 创建 WebSocket 信令服务器我们使用 Node.js 和 ws 模块来创建信令服务器：// server.js const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { ws.on('message', (message) => { // 将消息广播给其他客户端 wss.clients.forEach((client) => { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(message); } }); }); // 向新连接的客户端发送欢迎消息 ws.send(JSON.stringify({ type: 'welcome', message: 'Connected to WebSocket server' })); }); console.log('WebSocket server is running on ws://localhost:8080');运行服务器：node server.js3. 创建 Vue 3 应用在 src 文件夹中创建 components/Chat.vue 组件。<template> <div> <h2>点对点聊天</h2> <textarea v-model="message" placeholder="输入消息..."></textarea> <button @click="sendMessage">发送</button> <button @click="createOffer">发送 Offer</button> <div v-for="(msg, index) in messages" :key="index">{{ msg }}</div> </div> </template> <script> export default { data() { return { message: '', messages: [], peerConnection: null, dataChannel: null, ws: null }; }, mounted() { this.initializeWebSocket(); // 初始化 WebSocket this.initializePeerConnection(); // 初始化 PeerConnection }, methods: { // 初始化 WebSocket 连接 initializeWebSocket() { this.ws = new WebSocket('ws://localhost:8080'); // 接收来自信令服务器的消息 this.ws.onmessage = (event) => { const data = JSON.parse(event.data); if (data.type === 'offer') { this.handleOffer(data); // 处理接收到的 Offer } else if (data.type === 'answer') { this.handleAnswer(data); // 处理接收到的 Answer } else if (data.type === 'candidate') { this.addIceCandidate(data); // 添加接收到的 ICE 候选 } }; }, // 初始化 PeerConnection 和数据通道 initializePeerConnection() { this.peerConnection = new RTCPeerConnection(); // 监听 ICE 候选事件 this.peerConnection.onicecandidate = (event) => { if (event.candidate) { this.ws.send(JSON.stringify({ type: 'candidate', candidate: event.candidate })); // 将 ICE 候选发送到信令服务器 } }; // 创建数据通道 this.dataChannel = this.peerConnection.createDataChannel('chat'); this.dataChannel.onmessage = (event) => { this.messages.push(`Peer: ${event.data}`); // 接收消息并更新聊天记录 }; // 监听远程数据通道 this.peerConnection.ondatachannel = (event) => { this.dataChannel = event.channel; this.dataChannel.onmessage = (event) => { this.messages.push(`Peer: ${event.data}`); }; }; }, // 创建并发送 Offer async createOffer() { const offer = await this.peerConnection.createOffer(); await this.peerConnection.setLocalDescription(offer); this.ws.send(JSON.stringify({ type: 'offer', sdp: offer })); // 发送 Offer }, // 处理接收到的 Offer async handleOffer(data) { await this.peerConnection.setRemoteDescription(new RTCSessionDescription(data.sdp)); const answer = await this.peerConnection.createAnswer(); await this.peerConnection.setLocalDescription(answer); this.ws.send(JSON.stringify({ type: 'answer', sdp: answer })); // 发送 Answer }, // 处理接收到的 Answer async handleAnswer(data) { await this.peerConnection.setRemoteDescription(new RTCSessionDescription(data.sdp)); }, // 添加接收到的 ICE 候选 async addIceCandidate(data) { if (data.candidate) { await this.peerConnection.addIceCandidate(new RTCIceCandidate(data.candidate)); } }, // 发送消息 sendMessage() { if (this.dataChannel && this.message) { this.dataChannel.send(this.message); // 通过数据通道发送消息 this.messages.push(`Me: ${this.message}`); // 更新本地聊天记录 this.message = ''; // 清空输入框 } } } }; </script> <style> textarea { width: 100%; height: 100px; margin-bottom: 10px; } button { display: block; margin-bottom: 10px; } </style>4. 启动应用运行以下命令以启动 Vue 应用：npm run dev打开浏览器开两个窗口访问 http://localhost:3000，点击发送offer即可进行实时的点对点聊天。