Vue 및 Firebase Cloud Firestore를 사용하여 실시간 메시지 푸시로 뉴스레터 애플리케이션을 구현하는 방법-View.js-php.cn

Vue 및 Firebase Cloud Firestore를 사용하여 실시간 메시지 푸시로 뉴스레터 애플리케이션을 구현하는 방법

王林

풀어 주다： 2023-09-13 08:12:29

원래의

1305명이 탐색했습니다.

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

Vue 및 Firebase Cloud Firestore를 사용하여 실시간 메시지 푸시로 뉴스레터 애플리케이션을 구현하는 방법

소개:
인터넷이 발달하면서 시사 정보는 사람들의 정보 획득과 의사소통에 점점 더 중요해졌습니다. . 실시간 메시지 푸시 애플리케이션을 통해 사용자는 최신 시사 정보를 쉽게 얻을 수 있습니다. 이 문서에서는 Vue 및 Firebase Cloud Firestore를 사용하여 실시간 메시지 푸시 뉴스레터 애플리케이션을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

준비
먼저 Vue CLI를 설치하고 새로운 Vue 프로젝트를 생성해야 합니다. 터미널에서 다음 명령을 실행합니다.

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

로그인 후 복사

설치가 완료되면 프로젝트 디렉터리로 이동하여 개발 서버를 시작합니다.

cd news-app
npm run serve

로그인 후 복사

Firebase 프로젝트 구성
먼저 Firebase 프로젝트를 만들고 Firestore를 활성화해야 합니다. 데이터 베이스. Firebase 콘솔에서 '새 프로젝트 만들기'를 선택하고 안내에 따라 프로젝트 만들기를 완료하세요.

프로젝트 개요 페이지에서 '웹 애플리케이션에 Firebase 추가'를 클릭하고 지침에 따라 생성된 구성 정보를 복사하세요. 이 정보를 다음과 같이 프로젝트의 .env 파일에 저장합니다.

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

로그인 후 복사

Firebase SDK 설치
다음으로 Vue 프로젝트에 Firebase SDK를 설치하고 구성해야 합니다. 터미널에서 다음 명령을 실행합니다.

npm install firebase

로그인 후 복사

firebase.js라는 파일을 생성하고 파일에 다음 코드를 추가합니다. 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()

로그인 후 복사

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

使用消息推送组件
最后，我们需要在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>
```
로그인 후 복사
이제 실시간으로 푸시 메시지를 수신하는 컴포넌트를 만들 수 있습니다. Vue 프로젝트에 NewsFeed.vue라는 구성 요소를 만들고 파일에 다음 코드를 추가합니다.
rrreee
위 코드에서는 Firestore의 onSnapshot 코드> 메서드를 사용합니다. 뉴스 컬렉션의 변경 사항을 모니터링합니다. snapshot.docChanges() 메서드를 통해 최신 뉴스 푸시를 받고 newsList 배열로 업데이트하세요.
위 내용은 Vue 및 Firebase Cloud Firestore를 사용하여 실시간 메시지 푸시로 뉴스레터 애플리케이션을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!