当前位置：首页 > VUE

vue实现在线聊天

2026-02-24 14:37:14VUE

Vue实现在线聊天功能

在线聊天功能通常需要结合前端框架（如Vue）和后端实时通信技术（如WebSocket或Socket.IO）。以下是一个基于Vue 3和Socket.IO的实现方案：

前端实现（Vue 3）

安装必要依赖：

npm install socket.io-client

创建聊天组件：

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

<script>
import { io } from 'socket.io-client'

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

    this.socket.on('message', (message) => {
      this.messages.push(message)
    })
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        this.socket.emit('message', {
          user: this.user,
          text: this.newMessage
        })
        this.newMessage = ''
      }
    }
  }
}
</script>

<style>
.chat-container {
  max-width: 600px;
  margin: 0 auto;
}
.messages {
  height: 300px;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
</style>

后端实现（Node.js + Socket.IO）

创建简单的Node.js服务器：

const express = require('express')
const app = express()
const http = require('http').createServer(app)
const io = require('socket.io')(http, {
  cors: {
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
})

io.on('connection', (socket) => {
  console.log('用户连接')

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

  socket.on('disconnect', () => {
    console.log('用户断开连接')
  })
})

http.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000')
})

高级功能扩展

用户列表管理

// 后端
let users = []

io.on('connection', (socket) => {
  socket.on('join', (username) => {
    users.push({ id: socket.id, username })
    io.emit('users', users)
  })

  socket.on('disconnect', () => {
    users = users.filter(user => user.id !== socket.id)
    io.emit('users', users)
  })
})

消息持久化

vue实现在线聊天

// 使用MongoDB存储消息
const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost/chatdb')

const messageSchema = new mongoose.Schema({
  user: String,
  text: String,
  timestamp: { type: Date, default: Date.now }
})

const Message = mongoose.model('Message', messageSchema)

io.on('connection', (socket) => {
  socket.on('message', async (msg) => {
    const message = new Message(msg)
    await message.save()
    io.emit('message', msg)
  })
})