Share
NodeJS gibt mir die Möglichkeit, Back-End-Code in einer meiner bevorzugten Sprachen zu schreiben: JavaScript. Es ist die perfekte Technologie zum Erstellen von Echtzeitanwendungen. In diesem Tutorial zeige ich Ihnen, wie Sie eine Web-Chat-Anwendung mit ExpressJS und Socket.io erstellen.
Wenn Sie eine vorgefertigte Chat-Lösung mit Node.js finden möchten, besuchen Sie Yahoo! Messenger node.JS BOT auf dem Envato-Markt.
Yahoo! Messenger node.JS BOT auf dem Envato-Markt Natürlich müssen Sie als erstes NodeJS auf Ihrem System installieren. Wenn Sie ein Windows- oder Mac-Benutzer sind, können Sie nodejs.org besuchen und das Installationsprogramm herunterladen. Wenn Sie stattdessen Linux bevorzugen, schlage ich vor, auf diesen Link zu verweisen. Obwohl ich nicht näher darauf eingehen werde, helfe ich Ihnen gerne, wenn Sie Probleme bei der Installation haben. Hinterlassen Sie einfach einen Kommentar unter diesem Beitrag.
Sobald Sie NodeJS installiert haben, können Sie die benötigten Instrumente einrichten.
Erstellen Sie in einem leeren Verzeichnis a package.json Datei mit folgendem Inhalt.
"name": "RealTimeWebChat", "version": "0.0.0", "description": "Echtzeit-Webchat", "Abhängigkeiten": "socket.io": "latest", "express": " neueste "," jade ":" neueste "," Autor ":" Entwickler "
Navigieren Sie mithilfe der Konsole (unter Windows - Eingabeaufforderung) zu Ihrem Ordner und führen Sie Folgendes aus:
npm installieren
Innerhalb weniger Sekunden haben Sie alle erforderlichen Abhängigkeiten in den heruntergeladen Knotenmodule Verzeichnis.
Beginnen wir mit einem einfachen Server, der die HTML-Seite der Anwendung bereitstellt, und dann mit den interessanteren Bits fortfahren: der Echtzeitkommunikation. Erstelle ein index.js Datei mit dem folgenden Kerncode für expressjs:
Accentsconagua
var express = erfordern ("express"); var app = express (); var port = 3700; app.get ("/", Funktion (req, res) res.send ("it works!");); App.listen (Port); console.log ("Überwachen von Port" + Port); Oben haben wir eine Anwendung erstellt und ihren Port definiert. Als Nächstes haben wir eine Route registriert, die in diesem Fall eine einfache GET-Anforderung ohne Parameter ist. Für den Moment sendet der Handler der Route einfach einen Text an den Client. Am Ende laufen wir natürlich den Server. Um die Anwendung zu initialisieren, führen Sie in der Konsole Folgendes aus:
Knoten index.js
Der Server läuft, Sie sollten sich also öffnen können http://127.0.0.1:3700/ und sehen:
Es klappt!
Jetzt statt "Es klappt" Wir sollten HTML anbieten. Anstelle von reinem HTML kann es vorteilhaft sein, eine Template Engine zu verwenden. Jade ist eine ausgezeichnete Wahl, die eine gute Integration mit ExpressJS bietet. Dies verwende ich normalerweise in meinen eigenen Projekten. Erstellen Sie ein Verzeichnis, genannt tpl, und stelle folgendes ein page.jade Datei darin:
!!! html head title = "Echtzeit-Webchat" body #content (style = 'width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px # 999; overflow-y: scroll;') .controls input .field (style = 'width: 350px;') input.send (type = 'button', value = "send")
Die Syntax der Jade ist nicht so komplex, aber für eine vollständige Anleitung schlage ich vor, dass Sie sich auf jade-lang.com beziehen. Um Jade mit ExpressJS verwenden zu können, benötigen wir folgende Einstellungen.
app.set ('views', __dirname + '/ tpl'); app.set ('view engine', "jade"); app.engine ('jade', erfordern ('jade') .__ express); app.get ("/", Funktion (req, res) res.render ("page");); Dieser Code informiert Express darüber, wo sich Ihre Vorlagendateien befinden und welche Vorlagen-Engine verwendet werden soll. Alle geben die Funktion an, die den Code der Vorlage verarbeiten soll. Sobald alles eingerichtet ist, können wir die verwenden .machen Methode der Antwort Objekt, und senden Sie einfach unseren Jade-Code an den Benutzer.
Die Ausgabe ist an dieser Stelle nicht besonders. nichts weiter als ein div Element (das mit der ID Inhalt), die als Halter für die Chatnachrichten und zwei Steuerelemente (Eingabefeld und Schaltfläche) verwendet wird, mit denen wir die Nachricht senden.
Da wir eine externe JavaScript-Datei verwenden, die die Front-End-Logik enthält, müssen wir ExpressJS informieren, wo nach solchen Ressourcen gesucht werden muss. Erstellen Sie ein leeres Verzeichnis, Öffentlichkeit, und fügen Sie vor dem Aufruf an die folgende Zeile ein .Hör mal zu Methode.
app.use (express.static (__ dirname + '/ public'));
So weit, ist es gut; Wir haben einen Server, der erfolgreich auf GET-Anfragen reagiert. Nun ist es Zeit hinzuzufügen Socket.io Integration. Ändern Sie diese Zeile:
App.listen (Port);
zu:
var io = requir ('socket.io'). listen (app.listen (port)); Oben haben wir den ExpressJS-Server an Socket.io übergeben. Tatsächlich findet unsere Echtzeitkommunikation immer noch am selben Port statt.
Im weiteren Verlauf müssen wir den Code schreiben, der eine Nachricht vom Client erhält, und ihn an alle anderen senden. Jede Socket.io-Anwendung beginnt mit einem Verbindung Handler. Wir sollten eins haben:
io.sockets.on ('Verbindung', Funktion (Socket) socket.emit ('Nachricht', Nachricht: 'Willkommen im Chat'); Socket.on ('Senden', Funktion (Daten) io. sockets.emit ('message', data););); Das Objekt, Steckdose, die an Ihren Handler übergeben wird, ist eigentlich der Socket des Clients. Stellen Sie sich dies als eine Verbindung zwischen Ihrem Server und dem Browser des Benutzers vor. Bei erfolgreicher Verbindung senden wir eine herzlich willkommen Nachrichtentyp, und binden Sie natürlich einen anderen Handler, der als Empfänger verwendet wird. Daher sollte der Client eine Nachricht mit dem Namen ausgeben, senden, was wir fangen werden. Anschließend leiten wir die vom Benutzer gesendeten Daten einfach an alle anderen Sockets mit weiter io.sockets.emit.
Mit dem obigen Code ist unser Backend bereit, Nachrichten an die Clients zu empfangen und zu senden. Fügen wir etwas Front-End-Code hinzu.
Erstellen chat.js, und platziere es in der Öffentlichkeit Verzeichnis Ihrer Anwendung. Fügen Sie den folgenden Code ein:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var Feld = document.getElementById ("Feld"); var sendButton = document.getElementById ("send"); var content = document.getElementById ("content"); socket.on ('message', Funktion (Daten) if (data.message) messages.push (data.message); var html = "; for (var i = 0; i Unsere Logik ist in eine verpackt .onload Handler, um sicherzustellen, dass das gesamte Markup und das externe JavaScript vollständig geladen sind. In den nächsten Zeilen erstellen wir ein Array, in dem alle Nachrichten gespeichert werden. A Steckdose Objekt und einige Abkürzungen zu unseren DOM-Elementen. Ähnlich wie beim Backend binden wir eine Funktion, die auf die Aktivität des Sockets reagiert. In unserem Fall ist dies ein Ereignis mit dem Namen Botschaft. Wenn ein solches Ereignis eintritt, erwarten wir ein Objekt, Daten, mit der Immobilie, Botschaft. Fügen Sie diese Nachricht unserem Speicher hinzu und aktualisieren Sie die Inhalt div. Wir haben auch die Logik für das Senden der Nachricht eingefügt. Es ist ziemlich einfach, einfach eine Nachricht mit dem Namen zu senden, senden.
Wenn du öffnest http: // localhost: 3700, Es werden einige Fehler angezeigt. Das liegt daran, dass wir ein Update benötigen page.jade die erforderlichen JavaScript-Dateien enthalten.
head title = Skript "Real Time Web Chat" (src = '/ chat.js') (src = '/ socket.io/socket.io.js')
Beachten Sie, dass Socket.io die Lieferung von verwaltet socket.io.js. Sie müssen sich keine Sorgen machen, dass Sie diese Datei manuell herunterladen müssen.
Wir können unseren Server erneut mit betreiben Knoten index.js in der Konsole und öffnen http: // localhost: 3700. Sie sollten die Willkommensnachricht sehen. Wenn Sie etwas senden, sollte dies natürlich in den Inhalten angezeigt werden div. Wenn Sie sicher gehen möchten, dass es funktioniert, öffnen Sie eine neue Registerkarte (oder besser einen neuen Browser) und laden Sie die Anwendung. Das Tolle an Socket.io ist, dass es auch funktioniert, wenn Sie den NodeJS-Server stoppen. Das Frontend wird weiterhin funktionieren. Sobald der Server wieder hochgefahren ist, ist auch Ihr Chat in Ordnung.
In seinem derzeitigen Zustand ist unser Chat nicht perfekt und erfordert einige Verbesserungen.
Die erste Änderung, die wir vornehmen müssen, betrifft die Identität der Nachrichten. Derzeit ist nicht klar, welche Nachrichten von wem gesendet werden. Das Gute ist, dass wir unseren NodeJS-Code nicht aktualisieren müssen, um dies zu erreichen. Das liegt daran, dass der Server das einfach weiterleitet Daten Objekt. Daher müssen wir dort eine neue Eigenschaft hinzufügen und diese später lesen. Bevor Sie Korrekturen an vornehmen chat.js, Lass uns ein neues hinzufügen Eingang Feld, in dem der Benutzer seinen Namen hinzufügen kann. Innerhalb page.jade, ändere das Kontrollen div:
.steuert | Name: input # name (style = 'width: 350px;') br input # field (style = 'width: 350px;') input # send (type = 'button', value = "send")
Als nächstes in code.js:
window.onload = function () var messages = []; var socket = io.connect ('http: // localhost: 3700'); var Feld = document.getElementById ("Feld"); var sendButton = document.getElementById ("send"); var content = document.getElementById ("content"); var name = document.getElementById ("name"); socket.on ('message', Funktion (Daten) if (data.message) messages.push (data); var html = "; for (var i = 0; i'; html + = messages [i] .message + '
'; content.innerHTML = html; else console.log ("Es gibt ein Problem:", Daten); ); sendButton.onclick = function () if (name.value == "") alert ("Bitte geben Sie Ihren Namen ein!"); else var text = field.value; socket.emit ('send', message: text, Benutzername: name.value); ; Um die Änderungen zusammenzufassen, haben wir:
Eingang FeldNutzername Eigenschaft für das Objekt, das an den Server gesendet wirdWenn die Anzahl der Nachrichten zu hoch wird, muss der Benutzer das Bild durchblättern div:
content.innerHTML = html; content.scrollTop = content.scrollHeight;
Denken Sie daran, dass die oben genannte Lösung wahrscheinlich nicht in IE7 und darunter funktionieren wird, aber das ist in Ordnung: Es ist Zeit, dass IE7 ausklingt. Wenn Sie jedoch Support sicherstellen möchten, können Sie jQuery verwenden:
$ ("# content"). scrollTop ($ ("# content") [0] .scrollHeight); Es wäre auch schön, wenn das Eingabefeld nach dem Senden der Nachricht gelöscht wird:
socket.emit ('send', message: text, Benutzername: name.value); field.value = ""; Das letzte langweilige Problem ist das Klicken auf die senden Taste jedes Mal. Mit einem Hauch von jQuery können wir darauf achten, wann der Benutzer auf drückt Eingeben Schlüssel.
$ (document) .ready (function () $ ("# field"). keyup (Funktion (e) if (e.keyCode == 13) sendMessage ();;);); Die Funktion, Nachricht senden, könnte so registriert werden:
sendButton.onclick = sendMessage = function () …;
Bitte beachten Sie, dass dies keine bewährte Methode ist, da es als globale Funktion registriert ist. Aber für unseren kleinen Test hier ist es gut.
NodeJS ist eine äußerst nützliche Technologie und bietet uns viel Kraft und Freude, vor allem wenn man bedenkt, dass wir reines JavaScript schreiben können. Wie Sie sehen, haben wir mit nur wenigen Zeilen Code eine voll funktionsfähige Echtzeit-Chat-Anwendung geschrieben. Ziemlich ordentlich!
Möchten Sie mehr über das Erstellen von Web-Apps mit ExpressJS erfahren? Wir geben dir Deckung!
