vue实现聊天功能

实现基础聊天界面

使用Vue的模板语法构建聊天界面，包含消息列表和输入框。以下是一个基础组件结构：

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

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: ''
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() === '') return;
      this.messages.push({ text: this.newMessage });
      this.newMessage = '';
    }
  }
};
</script>

<style>
.chat-container {
  border: 1px solid #ddd;
  padding: 10px;
  max-width: 400px;
}
.message-list {
  height: 300px;
  overflow-y: auto;
}
.message {
  margin: 5px 0;
  padding: 8px;
  background: #f0f0f0;
  border-radius: 4px;
}
</style>

集成WebSocket实时通信

通过WebSocket实现实时双向通信，需后端支持。安装websocket或socket.io-client库：

npm install socket.io-client

在Vue组件中集成：

<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('chatMessage', (message) => {
      this.messages.push(message);
    });
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() === '') return;
      this.socket.emit('chatMessage', { text: this.newMessage });
      this.newMessage = '';
    }
  },
  beforeDestroy() {
    this.socket.disconnect();
  }
};
</script>

添加消息时间戳和用户标识

扩展消息对象，包含发送时间和用户信息：

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: '',
      currentUser: 'User1' // 可从登录系统获取
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() === '') return;
      const message = {
        text: this.newMessage,
        user: this.currentUser,
        time: new Date().toLocaleTimeString()
      };
      this.messages.push(message);
      this.newMessage = '';
    }
  }
};
</script>

<template>
  <div class="message" v-for="(msg, index) in messages" :key="index">
    <strong>{{ msg.user }}</strong> ({{ msg.time }}): {{ msg.text }}
  </div>
</template>

优化用户体验

添加消息滚动到底部和输入框自动聚焦功能：

<script>
export default {
  methods: {
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$el.querySelector('.message-list');
        container.scrollTop = container.scrollHeight;
      });
    },
    focusInput() {
      this.$refs.input.focus();
    }
  },
  watch: {
    messages() {
      this.scrollToBottom();
    }
  },
  mounted() {
    this.focusInput();
  }
};
</script>

<template>
  <input ref="input" v-model="newMessage" @keyup.enter="sendMessage">
</template>

后端示例（Node.js + Socket.io）

如需完整功能，需配合后端代码：

const express = require('express');
const socketIo = require('socket.io');

const app = express();
const server = app.listen(3000);
const io = socketIo(server);

io.on('connection', (socket) => {
  socket.on('chatMessage', (message) => {
    io.emit('chatMessage', message); // 广播消息
  });
});