当前位置：首页 > VUE

vue实现的聊天

2026-03-07 23:00:14VUE

Vue 实现聊天功能

技术栈选择 Vue 3 + Composition API 提供响应式数据管理，WebSocket 或 Socket.io 实现实时通信，Element UI/Vant 等组件库简化界面开发。

核心实现步骤

初始化项目与依赖安装

npm create vue@latest chat-app
cd chat-app
npm install socket.io-client  # 或 websocket 库
npm install element-plus --save  # 按需选择UI库

WebSocket 连接管理

vue实现的聊天

// src/utils/socket.js
import { io } from "socket.io-client";

const socket = io("http://your-server-url", {
  autoConnect: false,
  reconnectionAttempts: 3
});

export const connectSocket = () => socket.connect();
export const disconnectSocket = () => socket.disconnect();
export default socket;

聊天室组件实现

<!-- src/components/ChatRoom.vue -->
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import socket from '../utils/socket';

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

const sendMessage = () => {
  if (newMessage.value.trim()) {
    socket.emit('chatMessage', {
      text: newMessage.value,
      timestamp: Date.now()
    });
    newMessage.value = '';
  }
};

onMounted(() => {
  socket.on('newMessage', (msg) => {
    messages.value.push(msg);
  });
});

onUnmounted(() => {
  socket.off('newMessage');
});
</script>

<template>
  <div class="chat-container">
    <div v-for="(msg, index) in messages" :key="index">
      {{ msg.text }}
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" />
    <button @click="sendMessage">Send</button>
  </div>
</template>

消息存储优化 使用 Pinia 进行状态管理：

// src/stores/chat.js
import { defineStore } from 'pinia';

export const useChatStore = defineStore('chat', {
  state: () => ({
    messages: [],
    unreadCount: 0
  }),
  actions: {
    addMessage(msg) {
      this.messages.push(msg);
    }
  }
});

消息显示优化 添加消息气泡和时间戳显示：

vue实现的聊天

<template>
  <div class="message-bubble" :class="{ 'is-me': msg.isMe }">
    <div class="message-text">{{ msg.text }}</div>
    <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
  </div>
</template>

<script>
const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleTimeString();
};
</script>

<style>
.message-bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 18px;
  margin: 4px 0;
}
.is-me {
  background-color: #409eff;
  color: white;
  margin-left: auto;
}
</style>

服务端示例 (Node.js)

const io = require('socket.io')(3000, {
  cors: {
    origin: "http://your-client-url"
  }
});

io.on('connection', (socket) => {
  socket.on('chatMessage', (msg) => {
    io.emit('newMessage', {
      ...msg,
      id: Date.now().toString()
    });
  });
});

功能扩展建议