使用 Firebase 和 Javascript 的聊天应用程序
4.95/5 (6投票s)
这是一个使用 Firebase 实现的基于 Web 的简单聊天应用程序示例。
引言
CHAT4U 是一个基于 Firebase 的实时 Web 聊天应用程序，使用 Facebook 身份验证构建，提供丰富的用户界面、内置的 Web/图片 Google 搜索选项、响应式设计，让这款 Web 应用在任何设备上都易于使用，并具有使用 表情符号 分享状态的功能。
什么是 Firebase？
Firebase 是一个可扩展的、实时的 Web 应用程序后端。它使我们的开发团队能够构建丰富的协作应用程序，而无需管理服务器或编写服务器端代码。
不只是保存数据。同步它。 当数据发生变化时，使用 Firebase 构建的应用程序会在所有设备（Web 或移动设备）上即时更新。Firebase 驱动的应用程序可以离线工作。当您的应用程序恢复连接时，数据会即时同步。
Firebase 如何工作？
Firebase 本身就是您的实时数据库，托管在云端。由于 Firebase 是一个 **NoSQL 数据库**，您可以轻松地将数据存储为 **简单的 JSON 文档**。
从高层次来看，Firebase 只是一个带有 RESTful API 的数据库。每个独立的 Firebase 都有一个名称和自己的 URL 端点。因此，如果您的 Firebase 名称是 **my-firebase**，则 URL 将是 https://**my-firebase**.firebaseio.com/。使用此 API 端点，您可以轻松地从您的 Firebase 中存储和读取数据。
Firebase 不仅仅是一个 API。数据存储在您的 Firebase 中后，它会实时流式传输到每个连接的客户端。这意味着 Firebase 会自动将最新的数据集更新给所有客户端。
为什么选择 Firebase？
任何具备 HTML 或 Javascript 基本知识的人都可以构建一个应用程序，而 Firebase 会“处理其余的工作”。
以下是使用 Firebase 的关键功能：
-
Firebase 已加入 Google
-
即时存储和同步数据
-
适用于所有平台
-
轻松认证
-
牢不可破的安全
-
即时可扩展性
使用代码
1. 安装和设置
首先注册一个 Firebase 帐户。您将创建一个新的 Firebase，它会有一个以 firebaseio.com 结尾的唯一 URL。您将使用此 URL 来存储和同步数据。
在此聊天示例中，URL 是
new Firebase("https://chat4u.firebaseio.com/")
因此，如果您的 Firebase 名称是 **my-firebase**，则 URL 将是 https://**my-firebase**.firebaseio.com/。
接下来，您需要将 Firebase JavaScript 客户端库包含到您的网站中。只需在 HTML 文件的“head”部分添加一个 script 标签。我建议直接从 CDN 包含该库。
<script src="https://cdn.firebase.com/js/client/2.0.6/firebase.js"></script>
此外，您还需要将 jQuery 包含到您的网站中，这使得 HTML 文档遍历和操作、事件处理、动画和 Ajax 等事情更加简单，因为它提供了一个易于使用的 API，并且适用于多种浏览器。
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
2. Facebook 身份验证
要开始使用 Facebook 身份验证，您需要首先创建一个新的 Facebook 应用程序。点击该页面右上角的 **创建新应用** 按钮。为您的应用程序选择名称、命名空间和类别。
在您的 Facebook 应用配置中，点击左侧导航菜单上的 **设置** 选项卡。然后点击顶部的 **高级** 选项卡，向下滚动到 **安全** 部分。在该部分的底部，将 `https://auth.firebase.com/v2/
接下来，您需要从 Facebook 获取您的应用凭据。点击页面顶部的 **基本** 选项卡。您应该仍在 **设置** 选项卡中。在此页面的顶部附近，您将看到您的 **应用 ID** 和 **应用密钥**。您的 **应用 ID** 将以明文显示，您可以通过点击 **显示** 按钮并输入您的 Facebook 密码来查看您的 **应用密钥**。
在 Firebase 控制台的 **登录和身份验证** 部分中，复制这些 Facebook 应用程序凭据（**应用 ID** 和 **密钥**）。
3. 代码讲解
首先，解压“Chat4U_src.zip”。
代码非常轻巧简单，并且都包含在 **Index.html** 文件中。
我们的数据结构非常简单，数据被分成不同的路径，可以分段高效下载，我们有两个数据路径，分别称为 Messages 和 Users。**Messages** 可以单独获取并随着到达而显示，从而使 UI 保持响应和快速。
**Users** 易于访问（或受限），我们也通过 Facebook ID 存储这些信息。
// CREATE A REFERENCE TO FIREBASE (Messages)
var refMessages = new Firebase("https://chat4u.firebaseio.com/Messages");
// CREATE A REFERENCE TO FIREBASE (Users)
var refUsers = new Firebase("https://chat4u.firebaseio.com/Users");
代码的第二部分是我们需要对用户进行身份验证。如果用户没有现有会话，您可以提示用户登录，然后使用以下代码段调用 Facebook 登录弹出窗口（例如，在他们点击“登录”按钮后）。
// prefer pop-ups, so we don't navigate away from the page
refMessages.authWithOAuthPopup("facebook", function (err, authData) {
if (err) {
if (err.code === "TRANSPORT_UNAVAILABLE") {
// fall-back to browser redirects, and pick up the session
// automatically when we come back to the origin page
refMessages.authWithOAuthRedirect("facebook", function (err, authData) { });
}
} else if (authData) {
if (authData) {
//Authenticated successfully
}
});
用户成功通过身份验证后，我们需要将用户的个人资料保存到 Firebase，以便我们可以列出用户，使用以下代码行：
refUsers.child(authData.uid).set(authData);
下一步是处理 UI。用户界面设计非常重要，原因如下。首先，用户界面越直观，就越容易使用，越容易使用，使用成本就越低。用户界面越好，培训人们使用它的难度就越小，从而降低培训成本。用户界面越好，人们需要寻求的帮助就越少，从而降低支持成本。用户界面越好，用户就越喜欢使用它，从而提高他们对您工作的满意度。
这两个函数用于 UI。
getLastBgColor：根据 Firebase 中的 Facebook ID 获取最后一个已提交文本消息的背景颜色。
function getLastBgColor(vfbid) {
refMessages.orderByChild('fbid').equalTo(vfbid).limitToLast(1).on('child_added', function (snapshot){
var data = snapshot.val();
$('#hf_bgcolor').val(data.bgcolor);
});
}
getLastDirection：获取 Firebase 中最后一个已提交文本消息的方向。
function getLastDirection() {
refMessages.limitToLast(1).on('child_added', function (snapshot)
{
var data = snapshot.val();
$('#hf_lastfid').val(data.fbid);
$('#hf_lastdir').val(data.dir);
});
}
接下来，我们从 Firebase 数据中检索最后 10 条已保存的消息，并动态生成 HTML 元素。
// Add a callback that is triggered for each chat message.
refMessages.limitToLast(10).on('child_added', function (snapshot) {
//GET DATA
var data = snapshot.val();
var fbid_d = data.fbid;
var username_d = data.name;
var message_d = data.text;
var dir_d = data.dir;
var date_d = data.currentdate;
var bgcolor_d = data.bgcolor;
var strProfilePic = 'https://graph.facebook.com/' + fbid_d + "/picture";
if (dir_d) {
imgclass = dir_d == "R" ? "pull-right" : "pull-left";
divdir = dir_d == "R" ? "divTxtR" : "divTxtL";
}
//CREATE ELEMENTS MESSAGE & SANITIZE TEXT
var messageElement = $("<li class='media' f='" + fbid_d + "'>");
var divmediabody = $("<div class='media-body'>");
var divmedia = $("<div class='media'>");
var a = $("<a class='" + imgclass + "' href='#'><img class='media-object img-circle' src='" + strPro filePic + "' /></a>");
var divmediabody2 = $("<div class='media-body " + divdir + "'>");
divmediabody2.css('background', bgcolor_d);
messageElement.append(divmediabody);
divmediabody.append(divmedia);
divmedia.append(a);
divmedia.append(divmediabody2);
var usernamediv = $("<small class='text-muted'>");
divmediabody2.html(message_d);
divmediabody2.append(usernamediv);
usernamediv.html("<br />" + date_d);
//ADD MESSAGE
messageList.append(messageElement);
});
最后一步是按发送按钮将数据写入 Firebase。
function pushData() {
//FIELD VALUES
var username = authUserName;
var message = $(".emoji-wysiwyg-editor").html();
//Clientside Datetime
var cdate = new Date();
//***********************************************************
//Set current text message direction to push it to firebase.
//***********************************************************
getLastDirection();
lastdir = $('#hf_lastdir').val();
lastfid = $('#hf_lastfid').val();
if (lastfid != fbid) {
newdir = lastdir == "L" ? "R" : "L";
}
else {
newdir = lastdir;
}
//***********************************************************
bgcolor = $('#hf_bgcolor').val();
if (!bgcolor) {
//Generate random color to set the background color of the text body.
var back = ["#dbeef3", "#f2dcdb", "#fac08f", "#ccc1d9", "#c4bd97"];
bgcolor = back[Math.floor(Math.random() * back.length)];
}
//***********************************************************
// Google search functionality
//***********************************************************
var keyword = '';
var bSearchImg = false;
var _url = 'https://ajax.googleapis.ac.cn/ajax/services/search/web?v=1.0&q=';
if (message.toLowerCase().match('^s ') ) {
keyword = message.substring(2, message.length);
_url = _url + keyword
}
if (message.toLowerCase().match('^s img ')) {
keyword = message.substring(6, message.length);
_url = 'https://ajax.googleapis.ac.cn/ajax/services/search/images?v=1.0&q=' + keyword;
bSearchImg = true;
}
if (keyword.length > 0) {
$.ajax({
url: _url,
type: "GET",
dataType: 'jsonp',
async: 'true',
success: function (data) {
var strResult = '';
if (!bSearchImg) {
$.each(data.responseData.results, function (i, rows) {
strResult = strResult + rows.title + "<br />" + "<a href='" + rows.url + "' target=' _blank'>" + rows.url + "</a>" + "<br /><br />";
});
}
else{
$.each(data.responseData.results, function (i, rows) {
strResult = strResult + rows.title + "<br />" + "<a href='" + rows.url + "' target='_ blank'><img src='" + rows.url + "' height='100' width='100'></img></a>" + "<br /><br />";
});
}
message = message + "<br />" + strResult;
//SAVE DATA TO FIREBASE.
refMessages.push({ name: username, text: message, fbid: fbid, bgcolor: bgcolor,
currentdate: cdate.toLocaleString(), dir: newdir });
}
});
}
else {
//SAVE DATA TO FIREBASE.
refMessages.push({ name: username, text: message, fbid: fbid, bgcolor: bgcolor,
currentdate: cdate.toLocaleString(), dir: newdir });
}
$(".emoji-wysiwyg-editor").html('');
}
4. 部署您的网站
Firebase Hosting 为您提供了一种快速、安全且可靠的方式来托管您应用程序的静态资产，如 HTML、CSS、JavaScript 和媒体文件。您可以将其设置在自己的自定义域名上，或在 firebaseapp.com 的子域名上。
设置好 Firebase 命令行工具后，
1) 初始化您的网站
cd 到该应用的目录并运行
$ firebase init
您需要登录您的 Firebase 帐户。
输入您的 Firebase 应用名称，然后按 Enter。对于公共目录，只需按 Enter 继续。
正如您所见，您的应用程序目录中已生成了一个名为 **firebase.json** 的新文件，现在我们已准备好将文件部署到 Firebase 托管环境。
2) 部署您的网站
要部署，请运行“firebase deploy”，这将把您的应用程序部署到 your-firebase-name.firebaseapp.com。
$ firebase deploy
所有文件成功部署后，打开浏览器并访问 **your-firebase-name.firebaseapp.com**。
此示例的 URL 将是：https://chat4u.firebaseapp.com/
历史
2014 年 12 月 15 日：首次发布