Cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan tolakan mesej masa nyata

Cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan push mesej masa nyata

Pengenalan:
Dengan perkembangan Internet, maklumat hal ehwal semasa menjadi semakin penting untuk pemerolehan maklumat dan komunikasi orang ramai . Aplikasi push mesej masa nyata boleh membantu pengguna mendapatkan maklumat hal ehwal semasa terkini dengan mudah. Artikel ini akan memperkenalkan cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita tolak mesej masa nyata dan memberikan contoh kod khusus.

1. Persediaan
   Pertama, anda perlu memasang Vue CLI dan mencipta projek Vue baharu. Jalankan arahan berikut dalam terminal:

npm install -g vue-cli
vue create news-app

Setelah pemasangan selesai, pergi ke direktori projek dan mulakan pelayan pembangunan:

cd news-app
npm run serve

2. Konfigurasikan Projek Firebase
   Pertama, kita perlu mencipta projek Firebase dan dayakan Firestore pangkalan data. Dalam konsol Firebase, pilih "Buat projek baharu" dan ikut arahan untuk menyelesaikan penciptaan projek.

Pada halaman gambaran keseluruhan projek, klik "Tambahkan Firebase pada aplikasi web anda" dan ikut arahan untuk menyalin maklumat konfigurasi yang dijana. Simpan maklumat ini pada fail .env dalam projek anda seperti ini:

VUE_APP_FIREBASE_API_KEY=your_api_key
VUE_APP_FIREBASE_AUTH_DOMAIN=your_auth_domain
VUE_APP_FIREBASE_DATABASE_URL=your_database_url
VUE_APP_FIREBASE_PROJECT_ID=your_project_id
VUE_APP_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VUE_APP_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VUE_APP_FIREBASE_APP_ID=your_app_id

3. Pasang SDK Firebase
   Seterusnya, kami perlu memasang dan mengkonfigurasi SDK Firebase dalam projek Vue. Jalankan arahan berikut dalam terminal:

npm install firebase

Buat fail yang dipanggil firebase.js dan tambah kod berikut pada fail: firebase.js的文件，并将以下代码添加到文件中：

import firebase from 'firebase/app'
import 'firebase/firestore'

const config = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.VUE_APP_FIREBASE_APP_ID
}

firebase.initializeApp(config)

export const db = firebase.firestore()

4. 创建消息推送组件
   现在，我们可以创建一个接收实时消息推送的组件。在Vue项目中创建一个名为NewsFeed.vue的组件，并将以下代码添加到文件中：

<template>
  <div class="news-feed">
    <h2>时事资讯</h2>
    <ul>
      <li v-for="(news, index) in newsList" :key="index">{{ news.content }}</li>
    </ul>
  </div>
</template>

<script>
import { db } from '@/firebase'

export default {
  data() {
    return {
      newsList: []
    }
  },
  mounted() {
    db.collection('news').orderBy('timestamp').onSnapshot(snapshot => {
      this.newsList = snapshot.docChanges().map(change => change.doc.data())
    })
  }
}
</script>

<style scoped>
.news-feed {
  margin-top: 20px;
}
</style>

在上面的代码中，我们使用Firestore的onSnapshot方法来监听news集合的变化。通过snapshot.docChanges()方法获取最新的消息推送，并将其更新到newsList数组中。

5. 使用消息推送组件
   最后，我们需要在Vue项目中使用创建的消息推送组件。打开App.vue

   <template>
     <div id="app">
       <news-feed></news-feed>
     </div>
   </template>
   
   <script>
   import NewsFeed from './components/NewsFeed.vue'
   
   export default {
     name: 'App',
     components: {
       NewsFeed
     }
   }
   </script>

   Salin selepas log masuk
   Buat mesej Tolak komponen
   Kini, kami boleh mencipta komponen yang menerima mesej tolak dalam masa nyata. Buat komponen bernama NewsFeed.vue dalam projek Vue anda dan tambahkan kod berikut pada fail:
   rrreee

   Dalam kod di atas, kami menggunakan kaedah onSnapshot Firestore. untuk memantau perubahan dalam koleksi berita. Dapatkan tolak berita terkini melalui kaedah snapshot.docChanges() dan kemas kini kepada tatasusunan newsList.
   

   Gunakan komponen tolak mesej🎜Akhir sekali, kita perlu menggunakan komponen tolak mesej yang dicipta dalam projek Vue. Buka fail App.vue dan tambahkan kod berikut pada fail: 🎜🎜rrreee🎜Kini, apl surat berita kami sudah lengkap! Mulakan pelayan pembangunan dan buka apl dalam penyemak imbas anda untuk mendapatkan berita terkini dalam masa nyata. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan push mesej masa nyata. Dengan menggunakan pangkalan data Firestore Firebase dan ciri pengikatan data responsif Vue, kami boleh melaksanakan fungsi push mesej masa nyata dengan mudah. Saya harap artikel ini membantu anda memahami cara menggunakan Vue dan Firebase untuk membina aplikasi masa nyata. 🎜

   Atas ialah kandungan terperinci Cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan tolakan mesej masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!