Cara menggunakan Vue dan Firebase Cloud Firestore untuk melaksanakan aplikasi surat berita dengan tolakan mesej masa nyata-View.js-php.cn

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

王林

Lepaskan： 2023-09-13 08:12:29

asal

1254 orang telah melayarinya

如何利用Vue和Firebase Cloud Firestore实现实时消息推送的时事通讯应用

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.

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

Salin selepas log masuk

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

cd news-app
npm run serve

Salin selepas log masuk

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

Salin selepas log masuk

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

npm install firebase

Salin selepas log masuk

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()

Salin selepas log masuk

创建消息推送组件
现在，我们可以创建一个接收实时消息推送的组件。在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>

Salin selepas log masuk

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

使用消息推送组件
最后，我们需要在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
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.
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!