Vue.js 实现聊天

Vue.js 实现聊天功能

使用 Vue.js 和 WebSocket 实现实时聊天

安装必要的依赖：

npm install vue-socket.io socket.io-client

创建一个 Vue 组件用于聊天界面：

<template>
  <div>
    <div v-for="message in messages" :key="message.id">
      {{ message.user }}: {{ message.text }}
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" />
  </div>
</template>

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

export default {
  data() {
    return {
      messages: [],
      newMessage: '',
      socket: null
    }
  },
  created() {
    this.socket = io('http://localhost:3000')
    this.socket.on('chat message', (msg) => {
      this.messages.push(msg)
    })
  },
  methods: {
    sendMessage() {
      this.socket.emit('chat message', {
        user: 'You',
        text: this.newMessage
      })
      this.newMessage = ''
    }
  }
}
</script>

使用 Firebase 实现云端聊天

安装 Firebase：

npm install firebase

配置 Firebase 并创建聊天组件：

<template>
  <div>
    <div v-for="message in messages" :key="message.id">
      {{ message.user }}: {{ message.text }}
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" />
  </div>
</template>

<script>
import { initializeApp } from 'firebase/app'
import { getDatabase, ref, push, onValue } from 'firebase/database'

const firebaseConfig = {
  // 你的Firebase配置
}

const app = initializeApp(firebaseConfig)
const db = getDatabase(app)

export default {
  data() {
    return {
      messages: [],
      newMessage: ''
    }
  },
  created() {
    const messagesRef = ref(db, 'messages')
    onValue(messagesRef, (snapshot) => {
      this.messages = []
      snapshot.forEach((childSnapshot) => {
        this.messages.push(childSnapshot.val())
      })
    })
  },
  methods: {
    sendMessage() {
      push(ref(db, 'messages'), {
        user: 'You',
        text: this.newMessage,
        timestamp: Date.now()
      })
      this.newMessage = ''
    }
  }
}
</script>

使用 Vuex 管理聊天状态

创建 Vuex store：

import { createStore } from 'vuex'

export default createStore({
  state: {
    messages: []
  },
  mutations: {
    ADD_MESSAGE(state, message) {
      state.messages.push(message)
    }
  },
  actions: {
    addMessage({ commit }, message) {
      commit('ADD_MESSAGE', message)
    }
  }
})

在组件中使用：

<template>
  <div>
    <div v-for="message in $store.state.messages" :key="message.id">
      {{ message.user }}: {{ message.text }}
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      newMessage: ''
    }
  },
  methods: {
    sendMessage() {
      this.$store.dispatch('addMessage', {
        user: 'You',
        text: this.newMessage
      })
      this.newMessage = ''
    }
  }
}
</script>

样式优化

添加基础样式：

.chat-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.message {
  margin: 10px 0;
  padding: 8px;
  border-radius: 4px;
  background: #f0f0f0;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}