当前位置：首页 > VUE

vue项目实现聊天

2026-02-18 20:17:53VUE

Vue 项目实现聊天功能

创建 Vue 项目

使用 Vue CLI 创建一个新项目，确保安装 Vue 3 和相关依赖。
命令示例：

npm init vue@latest vue-chat-app
cd vue-chat-app
npm install

安装必要依赖

聊天功能通常需要 WebSocket 或第三方库（如 Socket.IO）实现实时通信。
安装 Socket.IO 客户端：

npm install socket.io-client

设计聊天界面

创建聊天组件，包含消息列表、输入框和发送按钮。
示例代码（Chat.vue）：

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

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

export default {
  data() {
    return {
      messages: [],
      newMessage: "",
      socket: null,
    };
  },
  mounted() {
    this.socket = io("http://localhost:3000");
    this.socket.on("message", (message) => {
      this.messages.push(message);
    });
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() === "") return;
      this.socket.emit("message", { text: this.newMessage });
      this.newMessage = "";
    },
  },
};
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 400px;
}
.messages {
  flex: 1;
  overflow-y: auto;
}
.message {
  padding: 8px;
  margin: 4px;
  background: #f0f0f0;
  border-radius: 4px;
}
</style>

后端服务设置

使用 Node.js 和 Socket.IO 搭建简单的 WebSocket 服务器。
创建 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: "*",
  },
});

io.on("connection", (socket) => {
  console.log("用户连接");
  socket.on("message", (message) => {
    io.emit("message", message);
  });
});

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