() translation by (you can also view the original English article)
Im heutigen Tutorial werden wir Sie mit Firebase vertraut machen, indem wir eine einfache Chatroom-Anwendung erstellen, indem wir die Javascript-API von Firebase nutzen. Diese Anwendung bietet Ihnen die Bausteine, um erweiterte Echtzeitanwendungen für Ihre eigenen Projekte zu entwickeln.
Einstieg
Um Firebase zum Laufen zu bringen, müssen Sie ein kostenloses Entwicklerkonto erstellen, indem Sie die Website besuchen und sich registrieren. Sobald Sie sich erfolgreich registriert haben, leitet Firebase Sie zu Ihrem Konto-Dashboard weiter, wo Sie Zugriff auf alle Ihre Firebase-Datenspeicherorte und andere nützliche Funktionen haben. Im Moment sollten Sie jedoch den Firebase-Datenspeicherort mit dem Titel MEINE ERSTE APP auswählen. Sie können diese Anwendung jederzeit umbenennen oder eine neue erstellen.
Beim Erstellen des Firebase-Speicherorts wurde ihm ein eindeutiger Hostname zugewiesen. Dieser eindeutige Hostname ist sehr wichtig. denn hier werden auch Ihre Daten gelesen und geschrieben. Wir werden den Hostnamen später im Tutorial genauer besprechen, aber vorerst:
Beginnen wir mit dem Bauen
Der erste Punkt auf der Tagesordnung: Erstellen Sie eine neue HTML-Datei, die auf die Firebase-Client-, jQuery- und Bootstrap-CDNs verweist. Es ist ziemlich offensichtlich, dass wir auf das Firebase-CDN verweisen müssen. Jetzt ist es möglicherweise nicht so klar, warum wir sowohl auf jQuery als auch auf Bootstrap verweisen. Ich verwende sowohl jQuery als auch Bootstrap für eine schnelle Anwendungsentwicklung. Beide Bibliotheken ermöglichen es mir, Dinge sehr schnell zu erledigen, und sie erfordern nicht viel Handcodierung. Ich werde jedoch weder jQuery noch Bootstrap detailliert behandeln. Sie können also selbst mehr über diese JavaScript-Bibliotheken erfahren.
Der HTML
Das Markup, das das implementiert, was ich beschrieben habe, lautet wie folgt:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
6 |
<title>Firebase Chat Application</title> |
7 |
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
8 |
</head>
|
9 |
<body>
|
10 |
|
11 |
<script src="https://cdn.firebase.com/js/client/1.0.6/firebase.js"></script> |
12 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
13 |
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
14 |
</body>
|
15 |
</html>
|
Nachdem wir unsere HTML-Datei erstellt haben und sie auf die richtigen CDNs verweist, beginnen wir mit der Ausarbeitung des Restes unserer Anwendung.
Zunächst müssen wir bestimmen, welche wesentlichen Funktionen diese Anwendung benötigt. Es scheint, dass die meisten Anwendungen im Chatroom-Stil zwei Ähnlichkeiten aufweisen: ein Nachrichtenfeld zum Senden von Nachrichten an einen Server und einen Abschnitt, der mit Nachrichten von einem Server gefüllt wird. In unserem Fall wird dieser Server unser Firebase-Datenspeicherort sein.
Implementieren wir das Nachrichtenfeld zum Senden von Nachrichten an einen Server. Dazu müssen wir eine einfache Schnittstelle erstellen, die ein input-Feld und eine Senden-Schaltfläche enthält, die in form-Tags eingeschlossen sind. Da wir auf das Bootstrap-Stylesheet verweisen, können wir bequem einige vordefinierte Bootstrap-Stile verwenden, um die Schnittstelle zu erstellen. Wie ich bereits sagte, ist dies sehr praktisch und ermöglicht es uns, weniger Code von Hand zu schreiben.
Platzieren wir also zuerst ein div mit dem Klassenattribut-container direkt nach dem öffnenden body-Tag in der HTML-Datei. Dies ist eine Bootstrap-Funktion, die Breitenbeschränkungen und Auffüllungen für den Seiteninhalt bereitstellt. Fügen Sie innerhalb der Container-Tags einen Titel hinzu, der in H1-Tags eingeschlossen ist, damit wir der Anwendung einen beschreibenden Namen geben können. Mein Titel lautet "Firebase Chat Application". Fühlen Sie sich frei, Ihre eigene Kreativität beim Schreiben Ihres Titels einzusetzen.
Das Markup, das das implementiert, was ich oben beschrieben habe, sieht folgendermaßen aus:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
</div>
|
Darüber hinaus müssen wir ein div mit Klassenattributen hinzufügen: panel und panel-default. Ein Panel ist eine Bootstrap-Komponente, die eine einfache Box bereitstellt, die vier interne DIVs enthält: panel-heading, panel-title, panel-body und panel-footer. Wir werden keine panel-heading und panel-title verwenden, aber wir werden sowohl panel-body als auch panel-footer verwenden. Das panel-DIV wird als Hauptcontainer für den Chatroom-Client verwendet.
Das Markup, das das implementiert, was ich oben beschrieben habe, lautet wie folgt:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
|
4 |
<div class="panel panel-default"> |
5 |
<div class="panel-body"></div> |
6 |
<div class="panel-footer"></div> |
7 |
</div>
|
8 |
</div>
|
Im Moment werden wir nicht mit dem panel-body arbeiten. Wir müssen diesen Abschnitt jedoch später im Tutorial verwenden, um Nachrichten von unserem Datenspeicherort aus zu füllen.
Im Moment konzentrieren wir uns auf die Panel-Fußzeile div. Die Fußzeile des Bedienfelds enthält ein Eingabefeld, eine Schaltfläche zum Senden und eine Schaltfläche zum Zurücksetzen. Wir geben dem Eingabefeld eine Attribut-ID von comments und der Senden-Schaltfläche eine Attribut-ID von submit-btn. Diese beiden ID-Attribute sind sehr wichtig und werden später im Lernprogramm benötigt. Sie können die Attribut-IDs für die Formularelemente jederzeit ändern.
Das Markup, das das implementiert, was ich oben beschrieben habe, lautet wie folgt:
1 |
<div class="container"> |
2 |
<h1>Firebase Chat Application</h1> |
3 |
|
4 |
<div class="panel panel-default"> |
5 |
<div class="panel-body"></div> |
6 |
<div class="panel-footer"> |
7 |
|
8 |
<form role="form"> |
9 |
<div class="form-group"> |
10 |
<label for="comments">Please enter your comments here</label> |
11 |
<input class="form-control" id="comments" name="comments"> |
12 |
</div>
|
13 |
|
14 |
<button type="submit" id="submit-btn" name="submit-btn" |
15 |
class="btn btn-primary">Send Comments</button> |
16 |
|
17 |
<button type="reset" class="btn btn-default">Clear Comments</button> |
18 |
</form>
|
19 |
|
20 |
</div>
|
21 |
</div>
|
22 |
</div>
|
Implementieren wir nun das JavaScript, mit dem wir die Nachricht an den Datenspeicherort unserer Firebase senden können.
Das JavaScript
Zuerst müssen wir eine Reihe von script-Tags direkt über dem schließenden body-Tag in der HTML-Datei hinzufügen. Innerhalb der Skript-Tags müssen wir einen Verweis auf den Datenspeicherort unserer Firebase erstellen. Ohne diese Referenz können wir keine Daten an unseren Datenort schreiben. Dies kann erreicht werden, indem der Firebase-Konstruktor initialisiert und unser Datenspeicherort als Parameter übergeben wird. Denken Sie daran, dass der Firebase-Datenspeicherort beim Einrichten von Firebase (dem eindeutigen Hostnamen) erstellt wurde.
Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:
1 |
var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL"); |
Nach dem Initialisieren des Firebase-Referenzobjekts müssen wir einen Klickereignishandler an die Auswahl der Senden-Schaltfläche binden. Die Position dieses Selektors befindet sich in der Fußzeile des Bedienfelds. Außerdem müssen wir sicherstellen, dass der Ereignishandler-Rückruf eine return false-Anweisung als letzte Codezeile enthält. Dadurch wird sichergestellt, dass die Standardaktion zum Senden des Formulars nicht ausgeführt wird, und verhindert, dass das Ereignis den DOM-Baum in die Luft sprudelt. In einigen Fällen kann es jedoch vorkommen, dass Ereignisblasen auftreten.
Die beiden folgenden JavaScript-Snippets implementieren das oben Beschriebene:
1 |
$("#submit-btn").bind("click", function() { |
2 |
|
3 |
return false; |
4 |
});
|
1 |
$("#submit-btn").bind("click", function(event) { |
2 |
|
3 |
event.preventDefault(); |
4 |
event.stopPropagation(); |
5 |
});
|
Als Nächstes definieren wir eine Variable, die auf den Selektor des Kommentars verweist, und eine andere Variable, die die Leerzeichen am Anfang und Ende des Kommentarwerts entfernt.
Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var comment_value = $.trim(comment.val()); |
4 |
|
5 |
return false; |
6 |
});
|
Jetzt müssen wir die Methode bestimmen, die erforderlich ist, um diese Kommentare tatsächlich an unseren Datenspeicherort zu schreiben.
Daten in Firebase schreiben
Die Firebase-API bietet verschiedene Methoden zum Schreiben von Daten an einen Datenspeicherort. Im heutigen Tutorial konzentrieren wir uns jedoch auf die Verwendung der Methoden set() und push(). Lassen Sie uns kurz überprüfen, was jede dieser Methoden uns ermöglicht.
- Die
set()-Methode schreibt Daten in den Datenspeicherort und überschreibt alle Daten, die derzeit am Datenspeicherort gespeichert sind. - Die
push()-Methode schreibt Daten in den Datenspeicherort, indem automatisch ein neuer untergeordneter Speicherort mit einem eindeutigen Namen generiert wird. Zusätzlich wird diesem eindeutigen Namen ein Zeitstempel vorangestellt. Auf diese Weise können alle untergeordneten Standorte chronologisch sortiert werden.
Nach Überprüfung der Methoden set() und push(); Ich denke, es ist ziemlich offensichtlich, dass wir die push()-Methode in unserer Anwendung nutzen müssen. Andernfalls werden wir den neuesten Kommentar an unserem Datenstandort kontinuierlich überschreiben, und das würde keinen Spaß machen.
Kehren wir dazu zu dem JavaScript zurück, das wir zuvor zu unserer Seite hinzugefügt haben. Wir müssen jetzt den Kommentarwert an unseren Datenspeicherort verschieben. Denken Sie jetzt daran, dass es verschiedene push-Methoden gibt, mit denen wir Daten in verschiedenen Formaten wie Objekt, Array, Zeichenfolge, Zahl, Boolescher Wert oder Null übertragen können. Wir werden nur ein Objekt verwenden, das ein Schlüsselwertpaar aus einem Kommentar und einem Kommentarwert hat. Zusätzlich werden wir einen optionalen Rückruf anhängen, um nach Abschluss der push-Methoden zu feuern. Der Rückruf gibt bei einem Fehler ein Fehlerobjekt und bei Erfolg einen Nullwert zurück.
Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var commentValue = $.trim(comment.val()); |
4 |
|
5 |
fireBaseRef.push({comment: commentValue}, function(error) { |
6 |
if (error !== null) { |
7 |
alert('Unable to push comments to Firebase!'); |
8 |
}
|
9 |
});
|
10 |
|
11 |
return false; |
12 |
});
|
Fügen wir nun etwas hinzu, um sicherzustellen, dass die Chatroom-Benutzer keine leeren Nachrichten an unseren Datenspeicherort schreiben können. Dies kann leicht erreicht werden, indem eine einfache if else-Anweisung hinzugefügt wird, die die Länge des Kommentarwerts überprüft.
Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:
1 |
$("#submit-btn").bind("click", function() { |
2 |
var comment = $("#comments"); |
3 |
var commentValue = $.trim(comment.val()); |
4 |
|
5 |
if (commentValue.length === 0) { |
6 |
alert('Comments are required to continue!'); |
7 |
} else { |
8 |
_fireBaseRef.push({comment: commentValue}, function(error) { |
9 |
if (error !== null) { |
10 |
alert('Unable to push comments to Firebase!'); |
11 |
}
|
12 |
});
|
13 |
|
14 |
comment.val(""); |
15 |
}
|
16 |
|
17 |
return false; |
18 |
});
|
Großartig, wir haben den Abschnitt unserer Anwendung erfolgreich abgeschlossen, in dem Benutzer Daten an unseren Datenspeicherort schreiben können. Es fehlt uns jedoch immer noch die Funktionalität, die den Benutzern ein Echtzeit-Chat-Erlebnis bietet. Diese Art von Erfahrung erfordert die Fähigkeit, Daten von den untergeordneten Standorten innerhalb des Datenstandorts zu lesen.
Daten aus Firebase lesen
Wie bereits erwähnt, lesen die meisten Anwendungen im Chatroom-Stil Daten von einem Server und füllen dann einen Abschnitt der Benutzeroberfläche aus. Wir müssen dasselbe in unserer Anwendung tun, indem wir die Firebase-API nutzen.
Die Firebase-API bietet verschiedene Methoden zum Lesen von Daten von einem Datenspeicherort. Im heutigen Tutorial konzentrieren wir uns auf die Verwendung der on()-Methode.
Die on()-Methode enthält mehrere Argumente, die es wert sind, untersucht zu werden. Wir werden jedoch nur die ersten beiden Argumente behandeln: eventType und callback. Lassen Sie uns beide überprüfen.
Auswählen eines eventType
Das Argument "eventType" hat mehrere Optionen. Schauen wir uns die einzelnen an, damit wir feststellen können, welche unseren Anforderungen entsprechen.
- "
value" - wird einmal ausgelöst und liest alle Kommentare. Jedes Mal, wenn sich Kommentare ändern, werden sie erneut ausgelöst und alle Kommentare gelesen. - "
child_added" - wird einmal für jeden Kommentar sowie jedes Mal ausgelöst, wenn ein neuer Kommentar hinzugefügt wird. - "
child_removed" - wird jedes Mal ausgelöst, wenn ein Kommentar entfernt wird. - "
child_changed" - wird jedes Mal ausgelöst, wenn ein Kommentar geändert wird. - "
child_moved" - wird jedes Mal ausgelöst, wenn die Reihenfolge eines Kommentars geändert wird.
Nachdem wir uns die obigen Optionen angesehen haben, scheint es ziemlich klar zu sein, dass wir "child_added" als unseren "eventType" verwenden sollten. Dieser gerade Typ wird einmal für jeden Kommentar an unserem Datenstandort sowie jedes Mal ausgelöst, wenn ein neuer Kommentar hinzugefügt wird. Wenn ein neuer Kommentar hinzugefügt wird, wird nicht der gesamte Satz von Kommentaren an dieser Stelle zurückgegeben, sondern nur das zuletzt hinzugefügte untergeordnete Element. Genau das wollen wir! Es ist nicht erforderlich, den gesamten Satz von Kommentaren zurückzugeben, wenn ein neuer Kommentar hinzugefügt wird.
callback analysieren
Der "callback" für die on()-Methode stellt ein Element bereit, das Firebase als "Snapshot of Data" bezeichnet und das mehrere Mitgliedsfunktionen hat. Der Schwerpunkt liegt heute auf name() und val().
Die Mitgliedsfunktion name() gibt uns den eindeutigen Namen des "Schnappschusses von Daten". Wenn Sie sich früher erinnern, haben wir die push()-Funktion verwendet, um einen neuen Kommentar in unseren Datenspeicherort zu schreiben. Beim Aufruf von push() wurde ein neuer untergeordneter Speicherort mit einem eindeutigen Namen generiert. Dieser Name wird über die Rückruffunktion name() zurückgegeben.
Die Mitgliedsfunktion val() liefert uns die JavaScript-Objektdarstellung des "Snapshots von Daten" und mit diesem Snapshot können wir einen Kommentar von unserem Datenspeicherort abrufen. Wir müssen uns jedoch für einen Moment zurückziehen.
Zu Beginn dieses Tutorials haben wir das JavaScript implementiert, das zum Verschieben von Kommentaren an unseren Firebase-Speicherort erforderlich ist. Dazu haben wir ein Objekt mit einem Schlüsselwertpaar verschoben. In diesem Fall war der Schlüssel "comment" und der Wert war die Eingabe, die der Benutzer eingegeben hat. Wenn wir also einen Kommentar aus unserem "Snapshot of Data" extrahieren möchten, müssen wir den richtigen Datentyp erkennen. In diesem Fall handelt es sich um ein Objekt, sodass Sie entweder die Punktnotation oder die Klammernotation verwenden können, um auf die angegebene Eigenschaft zuzugreifen.
Beide unten aufgeführten JavaScript-Snippets implementieren das oben Beschriebene:
1 |
fireBaseRef.on('child_added', function(snapshot) { |
2 |
var uniqName = snapshot.name(); |
3 |
var comment = snapshot.val().comment; |
4 |
});
|
1 |
fireBaseRef.on('child_added', function(snapshot) { |
2 |
var uniqName = snapshot.name(); |
3 |
var comment = snapshot.val()["comment"]; |
4 |
});
|
Kommentare rendern
Als nächstes erstellen wir eine einfache und dennoch saubere Methode, um jeden Kommentar anzuzeigen. Dies kann leicht erreicht werden, indem jeder Kommentar in ein div eingeschlossen und jeder Kommentar mit seinem eindeutigen Namen gekennzeichnet wird. Normalerweise werden Kommentare mit dem Namen des Benutzers gekennzeichnet, der diesen Kommentar geschrieben hat. In unserem Fall handelt es sich um einen anonymen Chatroom-Client.
Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:
1 |
var commentsContainer = $('#comments-container'); |
2 |
|
3 |
$('<div/>', {class: 'comment-container'}) |
4 |
.html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment); |
Als nächstes müssen wir jeden Kommentar an den Container des Kommentars anhängen und die aktuelle vertikale Position der Container-Bildlaufleiste des Kommentars abrufen und zu dieser neuesten Position scrollen. Dadurch wird sichergestellt, dass allen Benutzern, die die Chat-Anwendung verwenden, jedes Mal, wenn ein Kommentar an Firebase gesendet wird, der neueste Kommentar angezeigt wird. All dies muss innerhalb des Rückrufs erfolgen.
Es sollte ungefähr so aussehen:
1 |
var commentsContainer = $('#comments-container'); |
2 |
|
3 |
$('<div/>', {class: 'comment-container'}) |
4 |
.html('<span class="label label-info">Comment ' + uniqName + '</span>' + comment) |
5 |
.appendTo(commentsContainer); |
6 |
|
7 |
commentsContainer.scrollTop(commentsContainer.prop('scrollHeight')); |
Wenden wir nun einige einfache CSS-Stile auf die DIVs an, die um jeden Kommentarblock gewickelt sind. Dadurch wird das Erscheinungsbild etwas attraktiver und benutzerfreundlicher. Diese Stile sollten innerhalb der Stil-Tags hinzugefügt werden, die sich im head-Bereich des HTML befinden.
Der Code, der das implementiert, was ich oben beschrieben habe, lautet wie folgt:
1 |
.container { |
2 |
max-width: 700px; |
3 |
}
|
4 |
|
5 |
#comments-container { |
6 |
border: 1px solid #d0d0d0; |
7 |
height: 400px; |
8 |
overflow-y: scroll; |
9 |
}
|
10 |
|
11 |
.comment-container { |
12 |
padding: 10px; |
13 |
margin:6px; |
14 |
background: #f5f5f5; |
15 |
font-size: 13px; |
16 |
-moz-border-radius: 5px; |
17 |
-webkit-border-radius: 5px; |
18 |
border-radius: 5px; |
19 |
}
|
20 |
|
21 |
.comment-container .label { |
22 |
margin-right: 20px; |
23 |
}
|
24 |
|
25 |
.comment-container:last-of-type { |
26 |
border-bottom: none; |
27 |
}
|
Ausführen der Anwendung
Es ist jetzt Zeit, unsere Anwendung auszuführen. Beginnen wir damit, zwei Instanzen unseres bevorzugten, modernen Browsers zu öffnen und nebeneinander auf unserem Desktop zu platzieren. Als Nächstes navigieren wir in beiden Browsern zum Speicherort unserer von uns erstellten Datei. Testen Sie es, indem Sie ein paar Kommentare schreiben und genießen Sie die Magie von Firebase.
Es ist unglaublich, dass nur ein paar Codezeilen eine so leistungsstarke Anwendung erzeugen können. Sie können dieses Snippet jederzeit bearbeiten, um die gewünschten Ergebnisse zu erzielen.
Schauen Sie sich die Online-Demo an, um sie in Aktion zu sehen. Unten finden Sie den vollständigen Quellcode für die gesamte Chatroom-Anwendung:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset="utf-8"> |
5 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
6 |
<title>Firebase Chat Application</title> |
7 |
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
8 |
|
9 |
<style>
|
10 |
.container { |
11 |
max-width: 700px; |
12 |
}
|
13 |
|
14 |
#comments-container { |
15 |
border: 1px solid #d0d0d0; |
16 |
height: 400px; |
17 |
overflow-y: scroll; |
18 |
}
|
19 |
|
20 |
.comment-container { |
21 |
padding: 10px; |
22 |
margin:6px; |
23 |
background: #f5f5f5; |
24 |
font-size: 13px; |
25 |
-moz-border-radius: 5px; |
26 |
-webkit-border-radius: 5px; |
27 |
border-radius: 5px; |
28 |
}
|
29 |
|
30 |
.comment-container .label { |
31 |
margin-right: 20px; |
32 |
}
|
33 |
|
34 |
.comment-container:last-of-type { |
35 |
border-bottom: none; |
36 |
}
|
37 |
</style>
|
38 |
</head>
|
39 |
<body>
|
40 |
|
41 |
<div class="container"> |
42 |
|
43 |
<h1>Firebase Chat Application</h1> |
44 |
|
45 |
<div class="panel panel-default"> |
46 |
|
47 |
<div class="panel-body"> |
48 |
<div id="comments-container"></div> |
49 |
</div>
|
50 |
|
51 |
<div class="panel-footer"> |
52 |
|
53 |
<form role="form"> |
54 |
<div class="form-group"> |
55 |
<label for="comments">Please enter your comments here</label> |
56 |
<input class="form-control" id="comments" name="comments"> |
57 |
</div>
|
58 |
|
59 |
<button type="submit" id="submit-btn" name="submit-btn" |
60 |
class="btn btn-success">Send Comments</button> |
61 |
|
62 |
<button type="reset" class="btn btn-danger">Clear Comments</button> |
63 |
</form>
|
64 |
|
65 |
</div>
|
66 |
</div>
|
67 |
</div>
|
68 |
|
69 |
<script src="http://cdn.firebase.com/js/client/1.0.6/firebase.js"></script> |
70 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
71 |
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> |
72 |
<script>
|
73 |
|
74 |
var fireBaseRef = new Firebase("YOUR FIREBASE DATA URL"); |
75 |
|
76 |
$("#submit-btn").bind("click", function() { |
77 |
var comment = $("#comments"); |
78 |
var commentValue = $.trim(comment.val()); |
79 |
|
80 |
if (commentValue.length === 0) { |
81 |
alert('Comments are required to continue!'); |
82 |
} else { |
83 |
fireBaseRef.push({comment: commentValue}, function(error) { |
84 |
if (error !== null) { |
85 |
alert('Unable to push comments to Firebase!'); |
86 |
}
|
87 |
});
|
88 |
|
89 |
comment.val(""); |
90 |
}
|
91 |
|
92 |
return false; |
93 |
});
|
94 |
|
95 |
fireBaseRef.on('child_added', function(snapshot) { |
96 |
var uniqName = snapshot.name(); |
97 |
var comment = snapshot.val().comment; |
98 |
var commentsContainer = $('#comments-container'); |
99 |
|
100 |
$('<div/>', {class: 'comment-container'}) |
101 |
.html('<span class="label label-default">Comment ' |
102 |
+ uniqName + '</span>' + comment).appendTo(commentsContainer); |
103 |
|
104 |
commentsContainer.scrollTop(commentsContainer.prop('scrollHeight')); |
105 |
});
|
106 |
|
107 |
</script>
|
108 |
</body>
|
109 |
</html>
|
Zusammenfassung
Im heutigen Tutorial haben wir den gesamten Prozess der Implementierung einer einfachen Chatroom-Anwendung mithilfe der JavaScript-API von Firebase durchgearbeitet. Auf diese Weise konnten wir die Leistungsfähigkeit von Firebase erfahren und eine Anerkennung für seine Bequemlichkeit gewinnen. Im Folgenden sind einige der wichtigsten Punkte aufgeführt, auf die wir heute gestoßen sind:
- Verweisen auf einen Firebase-Datenspeicherort durch Initialisieren eines Firebase-Konstruktors.
- Schreiben von Daten in Firebase mithilfe der
push-Methode. - Lesen von Daten aus Firebase mithilfe der
on-Methode mit dem Ereignistyp "child_added".
Ich hoffe, dieses Tutorial hat Ihnen den Ausgangspunkt gegeben, den Sie benötigen, um mit Firebase weiter voranzukommen. Wenn Sie Fragen oder Kommentare haben, können Sie diese gerne unten hinterlassen. Nochmals vielen Dank für Ihre Zeit und erkunden Sie die unendlichen Möglichkeiten der Firebase-API.
Ressourcen
