当前位置：首页 > VUE

vue实现即时聊天

2026-03-08 03:44:50VUE

实现思路

使用Vue.js构建即时聊天应用需要结合前端框架和后端实时通信技术。常见的方案包括WebSocket或第三方服务如Firebase、Socket.IO。

vue实现即时聊天

技术选型

前端框架: Vue 3 + Composition API
实时通信: Socket.IO（基于WebSocket的封装库）
UI组件: Element Plus或Vant
状态管理: Pinia（Vue官方推荐）

核心代码实现

前端Socket连接

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

const socket = io("http://your-backend-url", {
  autoConnect: false,
  reconnection: true
});

export const connectSocket = (token) => {
  socket.auth = { token };
  socket.connect();
};

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 handleSendMessage = () => {
  if (newMessage.value.trim()) {
    socket.emit('private_message', {
      content: newMessage.value,
      timestamp: Date.now()
    });
    newMessage.value = '';
  }
};

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

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

后端Node.js示例

// server.js
const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "http://your-frontend-url"
  }
});

io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  if (token) {
    return next();
  }
  return next(new Error("Authentication error"));
});

io.on("connection", (socket) => {
  socket.on("private_message", (msg) => {
    io.emit("new_message", msg);
  });
});

httpServer.listen(3000);