Share
In dem heutigen Tutorial werden wir Sie mit Firebase vertraut machen, indem Sie eine einfache Chatroom-Anwendung erstellen, indem Sie die Javascript-API von Firebase verwenden. Diese Anwendung stellt Ihnen die Bausteine zur Verfügung, um in Ihren eigenen Projekten fortschrittlichere Echtzeitanwendungen zu entwickeln.
Um Firebase zum Laufen zu bringen, müssen Sie einen kostenlosen Entwicklerkonto erstellen, indem Sie deren Website besuchen und sich registrieren. Nach erfolgreicher Registrierung leitet Firebase Sie zu Ihrem Konto-Dashboard weiter, wo Sie Zugriff auf alle Firebase-Datenspeicherorte und andere nützliche Funktionen haben. Jetzt sollten Sie jedoch den Firebase-Datenpfad mit dem Titel auswählen, MEINE ERSTE APP. Sie können diese Anwendung umbenennen oder eine neue erstellen.
Als der Firebase-Datenstandort erstellt wurde, wurde ihm ein eindeutiger Name zugewiesen Hostname. Dieser eindeutige Hostname ist sehr wichtig. denn hier werden Ihre Daten auch gelesen und geschrieben. Wir werden den Hostnamen ausführlicher besprechen, später im Tutorial, aber vorerst:
Der erste Punkt auf der Tagesordnung: Erstellen Sie eine neue HTML-Datei, die auf die Firebase-Client-, jQuery- und Bootstrap-CDNs verweist. Es liegt auf der Hand, dass wir auf das Firebase-CDN verweisen müssen. Nun ist es vielleicht nicht so klar, warum wir sowohl auf jQuery als auch auf Bootstrap verweisen. Ich verwende sowohl jQuery als auch Bootstrap, um eine schnelle Anwendungsentwicklung zu ermöglichen. Beide Bibliotheken erlauben es mir, sehr schnell Dinge zu tun, und sie erfordern nicht viel Handcodierung. Ich werde jedoch weder jQuery noch Bootstrap ausführlich behandeln. Erfahren Sie mehr über diese JavaScript-Bibliotheken auf eigene Faust.
Das Markup, das das, was ich beschrieben habe, implementiert, lautet wie folgt:
Firebase Chat-Anwendung
Nachdem wir nun unsere HTML-Datei erstellt haben und auf die richtigen CDNs verweisen, beginnen wir damit, den Rest unserer Anwendung auszuarbeiten.
Zuerst müssen wir feststellen, welche wesentlichen Funktionen diese Anwendung benötigt. Es scheint, dass die meisten Chatroom-Anwendungen zwei Ähnlichkeiten aufweisen: ein Meldungsfeld 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-Datenstandort sein.
Implementieren Sie das Meldungsfeld, um Nachrichten vorab an einen Server zu senden. Dazu müssen wir eine einfache Benutzeroberfläche erstellen, die eine Eingang Feld und a einreichen Taste innerhalb eingewickelt bilden Stichworte. Da wir auf das Bootstrap-Stylesheet verweisen, können Sie die vordefinierte Bootstrap-Formatvorlagen zum Erstellen der Schnittstelle verwenden. Wie ich bereits gesagt habe, ist dies sehr bequem und erlaubt uns, weniger Code von Hand zu schreiben.
Lasst uns zuerst einen Platz einnehmen div mit dem Klassenattribut Container direkt nach der eröffnung Karosserie Tag innerhalb der HTML-Datei. Dies ist eine Bootstrap-Funktion, die Breitenbeschränkungen und Füllungen für den Seiteninhalt bereitstellt. Fügen Sie innerhalb der Container-Tags einen eingebetteten Titel hinzu H1 Tags, 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 zu verwenden, wenn Sie Ihren Titel schreiben.
Das Markup, das das oben beschriebene implementiert, sieht folgendermaßen aus:
Firebase Chat-Anwendung
Zusätzlich müssen wir noch eine hinzufügen div mit Klassenattributen: Panel und Panel-Standard. Ein Panel ist eine Bootstrap-Komponente, die eine einfache Box mit vier inneren DIVs enthält: Panel-Überschrift, Panel-Titel, Panel-Körper, und Panel-Fußzeile standardmäßig. Wir werden nicht verwenden Panel-Überschrift und Panel-Titel aber wir werden beide verwenden Panel-Körper und Panel-Fußzeile. Das Panel DIV wird als Hauptcontainer für den Chatroom-Client verwendet.
Das Markup, das das, was ich oben beschrieben habe, implementiert, lautet wie folgt:
Firebase Chat-Anwendung
Im Moment arbeiten wir nicht mit der Panel-Körper. Wir müssen diesen Abschnitt jedoch später im Lernprogramm verwenden, um Nachrichten aus unserem Datenverzeichnis auszufü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 Bemerkungen und der Submit-Button eine Attribut-ID Submit-Btn. Beide ID-Attribute sind sehr wichtig und werden später im Lernprogramm benötigt. Sie können die Attribut-IDs für die Formularelemente ändern.
Das Markup, das das, was ich oben beschrieben habe, implementiert, lautet wie folgt:
Firebase Chat-Anwendung
Lassen Sie uns nun das JavaScript implementieren, das es uns ermöglicht, die Nachricht an den Speicherort unserer Firebase zu senden.
Zuerst müssen wir eine Reihe von hinzufügen Skript Tags direkt über dem Abschluss Karosserie Tag innerhalb der HTML-Datei. Innerhalb der Skript-Tags müssen wir einen Verweis auf den Datenort unserer Firebase erstellen. Ohne diese Referenz können wir keine Daten in unseren Datenort schreiben. Dies kann erreicht werden, indem der Firebase-Konstruktor initialisiert und unsere Datenposition als Parameter übergeben wird. Denken Sie daran, dass der Firebase-Datenpfad beim Einrichten von Firebase (der eindeutige Hostname) erstellt wurde..
Der Code, der das, was ich oben beschrieben habe, implementiert, lautet wie folgt:
Accentsconagua
var fireBaseRef = new Firebase ("URL der URL für Ihre FIREBASE-Daten"); Nach der Initialisierung des Firebase-Referenzobjekts müssen wir einen Click-Ereignishandler an die Schaltfläche zum Senden der Schaltfläche binden. Die Position dieses Wählers befindet sich in der Fußzeile des Bedienfelds. Außerdem müssen wir sicherstellen, dass der Callback des Ereignishandlers eine enthält falsch zurückgeben Anweisung als letzte Codezeile. Dadurch wird sichergestellt, dass die Standardaktion zum Senden des Formulars nicht ausgeführt wird, und verhindert, dass das Ereignis die DOM-Struktur aufbläht. In einigen Fällen möchten Sie jedoch, dass Ereignisblubbern auftritt.
Die beiden folgenden JavaScript-Ausschnitte implementieren, was oben beschrieben wurde:
$ ("# submit-btn"). bind ("click", function () return false;); $ ("# submit-btn"). bind ("click", function (event) event.preventDefault (); event.stopPropagation ();); Als Nächstes definieren wir eine Variable, die auf den Selektor des Kommentars verweist, und eine weitere Variable, die die Leerzeichen am Anfang und am Ende des Kommentarwerts entfernt.
Der Code, der das, was ich oben beschrieben habe, implementiert, lautet wie folgt:
$ ("# submit-btn"). bind ("click", function () var comment = $ ("# comments"); var comment_value = $ .trim (comment.val ()); false zurückgeben;) ; Nun müssen wir die Methode bestimmen, die erforderlich ist, um diese Kommentare tatsächlich an unserem Datenort zu schreiben.
Die API von Firebase bietet mehrere Methoden zum Schreiben von Daten an einen Datenort. Im heutigen Tutorial konzentrieren wir uns jedoch auf die Verwendung von einstellen() und drücken() Methoden. Lassen Sie uns kurz überprüfen, was jede dieser Methoden uns erlaubt.
einstellen() Die Methode schreibt Daten in den Datenort und überschreibt alle Daten, die aktuell am Datenort gespeichert sind.drücken() Diese Methode schreibt Daten in den Datenpfad, indem automatisch ein neuer untergeordneter Speicherort mit einem eindeutigen Namen generiert wird. Diesem eindeutigen Namen wird außerdem ein Zeitstempel vorangestellt. Auf diese Weise können alle untergeordneten Standorte chronologisch sortiert werden.Nach der Überprüfung der beiden einstellen() und drücken() Methoden; Ich denke, dass es offensichtlich ist, dass wir das nutzen müssen drücken() Methode in unserer Anwendung. Andernfalls überschreiben wir ständig den neuesten Kommentar an unserem Speicherort. Das wäre kein Spaß.
Um dies zu tun, kehren wir zu dem JavaScript zurück, das wir zuvor auf unserer Seite hinzugefügt haben. Nun müssen wir den Kommentarwert an unseren Datenort verschieben. Denken Sie jetzt daran, dass es andere gibt drücken Methoden, mit denen Daten in verschiedenen Formaten übertragen werden können, z. B. als Objekt, Array, String, Nummer, Boolean oder Null. Wir werden nur ein Objekt verwenden, das ein Schlüsselwertpaar aus einem Kommentar und einem Kommentarwert enthält. Zusätzlich fügen wir einen optionalen Rückruf hinzu, der nach dem Auslösen ausgelöst wird drücken Methoden sind beendet. Der Rückruf gibt bei einem Fehler ein Fehlerobjekt zurück und bei Erfolg einen Nullwert.
Der Code, der das, was ich oben beschrieben habe, implementiert, lautet wie folgt:
$ ("# submit-btn"). bind ("click", function () var comment = $ ("# comments"); var commentValue = $ .trim (comment.val ()); fireBaseRef.push ( Kommentar: commentValue, Funktion (Fehler) if (error! == null) alert ('Kommentare können nicht in Firebase gepusht werden!');); return false;); Fügen wir nun etwas hinzu, um sicherzustellen, dass die Chatroom-Benutzer keine leeren Nachrichten an unseren Datenort schreiben können. Dies kann leicht durch Hinzufügen eines einfachen erreicht werden ansonsten Anweisung, die die Länge des Kommentarwerts überprüft.
Der Code, der das, was ich oben beschrieben habe, implementiert, lautet wie folgt:
$ ("# submit-btn"). bind ("click", function () var comment = $ ("# comments"); var commentValue = $ .trim (comment.val ()); if (commentValue.length.) === 0) alert ('Zum Fortfahren sind Kommentare erforderlich!'); Else _fireBaseRef.push (comment: commentValue, Funktion (Fehler) if (error! == null) alert ('Kann nicht Kommentare zu Firebase schieben! ');); comment.val (""); return false;); Toll, wir haben den Abschnitt unserer Anwendung erfolgreich abgeschlossen, in dem Benutzer Daten in unseren Datenstandort schreiben können. Aber es fehlt uns immer noch an der Funktionalität, die Benutzern ein Chat-Erlebnis in Echtzeit bietet. Diese Art von Erfahrung erfordert die Fähigkeit, Daten von den untergeordneten Standorten innerhalb des Datenorts zu lesen.
Wie bereits erwähnt, lesen die meisten Chatroom-Anwendungen Daten von einem Server und füllen dann einen Abschnitt der Benutzeroberfläche auf. 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 Datenort. Im heutigen Tutorial konzentrieren wir uns auf die Verwendung von auf() Methode.
Das auf() method hat mehrere Argumente, die es wert sind, untersucht zu werden, aber wir werden nur die ersten beiden Argumente behandeln: eventType und Ruf zurück. Lassen Sie uns beide betrachten.
eventType Das "eventTypeDas Argument hat mehrere Optionen. Schauen wir uns die einzelnen an, damit wir feststellen können, welche unseren Anforderungen entsprechen.
Wert"- wird einmal ausgelöst und liest alle Kommentare, und jedes Mal, wenn sich Kommentare ändern, werden sie erneut ausgelöst sowie alle Kommentare gelesen.child_added"- wird einmal für jeden Kommentar sowie jedes Mal, wenn ein neuer Kommentar hinzugefügt wird, ausgelöst.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 klar zu sein, dass wir "child_added"als unser"eventType". Dieser Even-Typ wird einmal für jeden Kommentar an unserer Datenposition sowie für jedes Mal, wenn ein neuer Kommentar hinzugefügt wird, ausgelöst. Wenn ein neuer Kommentar hinzugefügt wird, wird nicht der gesamte Satz von Kommentaren an dieser Position zurückgegeben. Nur das letzte hinzugefügte Kind, das ist genau das, was wir wollen! Es ist nicht notwendig, den gesamten Satz von Kommentaren zurückzugeben, wenn ein neuer Kommentar hinzugefügt wird.
Ruf zurück Das "Ruf zurück"für die auf() Die Methode stellt ein Element bereit, auf das Firebase als "Momentaufnahme der Daten" Bezug nimmt. Es enthält mehrere Memberfunktionen, auf die sich der Fokus heute konzentriert Name() und val ().
Das Name() Die Mitgliedsfunktion liefert uns den eindeutigen Namen der "Momentaufnahme der Daten". Wenn Sie sich früher erinnern, haben wir die verwendet drücken() Funktion, um einen neuen Kommentar zu unserem Datenort zu schreiben. Wann drücken() aufgerufen wurde, wurde ein neuer untergeordneter Speicherort mit einem eindeutigen Namen generiert. Dies ist der Name, der über die Rückruf-Memberfunktion zurückgegeben wird,Name().
Das val () Die Mitgliedsfunktion liefert uns die JavaScript-Objektdarstellung des "Datenabbilds", und mit diesem Moment können wir einen Kommentar von unserem Datenort abrufen. Wir müssen jedoch einen Moment zurückgehen.
Früher in diesem Tutorial haben wir das JavaScript implementiert, das erforderlich ist, um Kommentare an unseren Firebase-Speicherort zu verschieben. Dies wurde durch das Pushen eines Objekts mit einem Schlüsselwertpaar erreicht. In diesem Fall war der Schlüssel "Kommentar"und der Wert war die Eingabe, die der Benutzer eingegeben hat. Wenn wir also einen Kommentar aus unserem" Datenabzug "extrahieren möchten, müssen wir den korrekten Datentyp erkennen. In diesem Fall handelt es sich um ein Objekt, also können Sie das tun Verwenden Sie entweder Punktnotation oder Klammernotation, um auf die angegebene Eigenschaft zuzugreifen.
Die beiden folgenden JavaScript-Ausschnitte implementieren, was oben beschrieben wurde:
fireBaseRef.on ('child_added'), Funktion (Momentaufnahme) var uniqName = snapshot.name (); var comment = snapshot.val (). comment;); fireBaseRef.on ('child_added', Funktion (Snapshot) var uniqName = snapshot.name (); var comment = snapshot.val () ["comment"];); Als Nächstes erstellen wir eine einfache und dennoch saubere Möglichkeit, jeden Kommentar anzuzeigen. Dies kann leicht erreicht werden, indem jeder Kommentar in ein div und kennzeichnen Sie jeden Kommentar mit seinem eindeutigen Namen. Normalerweise werden Kommentare mit dem Namen des Benutzers gekennzeichnet, der diesen Kommentar geschrieben hat. In unserem Fall handelt es sich hierbei um einen anonymen Chatroom-Client.
Der Code, der das, was ich oben beschrieben habe, implementiert, lautet wie folgt:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Kommentar '+ uniqName +''+ Kommentar); Als Nächstes müssen wir jeden Kommentar an den Container des Kommentars anhängen, die aktuelle vertikale Position der Container-Bildlaufleiste des Kommentars ermitteln und zu dieser letzten Position scrollen. Dadurch wird sichergestellt, dass jedes Mal, wenn ein Kommentar an Firebase gesendet wird, alle Benutzer, die die Chat-Anwendung verwenden, den neuesten Kommentar sehen. All dies muss innerhalb des Rückrufs erfolgen.
Es sollte ungefähr so aussehen:
var commentsContainer = $ ('# comments-container'); $ ('', class:' comment-container ') .html ('Kommentar '+ uniqName +''+ comment) .appendTo (commentsContainer); commentsContainer.scrollTop (commentsContainer.prop ('scrollHeight')); Wenden wir nun einige einfache CSS-Stile auf die DIVs an, die um jeden Kommentarblock angeordnet sind. Dies macht den Auftritt etwas attraktiver und benutzerfreundlicher. Diese Stile sollten innerhalb der Stil-Tags hinzugefügt werden Kopf Abschnitt des HTML.
Der Code, der das, was ich oben beschrieben habe, implementiert, lautet wie folgt:
.Behälter max-Breite: 700px; # comments-container border: 1px fest # d0d0d0; Höhe: 400px; Überlauf-y: scrollen; .com-Container padding: 10px; Marge: 6px; Hintergrund: # f5f5f5; Schriftgröße: 13px; -moz-border-radius: 5px; -webkit-border-radius: 5px; Grenzradius: 5px; .com-Container .label margin-right: 20px; .com-Container: last-of-type border-bottom: none;
Es ist jetzt an der Zeit, unsere Anwendung auszuführen. Beginnen wir damit, zwei Instanzen unseres bevorzugten, modernen Browsers zu öffnen und sie nebeneinander auf unserem Desktop zu platzieren. Als Nächstes navigieren wir in beiden Browsern zum Dateispeicherort unserer Datei, die wir erstellt haben. Testen Sie es, indem Sie ein paar Kommentare schreiben und die Magie von Firebase genießen.
Es ist unglaublich, dass nur ein paar Zeilen Code eine derart leistungsfähige Anwendung erzeugen können. Fühlen Sie sich frei, diesen Ausschnitt auf irgendeine Weise zu bearbeiten, um die gewünschten Ergebnisse zu erzielen.
Schauen Sie sich die Online-Demo an, um sie in Aktion zu sehen. Unten ist der vollständige Quellcode für die gesamte Chatroom-Anwendung:
Firebase Chat-Anwendung Firebase Chat-Anwendung
Im heutigen Tutorial haben wir den gesamten Prozess der Implementierung einer einfachen Chatroom-Anwendung durch die Nutzung der JavaScript-API von Firebase durchgearbeitet. Dadurch konnten wir die Kraft von Firebase erleben und die Bequemlichkeit schätzen. Nachfolgend einige der wichtigsten Punkte, die wir heute treffen:
drücken Methode.auf Methode mit dem Ereignistyp "child_added".Ich hoffe, dass Ihnen dieses Tutorial den Ausgangspunkt gegeben hat, um Firebase weiter voranzubringen. Wenn Sie Fragen oder Anmerkungen haben, können Sie diese gerne weiter unten angeben. Nochmals vielen Dank für Ihre Zeit und erkunden Sie die unendlichen Möglichkeiten der Firebase-API.
