vue3实现聊天
Vue3 实现聊天功能
基础项目搭建
使用 Vue CLI 或 Vite 创建 Vue3 项目：
npm init vue@latest vue-chat
cd vue-chat
npm install安装必要依赖：
npm install socket.io-client axios核心功能实现
前端消息组件
<template>
<div class="chat-container">
<div class="messages" ref="messagesRef">
<div v-for="(msg, index) in messages" :key="index"
:class="['message', msg.sender === 'me' ? 'sent' : 'received']">
{{ msg.text }}
</div>
</div>
<input v-model="newMessage" @keyup.enter="sendMessage" />
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
import io from 'socket.io-client'
const socket = io('http://localhost:3000')
const messages = ref([])
const newMessage = ref('')
const messagesRef = ref(null)
const sendMessage = () => {
if (newMessage.value.trim()) {
socket.emit('chat message', newMessage.value)
messages.value.push({ text: newMessage.value, sender: 'me' })
newMessage.value = ''
scrollToBottom()
}
}
onMounted(() => {
socket.on('chat message', (msg) => {
messages.value.push({ text: msg, sender: 'other' })
scrollToBottom()
})
})
const scrollToBottom = () => {
nextTick(() => {
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
})
}
</script>
<style>
.chat-container {
max-width: 600px;
margin: 0 auto;
}
.messages {
height: 400px;
overflow-y: auto;
border: 1px solid #ccc;
padding: 10px;
}
.message {
margin: 5px;
padding: 8px 12px;
border-radius: 18px;
max-width: 70%;
}
.sent {
background-color: #0084ff;
color: white;
margin-left: auto;
}
.received {
background-color: #e5e5ea;
color: black;
}
</style>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"]
}
})
app.get('/', (req, res) => {
res.send('Chat Server')
})
io.on('connection', (socket) => {
console.log('a user connected')
socket.on('chat message', (msg) => {
io.emit('chat message', msg)
})
socket.on('disconnect', () => {
console.log('user disconnected')
})
})
http.listen(3000, () => {
console.log('listening on *:3000')
})功能扩展建议
消息持久化 使用 MongoDB 或 Firebase 存储历史消息：
// 后端修改
const Message = require('./models/Message')
socket.on('chat message', async (msg) => {
const message = new Message({ content: msg })
await message.save()
io.emit('chat message', msg)
})用户认证 集成 JWT 验证用户身份：
<script setup>
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()
const sendMessage = () => {
if (!authStore.isAuthenticated) return
// ...原有发送逻辑
}
</script>消息状态显示 添加已读/未读状态：
<div class="message-status" v-if="msg.sender === 'me'">
{{ msg.read ? '✓✓' : '✓' }}
</div>部署注意事项
-
生产环境需要配置 HTTPS
-
考虑使用 Nginx 反向代理
-
实现断线重连机制：
// 前端socket配置 const socket = io('http://localhost:3000', { reconnection: true, reconnectionAttempts: 5, reconnectionDelay: 1000 }) -
添加消息加密功能保障隐私
以上实现方案提供了实时聊天的核心功能，可以根据具体需求进一步扩展完善。
