当前位置：首页 > VUE

vue实现群聊

2026-03-27 19:06:44VUE

Vue 实现群聊功能

创建 Vue 项目

使用 Vue CLI 或 Vite 创建一个新的 Vue 项目。确保安装了必要的依赖，如 Vue Router 和 Axios。

npm init vue@latest vue-chat
cd vue-chat
npm install
npm install axios vue-router

设置 Socket.io 或 WebSocket

群聊功能通常需要实时通信，可以使用 Socket.io 或原生 WebSocket 实现。

npm install socket.io-client

在 Vue 项目中创建一个 Socket 服务文件（如 src/services/socket.js）：

import { io } from 'socket.io-client';

const socket = io('http://your-server-url', {
  transports: ['websocket'],
});

export default socket;

创建聊天组件

在 src/components/Chat.vue 中创建聊天界面：

vue实现群聊

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

<script>
import socket from '../services/socket';

export default {
  data() {
    return {
      messages: [],
      newMessage: '',
      user: 'Anonymous',
    };
  },
  mounted() {
    socket.on('message', (message) => {
      this.messages.push(message);
    });

    // 设置用户名（可以从登录页面传递）
    this.user = prompt('Enter your name:') || 'Anonymous';
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() === '') return;
      const message = {
        user: this.user,
        text: this.newMessage,
      };
      socket.emit('message', message);
      this.newMessage = '';
    },
  },
};
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
.message {
  margin-bottom: 10px;
}
.input-area {
  display: flex;
  padding: 10px;
}
.input-area input {
  flex: 1;
  padding: 8px;
}
.input-area button {
  margin-left: 10px;
  padding: 8px 16px;
}
</style>

配置后端服务器

创建一个简单的 Node.js 服务器处理 Socket.io 连接：

npm init -y
npm install express socket.io

创建 server.js：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server, {
  cors: {
    origin: '*',
  },
});

io.on('connection', (socket) => {
  console.log('New client connected');

  socket.on('message', (message) => {
    io.emit('message', message);
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

路由配置

在 src/router/index.js 中配置路由：

vue实现群聊

import { createRouter, createWebHistory } from 'vue-router';
import Chat from '../components/Chat.vue';

const routes = [
  {
    path: '/chat',
    name: 'Chat',
    component: Chat,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;