Share
Node.js und Websockets sind die perfekte Kombination, um sehr schnelle, verzögerungsfreie Anwendungen zu schreiben, die Daten an eine große Anzahl von Clients senden können. Warum lernen wir diese zwei Themen nicht durch den Aufbau eines Chat-Service kennen! Wir werden sehen, wie Node.js-Pakete installiert werden, dem Client mit einem einfachen Webserver eine statische Seite bereitstellen und Socket.io für die Kommunikation mit dem Client konfigurieren.
Warum also diese Combo verwenden??
Es gibt viele Plattformen, auf denen eine Chat-Anwendung ausgeführt werden kann, aber durch die Wahl von Node.js müssen wir keine völlig andere Sprache lernen, es ist lediglich JavaScript, aber serverseitig.
Node.js ist eine Plattform, die auf der JavaScript-Laufzeit von Chrome basiert, um das Erstellen von Anwendungen in JavaScript, die auf dem Server ausgeführt werden, zu vereinfachen. Node.js verwendet ein ereignisgesteuertes, nicht blockierendes E / A-Modell, das es ideal für die Erstellung von Echtzeit-Apps macht.
Immer mehr Node.js-Anwendungen werden für Echtzeitkommunikation entwickelt. Ein bekanntes Beispiel ist BrowserQuest von Mozilla, ein vollständig in Node.js geschriebenes MMORPG, dessen Quellcode auf Github veröffentlicht wurde.
Node.js wird mit einem integrierten Paketmanager geliefert: npm. Wir werden damit Pakete installieren, die unseren Anwendungsentwicklungsprozess beschleunigen.
Wir verwenden drei Pakete für dieses Tutorial: Jade, Express und Socket.io.
Das Hauptmerkmal unserer Anwendung ist die Echtzeitkommunikation zwischen dem Client und dem Server.
HTML5 führt Websockets ein, aber es wird bei weitem nicht von allen Benutzern unterstützt. Daher benötigen wir eine Backup-Lösung.
Socket.io ist unsere Backup-Lösung: Es prüft die Websocket-Kompatibilität und wenn es nicht unterstützt wird, wird Adobe Flash, AJAX oder ein iFrame verwendet.
Schließlich unterstützt es eine sehr große Anzahl von Browsern:
Es bietet auch sehr einfache Funktionen für die Kommunikation zwischen Server und Client auf beiden Seiten.
Beginnen wir mit der Installation der drei Pakete, die wir benötigen.
Mit Npm können wir Pakete sehr schnell über eine Zeile installieren. Gehen Sie also zunächst in Ihr Verzeichnis und laden Sie die benötigten Pakete von npm herunter:
npm install express jade socket.io
Jetzt können wir mit dem Aufbau eines serverseitigen Controllers beginnen, der die Hauptseite bereitstellt.
Wir speichern den gesamten serverseitigen Code in einem "server.js" Datei, die von Node.js ausgeführt wird.
Für die Bereitstellung unserer statischen Seite verwenden wir Express, ein Paket, das den gesamten serverseitigen Sendevorgang der Seite vereinfacht.
Fügen wir dieses Paket in unser Projekt ein und starten Sie den Server:
Accentsconagua
var express = required ('express'), app = express.createServer (); Als Nächstes müssen wir Express so konfigurieren, dass die Seite aus den Repertorory-Ansichten mit der zuvor installierten Jade-Templating-Engine bereitgestellt wird.
Express verwendet standardmäßig eine Layout-Datei, die wir aber nicht benötigen, da wir nur eine Seite liefern. Stattdessen deaktivieren wir sie.
Express kann dem Client auch ein statisches Repertorium wie ein klassischer Webserver zur Verfügung stellen "Öffentlichkeit" Ordner, der alle unsere JavaScript-, CSS- und Bilddateien enthält.
app.set ('views', __dirname + '/ views'); app.set ('view engine', 'jade'); app.set ("Ansichtsoptionen", layout: false); app.configure (function () app.use (express.static (__ dirname + '/ public'));); Als Nächstes erstellen wir zwei Ordner in unserem Projektordner mit dem Namen "Öffentlichkeit" und "Ansichten".
Jetzt müssen wir nur noch Express konfigurieren, um eine "home.jade" Datei, die wir gleich erstellen, und dann Express so einstellen, dass ein bestimmter Port überwacht wird.
Ich werde Port 3000 verwenden, aber Sie können verwenden, was Sie möchten.
app.get ('/', function (req, res) res.render ('home.jade');); App.listen (3000); 
Node.js verwendet Template-Engines zur Bereitstellung von Webseiten. Es ist nützlich, dynamische Seiten zu senden und sie schneller zu erstellen.
In diesem Tutorial werden wir Jade verwenden. Die Syntax ist sehr klar und unterstützt alles, was wir brauchen.
"Jade ist eine Hochleistungs-Templating-Engine, die stark von Haml beeinflusst und mit JavaScript für Node implementiert wurde."
Nun, ich werde Jade nicht im Detail besprechen. Wenn Sie mehr Hilfe benötigen, finden Sie eine sehr gut geschriebene Dokumentation zu seinem Github-Repo.
Wir haben Jade schon früher installiert, müssen es aber in unsere aufnehmen server.js Datei wie bei Express.
Konventionell fügen wir unsere Bibliotheken oben in unsere Datei ein, um sie später verwenden zu können, ohne überprüfen zu müssen, ob sie bereits enthalten sind. Platzieren Sie den folgenden Code oben in Ihrem "server.js" Datei :
var jade = erfordern ('jade'); Damit ist unsere Jade-Konfiguration abgeschlossen. Express ist bereits so eingerichtet, dass Jade mit unseren Ansichtsdateien verwendet wird. Um eine HTML-Antwort zu senden, müssen Sie nur diese Datei erstellen.
Wenn wir unseren Server jetzt starten, stürzt er ab, weil wir von unserer App eine Seite senden, die noch nicht vorhanden ist.
Wir werden keine voll funktionsfähige Seite erstellen, sondern nur eine grundlegende Seite, die einen Titel, einen Container für die Nachrichten, einen Textbereich, eine Schaltfläche "Senden" und einen Benutzerzähler enthält.
Gehen Sie voran und erstellen Sie eine "home.jade" Seite in der "Ansichten" Ordner mit dem folgenden Code:
doctype 5 html head title Chat-Skript (src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js') Skript (src = "/ socket.io/socket.). io.js ") script (src =" script.js ") body div.container header h1 Eine Chatanwendung mit Eingabe Node.js und Socket.io (type = 'text') # pseudoInput button # pseudoSet Set Pseudo div # chatEntries div # chatControls input (type = 'text') # messageInput-Schaltfläche # submit Senden
"Bei Jade dreht sich alles um Einrückung"
In der Jadesprache dreht sich alles um die Einrückung. Wie Sie sehen, müssen wir unsere Container nicht schließen. Es genügt, die untergeordneten Elemente des übergeordneten Containers einzurücken.
Wir verwenden auch eine Periode "." und ein Pfundzeichen "#" wie in einer CSS-Datei, um die Klasse oder ID des Elements anzugeben.
Wir verknüpfen auch drei Skripte am Anfang der Datei. Das erste ist jQuery von Google CDN. Als nächstes haben wir das Socket.io-Skript, das automatisch vom Paket bereitgestellt wird, und schließlich ein "script.js" Datei, die alle unsere benutzerdefinierten JS-Funktionen enthält.
Socket.io ist wie Node ereignisbasiert. Ziel ist es, Echtzeit-Apps in jedem Browser und auf jedem mobilen Gerät zu ermöglichen und die Grenzen zwischen diesen unterschiedlichen Transportmechanismen zu verwischen. Es ist sorglos, in Echtzeit und 100% JavaScript.
Wie die anderen Module müssen wir es in unser Modul aufnehmen server.js Datei. Wir werden auch auf unserem Express-Server eine Kette einrichten, um Verbindungen von derselben Adresse und demselben Port zu überwachen.
var io = requir ('socket.io'). listen (app); Das erste Ereignis, das wir verwenden werden, ist das Verbindungsereignis. Es wird ausgelöst, wenn ein Client versucht, eine Verbindung zum Server herzustellen. Socket.io erstellt einen neuen Socket, den wir zum Empfangen oder Senden von Nachrichten an den Client verwenden werden.
Beginnen wir mit der Initialisierung der Verbindung:
io.sockets.on ('Verbindung', Funktion (Socket) // unsere anderen Ereignisse…); Diese Funktion benötigt zwei Argumente, das erste ist das Ereignis und das zweite ist die Rückruffunktion mit dem Socket-Objekt.
Mit diesem Code können wir mit Socket.io neue Ereignisse auf dem Client und auf dem Server erstellen. Wir werden das einstellen "Pseudo" Ereignis und die "Botschaft" nächste Veranstaltung.
Um dies zu tun, ist es sehr einfach, wir verwenden nur dieselbe Syntax, diesmal jedoch mit unserer Steckdose Objekt und nicht mit dem "io.sockets" (mit einem "s") Objekt. Dies ermöglicht uns die gezielte Kommunikation mit einem Kunden.
Fügen wir also in unserer Verbindungsfunktion das hinzu "Pseudo" Ereigniscode.
socket.on ('setPseudo', Funktion (Daten) socket.set ('Pseudo', Daten);); Die Rückruffunktion benötigt ein Argument, dies sind die Daten vom Client und in unserem Fall enthält sie die Pseudo-. Mit dem "einstellen" Funktion weisen wir dem Socket eine Variable zu. Das erste Argument ist der Name dieser Variablen und das zweite ist der Wert.
Als nächstes müssen wir den Code für die hinzufügen "Botschaft" Veranstaltung. Es erhält den Pseudo des Benutzers, sendet ein Array an alle Clients, das die Nachricht enthält, die wir erhalten haben, sowie den Pseudo des Benutzers und meldet es in unserer Konsole an.
socket.on ('message', Funktion (message) socket.get ('pseudo', Funktion (Fehler, Name) var data = 'message': message, pseudo: name; socket.broadcast.emit (' message ', data); console.log ("user" + name + "send this:" + message);)); Damit ist unsere serverseitige Konfiguration abgeschlossen. Wenn Sie möchten, können Sie weitere Veranstaltungen verwenden, um dem Chat neue Funktionen hinzuzufügen.
Das Schöne an Socket.io ist, dass wir uns keine Sorgen um den Umgang mit Client-Unterbrechungen machen müssen. Wenn die Verbindung getrennt wird, erhält Socket.io keine Antworten mehr auf "Heartbeat" -Nachrichten und deaktiviert die dem Client zugeordnete Sitzung. Wenn es sich nur um eine vorübergehende Unterbrechung der Verbindung handelte, stellt der Client die Verbindung wieder her und setzt die Sitzung fort.
Da unser Server für die Verwaltung von Nachrichten konfiguriert ist, benötigen wir einen Client, um sie zu senden.
Die Client-Seite von Socket.io ist fast identisch mit der Server-Seite. Es funktioniert auch mit benutzerdefinierten Ereignissen, und wir erstellen dieselben wie auf dem Server.
Erstellen Sie also zuerst eine "script.js" Datei in der Öffentlichkeit Mappe. Wir werden alle unsere Funktionen darin speichern.
Wir müssen zuerst die socket.io-Verbindung zwischen dem Client und dem Server starten. Es wird in einer Variablen gespeichert, die wir später zum Senden oder Empfangen von Daten verwenden werden. Wenn der Verbindung keine Argumente übergeben werden, wird automatisch eine Verbindung zu dem Server hergestellt, der die Seite bereitstellt.
var socket = io.connect ();
Als Nächstes erstellen wir einige Hilfsfunktionen, die wir später benötigen werden. Die erste ist eine einfache Funktion, um dem Pseudo des Benutzers eine Nachricht hinzuzufügen.
function addMessage (msg, pseudo) $ ("# chatEntries"). anhängen (''+ pseudo +': '+ msg +'
'); Dieser Helfer verwendet die Append-Funktion von jQuery, um a hinzuzufügen div am Ende von #chatEinträge div.
Jetzt schreiben wir eine Funktion, die wir aufrufen können, wenn wir eine neue Nachricht senden möchten.
function sentMessage () if ($ ('# messageInput'). val ()! = "") socket.emit ('message', $ ('# messageInput'). val ()); addMessage ($ ('# messageInput'). val (), "Ich", neues Datum (). toISOString (), true); $ ('# messageInput'). val ("); Zuerst überprüfen wir, dass unser Textbereich nicht leer ist, und senden dann ein Paket mit dem Namen "Botschaft" an den Server, der den Nachrichtentext enthält, drucken wir ihn mit unserem auf dem Bildschirm aus "Nachricht hinzufügen" Funktion, und schließlich entfernen wir den gesamten Text aus dem Textbereich.
Wenn der Client die Seite öffnet, müssen wir zunächst den Pseudo des Benutzers festlegen. Diese Funktion sendet das Pseudo an den Server und zeigt den Textbereich und die Schaltfläche zum Senden an.
function setPseudo () if ($ ("# pseudoInput"). val ()! = "") socket.emit ('setPseudo', $ ("# pseudoInput"). val ()); $ ('# chatControls'). show (); $ ('# pseudoInput'). hide (); $ ('# pseudoSet'). hide (); Außerdem blenden wir die Steuerelemente für die Pseudoeinstellung aus, wenn sie an den Server gesendet werden.
Jetzt, genau wie auf der Serverseite, müssen wir sicherstellen, dass wir eingehende Nachrichten empfangen können. Diesmal drucken wir sie auf dem Bildschirm. Wir verwenden dieselbe Syntax, nennen dies aber die "Nachricht hinzufügen" Funktion.
socket.on ('message', Funktion (data) addMessage (data ['message'], data ['pseudo']);); Wie bei unserer Serverkonfiguration ist das an den Client gesendete Paket ein Array, das die Nachricht und den Pseudo enthält. Also rufen wir einfach unsere an "Nachricht hinzufügen" Funktionsübergabe in der Nachricht und im Pseudo, die wir aus dem empfangenen Datenpaket extrahieren.
Jetzt müssen wir nur noch die Initialisierungsfunktion hinzufügen, die ausgelöst wird, wenn die Seite vollständig geladen ist.
$ (function () $ ("# chatControls"). hide (); $ ("# pseudoSet"). click (function () setPseudo ()); $ ("# submit"). click (Funktion ( ) Nachricht senden();); ); Zuerst blenden wir die Chat-Steuerelemente aus, bevor der Pseudo eingestellt ist, und legen dann zwei Klick-Listener fest, die auf die beiden Senden-Schaltflächen auf Klicks achten. Der erste ist für den Pseudo und der zweite für die Nachrichten.
Und das schließt unser clientseitiges Skript ein.
Wir haben jetzt einen funktionierenden Chat-Dienst. Zum Starten führen Sie einfach den folgenden Befehl aus:
Knoten server.js
In Ihrem Terminal sollten Sie eine Nachricht von Socket.io erhalten, dass der Server gestartet ist. Um Ihre Seite zu sehen, gehen Sie zu 127.0.0.1:3000 (oder welcher Port Sie zuvor gewählt haben).
Das Design ist sehr einfach, aber Sie können problemlos CSS3-Übergänge für eingehende Nachrichten, HTML5-Sounds oder Bootstrap von Twitter in ein Stylesheet einfügen.
Wie Sie sehen, sind die Server- und Client-Skripts ziemlich ähnlich: Dies ist die Stärke von Node.js. Sie können eine Anwendung erstellen, ohne den Code zweimal schreiben zu müssen.
Schließlich haben Sie vielleicht bemerkt, dass in unserem nur 25 Zeilen Code benötigt wurden server.js Datei zum Erstellen einer funktionalen Chat-App mit erstaunlicher Leistung. Es ist sehr kurz, funktioniert aber auch sehr gut.
Wenn Sie jetzt interessiert sind, habe ich eine bessere Chat-Service-Anwendung mit einem ansprechenden Design und einigen zusätzlichen Funktionen erstellt. Es wird auf Nodester gehostet und der Quellcode ist auf Github.
Hier ist eine Vorschau davon.
Danke fürs Lesen.
