Firebase是一个强大的后端服务平台，它提供了各种各样的功能，比如身份验证，实时数据库，云存储等等。它也拥有最好的JS SDK之一，可以轻松集成到任何前端应用程序中。本文将介绍Firebase的npm包firebase-2，它是Firebase 2.x的官方JavaScript库。我们将深入学习如何使用该包并构建一个简单的实时聊天应用。
基础准备工作
要开始使用Firebase-2，我们需要准备一些基本的工具和环境：
- 具有npm的电脑
- 创建空白目录
- 在终端中转到该目录并执行以下命令以初始化npm：
npm init -y
- 安装firebase-2包：
npm install firebase@2.4.2 --save
准备工作完成后，让我们开始实际编码。
初始化Firebase
首先，我们需要从Firebase控制台中获取我们的应用程序的凭据。我们将使用这些凭据初始化Firebase SDK。
打开Firebase控制台并选择您的应用程序。单击“添加Firebase到您的Web应用程序”按钮。
复制
config对象
- 创建一个名为“firebase.js”的新文件并将以下代码添加到其中：
-- -------------------- ---- ------- ------ -------- ---- ----------- ----- -------------- - - ------- --------------- ----------- ------------------- ------------ -------------------- ---------- ------------------ -------------- ---------------------- ------------------ --------------------------- ------ -------------- -------------- ---------------------- -- --------------------------------------- ------ ------- ---------
将“your_xxx”替换为您从控制台复制的值。
实时聊天应用程序
我们将构建一个实时聊天应用程序，让我们一个组成部分一个组成部分地实现它。
身份验证
Firebase具有内置的身份验证模块，我们将使用它来支持聊天应用程序。
- 使用以下命令安装身份验证模块：
npm install firebase@2.4.2 --save
- 创建一个名为“auth.js”的新文件，并将以下代码添加到其中：
import firebase from "./firebase"; const auth = firebase.auth(); export default auth;
聊天室
我们将创建一个名为“Chatroom”的类来表示聊天室。该类将处理与Firebase实时数据库的通信以及将新消息添加到聊天记录中。
- 创建名为“chatroom.js”的新文件，并将以下代码添加到其中：
-- -------------------- ---- -------
------ -------- ---- -------------
----- -------- -
----------------- -
--------- - -----
-------- - -------------------------------------------------
--------- - -----
------------- - ---
-
--- ---------- -
---------- - -----
-------------------
-
--- ------ -
------ -----------
-
--------------------- -
-------------------- ---------- -- -
------------- - -------------- -- ---
------------------------------- -- -
------------------
---
---
-
------------------- -
----- --- - --- -------
----- ------- - -
--------
---------- --------------
----- ----------------
--
-----------------------------
-
-
------ ------- ---------我们的Chatroom类具有以下功能：
- 构造器需要“room”参数。此参数表示聊天室的名称。
- “user”属性将启用我们的“getMessages”方法，以便我们可以监听并显示所有聊天记录，而不仅仅是当前用户的聊天记录。
- “getMessages”方法会从Firebase数据库中获得所有聊天记录。每次新消息发生时，我们需要调用这个方法来更新UI。这是通过“callback”函数来完成的，该函数将在每次添加新消息时被调用。
- “addMessage”方法可以将新消息添加到Firebase数据库中。
聊天室UI
现在我们已经创建了与Firebase数据库交互的核心部分，我们将创建一个用户界面以显示聊天记录和消息输入框。我们将使用React和Bootstrap来创建此用户界面。
- 使用以下命令安装React和Bootstrap：
npm install react bootstrap react-dom --save
- 在空白目录中创建一个名为“index.html”的新文件，并将以下内容添加到其中：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
-----
---------------
---------------------------- ------------------ -----------------
--
----- ---------------------------- ----------------- --
-----
----------------
-------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
-----------------------
--
--------------- ------------
-------
------
---- ----------------
------- -------------------------
-------
-------此HTML文件将包含我们的React应用程序，并且引用了Bootstrap 4。
- 创建名为“App.js”的新文件，并将以下代码添加到其中：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ---- ---- ---------
------ -------- ---- -------------
------ - ------- ----- ---------- - ---- ------------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
------ ---
--------- ---
----- -----
--------- -----
--------- ---
-------- ---
--
-
------------------- -
------------------------------ -- -
-- ------ -
--------------- ---- ---
----------------------------
-
---
-
-------- -
---------------------- -- -
--------------- ----- ---- ---
---
-
----------------- -
----- -------- - --- ---------------
------------- - ----------------
------------------------------ -- -
--------------- --------- ------------------------ -------- ---
---
--------------- --------- --------- -- ---
-
------------- -
---------------------------------------------------
--------------- -------- -- ---
-
---------------- -
------ --------------------------------- -- -
---- ------------------------
----------------------- ---------
-----------------
--- --
------
---
-
-------- -
------ -
---- ----------------------
---------------- - -
-----
---- ----------------
---- ---------------------
------------ ---------
------
---- ---------------------
------- ---------------- ----------- -- ---------------
------
---------
------
------
---- ----------------
---- ---------------------
--------------
----
--- ----------- -- -----------------------------
-------
-----
--- ----------- -- ---------------------------------------
-----
------
---- ---------------------
---- -------- ------- -------- --------- ------ ---
-----------------------
------
----------- -----------------
-------------
-----------
--------------------------
----------------- --
--------------- -------- ------------------ --
-
---------------------
--
-------------------
-------
---------------------------
----------- -- -------------------
-
----
---------
--------------------
-------------
------
------
------
- - -
---- ----------------
---- ----------------------
------------ ---------
------
----------- ---------------------------
----------------- --------------------
-------------
------------
------------------------
----------------- --
--------------- ------ ------------------ --
-
------------------ ------
--
-------------
----------- ------------------------------
---------------------------------
-------------
---------------
---------------------------
----------------- --
--------------- --------- ------------------ --
-
----------------------
--
-------------
-------
-----------------
----------- --
----
----------------------------
-----------------
-------------------
-
-------------- -- ---------------------
-
-
-----
---------
-------
------
------
--
------
--
-
-
------ ------- ----React应用程序代表聊天应用程序的UI。我们的应用程序具有以下功能：
- 组件加载时，我们使用
auth.onAuthStateChanged来监听用户登录/注销事件。如果用户登录，则此函数将为当前用户设置聊天室。 logout函数用于注销当前用户并重置UI。setChatroom函数用于设置聊天室和重新绑定消息记录列表。每当发生新消息时，我们会调用此函数。sendMessage函数用于向聊天记录中添加新消息。renderMessages函数用于渲染聊天记录。- 我们的UI使用React Bootstrap创建。
启动React应用程序
在努力编写所有代码时，我们可能已经忘记了我们如何启动我们的React应用程序
- 创建名为“index.js”的新文件，并将以下代码添加到其中：
import React from "react";
import { render } from "react-dom";
import App from "./App";
render(<App />, document.getElementById("root"));- 使用以下命令在终端中打包我们的应用程序：
npm install webpack webpack-cli --save-dev
- 创建一个名为“webpack.config.js”的新文件，并将以下代码添加到其中：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -------------
----- --------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
--
--
--
--
--这将告诉webpack如何打包我们的应用程序。
- 使用以下命令运行我们的应用程序：
npx webpack-dev-server --entry ./index.js --output-filename bundle.js --mode development --open --watch-content-base --content-base ./
完成后，打开浏览器并转到http://localhost:8080/即可看到我们的实时聊天室应用程序正在运行。
指导意义
在本文中，我们学习了如何使用npm包firebase-2并构建了一个实时聊天室应用程序。关键点包括：
- 初始化Firebase SDK并准备 firebase-2 npm包。
- 导入所需的Firebase模块来与实时数据库交互。
- 利用内置Firebase身份验证模块支持用户登录。
- 创建一个React应用程序来负责UI，并使用Bootstrap 4进行样式。
在掌握了这些功能之后，您可以深入研究Firebase Document，以了解其他功能，例如Firestore，云存储，云函数等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7f81e8991b448d90f6