vue3➕webSocket 文本输入，实时聊天

在 Vue3 中实现文本输入的实时聊天功能，需结合 WebSocket 协议建立双向通信，并通过组件化设计管理界面和状态。以下是关键实现步骤及代码示例：

⚙️ 一、WebSocket 通信集成

1. 建立 WebSocket 连接

在 Vue3 的 setup 中初始化连接，管理消息收发：

import { ref, onMounted, onBeforeUnmount } from 'vue';

export default { setup() { const messages = ref([]); const inputMsg = ref(''); let socket;

onMounted(() => {
  socket = new WebSocket('ws://localhost:8080'); // 替换为实际地址
  socket.onmessage = (event) => {
    messages.value.push(JSON.parse(event.data)); // 解析消息
  };
  socket.onerror = (error) => console.error("WebSocket 错误:", error);
});

onBeforeUnmount(() => socket?.close());

const sendMessage = () => {
  if (inputMsg.value.trim()) {
    socket.send(JSON.stringify({ 
      text: inputMsg.value, 
      timestamp: new Date() 
    }));
    inputMsg.value = '';
  }
};
return { messages, inputMsg, sendMessage };

} };

注意：消息建议使用 JSON 格式化，包含内容、发送者、时间戳等字段。

💬 二、聊天界面组件设计

1. 消息列表与输入框组件

◦ 消息列表：区分用户与对方消息样式，支持滚动显示。