当前位置：首页 > VUE

vue实现多人聊天

2026-01-19 16:15:01VUE

Vue实现多人聊天功能

技术栈选择 Vue.js作为前端框架，配合WebSocket实现实时通信。后端可选择Node.js（Socket.io）、Spring Boot（WebSocket）或任何支持WebSocket的服务器。

安装依赖 前端需要安装Socket.io客户端库：

npm install socket.io-client

前端实现

创建Vue组件ChatRoom.vue：

<template>
  <div>
    <div v-for="msg in messages" :key="msg.id">
      <strong>{{ msg.user }}:</strong> {{ msg.text }}
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" />
  </div>
</template>

<script>
import io from 'socket.io-client';

export default {
  data() {
    return {
      messages: [],
      newMessage: '',
      socket: null,
      currentUser: 'User' + Math.floor(Math.random() * 1000)
    }
  },
  created() {
    this.socket = io('http://localhost:3000');

    this.socket.on('message', (message) => {
      this.messages.push(message);
    });

    this.socket.on('userConnected', (user) => {
      this.messages.push({
        user: 'System',
        text: `${user} connected`
      });
    });
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        this.socket.emit('message', {
          user: this.currentUser,
          text: this.newMessage
        });
        this.newMessage = '';
      }
    }
  }
}
</script>

后端实现（Node.js示例）

vue实现多人聊天

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

const io = socketIo(server, {
  cors: {
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
});

io.on('connection', (socket) => {
  const userId = 'User' + Math.floor(Math.random() * 1000);
  io.emit('userConnected', userId);

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

  socket.on('disconnect', () => {
    io.emit('userDisconnected', userId);
  });
});

server.listen(3000, () => {
  console.log('Server running on port 3000');
});

功能扩展

添加用户列表显示：

<template>
  <div>
    <div>Online Users: {{ onlineUsers.join(', ') }}</div>
    <!-- 原有聊天内容 -->
  </div>
</template>

<script>
// 在data中添加onlineUsers数组
data() {
  return {
    onlineUsers: []
  }
}

// 在created中添加监听
this.socket.on('userListUpdate', (users) => {
  this.onlineUsers = users;
});
</script>

后端更新用户列表

vue实现多人聊天

let users = [];

io.on('connection', (socket) => {
  const userId = 'User' + Math.floor(Math.random() * 1000);
  users.push(userId);
  io.emit('userListUpdate', users);

  socket.on('disconnect', () => {
    users = users.filter(u => u !== userId);
    io.emit('userListUpdate', users);
  });
});

样式优化

添加基础样式：

<style scoped>
.chat-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
.message {
  margin: 10px 0;
  padding: 8px;
  border-radius: 4px;
  background: #f5f5f5;
}
input {
  width: 100%;
  padding: 8px;
  margin-top: 10px;
}
</style>

部署注意事项