Share
Wenn Ihre Site auf Daten basiert, die an Clients gesendet werden, können Sie ihre Leistung mithilfe von clientseitigen Vorlagen und WebSockets steigern. In diesem Tutorial zeige ich Ihnen wie.
Wir werden mit der Umwandlung einer bereits vorhandenen Anwendung beginnen, um sie unter hohem Datenverkehr schneller und dauerhafter zu machen. Ich zeige Ihnen, wie Sie Code-Teile finden, die zur Verbesserung der App geändert werden könnten. Laden Sie zunächst die von mir vorbereitete Beispielanwendung herunter. Es ist wirklich einfach, es werden auf dem Server gerenderte zufällige Beiträge angezeigt, aber es wird für dieses Tutorial gut funktionieren.
Entpacken Sie die zuvor heruntergeladene App in einen bevorzugten Ordner oder Ordner und führen Sie sie aus:
Navigieren Sie nun zu http: // localhost: 8080 / und werfen Sie einen Blick darauf. Sie sollten nur eine Schaltfläche sehen. Sie müssen auch einen Browser mit Entwicklertools verwenden, damit Sie die Größe der HTTP-Anforderungen sehen können. Öffnen Sie die Entwicklerwerkzeuge und gehen Sie zu Netzwerk Tab. Klicken Sie dann mehrmals auf die Schaltfläche, und sehen Sie sich die Größe des Fensters an / getpost anfordern:
Es sind nur ungefähr 830 Bytes richtig? Stellen Sie sich vor, dass diese Site sehr beliebt wird und eine Million Benutzer diesen Beitrag sehen möchten. Es kommt auf ca. 830 Megabyte. Per Post! Keine so kleine Zahl mehr.
In diesem Schritt zeige ich Ihnen, wie Sie Code finden, der zur Beschleunigung der App geändert werden kann. Im vorherigen Schritt haben Sie festgestellt, dass die Anforderung verwendet wurde, um den Beitrag zu erhalten. Sie müssen nun herausfinden, wie es im Code bereitgestellt wird. Öffne die index.js Datei in Ihrem bevorzugten Code-Editor. Gehen Sie nun zu den Zeilen 16-20:
Accentsconagua
var postTemplate = dot (fs.readFileSync ('./ post.dot')); app.get ('/ getpost', Funktion (req, res)) res.end (postTemplate (posts [Math.floor (Math.random () * 3)])));)); Hier ist es! Zunächst wird die Vorlage des Beitrags in die postTemplate Variable. Dann auf der / getpost GET request, dass die Vorlage zugestellt wird. Nichts Besonderes, nur eine klassische Herangehensweise an das Problem. Wir müssen dies ändern, um seine Leistung zu verbessern.
Um mit den Verbesserungen zu beginnen, installieren Sie zunächst Socket.IO. In Ihrem Terminaltyp:
npm install socket.io
Warten Sie, bis der Befehl abgeschlossen ist. Fordern Sie es im Code an, indem Sie die folgende Zeile hinzufügen, nachdem alle Anforderungen eingegeben wurden index.js:
var sio = required ('socket.io'); Jetzt müssen Sie das Express-Setup ändern, um mit Socket.IO arbeiten zu können. Erst nach dem App Definition, fügen Sie folgendes hinzu:
var server = required ('http'). createServer (app); var io = requir ('socket.io'). listen (Server); Server.listen (8080); Und entferne die letzte Zeile in dieser Datei:
App.listen (8080);
Sie müssen dies tun, da für Socket.IO der HTTP-Server und nicht die Express-App erforderlich ist.
Wenn Sie nun die App ausführen, sollten Sie in Ihrem Terminal Folgendes sehen:
Um die App zu beschleunigen, müssen Sie die kompilierte Vorlage auf der Clientseite speichern. Javascript-Dateien werden zwischengespeichert, sodass sie nur einmal heruntergeladen werden. Um die Vorlage zu kompilieren, gehen Sie zu http://olado.github.io/doT/index.html und scrollen Sie nach unten Verwendungszweck Sektion. Da die Vorlage nicht jedes Mal kompiliert werden muss, wenn der Benutzer Ihre Site besucht, können Sie dem Code einfach die kompilierte Funktion hinzufügen. Öffne das post.dot Datei und fügen Sie den Inhalt in die Vorlage Feld wie folgt:
Kopieren Sie nun den Inhalt des Feldes und fügen Sie ihn in das Feld ein statisch / main.js Datei vor allem Code dort. Ändern oder entfernen Sie die anonym Funktionsname und ordnen Sie es dem zu postTemplate Variable wie folgt:
var postTemplate = Funktion (it) …
Gehen Sie jetzt zum index.js Datei und entfernen Sie nicht verwendete Zeilen, da Sie keine serverseitigen Vorlagen mehr kompilieren werden:
var Punkt = Anfordern ('Punkt'). Vorlage; var fs = required ('fs');… var postTemplate = dot (fs.readFileSync ('./ post.dot')); Das post.dot Datei kann auch gelöscht werden.
Statt AJAX für die Kommunikation mit dem Server zu verwenden, verwenden wir jetzt WebSockets. Dies geschieht am besten mit Socket.IO, da die WebSocket-API selbst keine Ausfälle bereitstellt, falls der Browser des Benutzers dies nicht unterstützt. Der Server ist bereits eingerichtet, so dass wir uns jetzt mit ihm verbinden müssen. Fügen Sie dies zunächst in der Kopf des statisch / index.html Datei (vorher main.js):
Als nächstes öffnen Sie die statisch / main.js Fügen Sie nach der Vorlagendefinition diesen Code hinzu:
var socket = io.connect ();
Es stellt eine Verbindung zum Socket.IO-Server her (beachten Sie, dass Sie das Socket.IO-Skript der Seite zuvor hinzugefügt haben). Da sich der Server auf demselben Host wie der Client befindet, müssen Sie keine Parameter für die Funktion angeben. Jetzt müssen Sie dem Socket einen Ereignis-Listener hinzufügen, damit wir wissen, wann der Beitrag eingeht. Fügen Sie dies gleich nach der vorherigen Zeile hinzu:
socket.on ('getpost', function (data) $ ('button'). after (postTemplate (data));); Wie Sie sehen, sieht der Rückruf genauso aus wie der Erfolg Rückruf in jQuery $ .ajax () Methode, aber es wird zuerst die Vorlagenfunktion für die Daten ausgeführt. Ersetzen Sie jetzt die $ .ajax () anrufen mit:
socket.emit ('getpost'); Diese Zeile informiert den Server, dass der Benutzer einen neuen Beitrag anzeigen möchte. In einer realen App würde der Server natürlich die Posts senden, wenn sie veröffentlicht werden.
Momentan kann der Client eine Verbindung zum Server herstellen und einen Beitrag anfordern, der Server sendet jedoch noch nichts. Sie benötigen den Server-Socket, um das zu hören getpost Ereignis und antworten mit einem zufälligen Beitrag. Gehe zum index.js Datei und ändern Sie es zu diesem:
app.get ('/ getpost', Funktion (req, res)) res.end (postTemplate (posts [Math.floor (Math.random () * 3)])));)); Zu diesem:
io.sockets.on ('Verbindung', Funktion (Socket) Socket.on ('getpost', Funktion () Socket.emit ('Getpost', Beiträge [Math.floor (Math.random () * 3))] ););); Dadurch wird der Server mit dem Server verbunden getpost Handler an jeden Client, der eine Verbindung dazu herstellt, und antwortet ihm mit einem zufälligen Post. Jetzt können Sie die App erneut ausführen und ausprobieren. Gehen Sie dann erneut zu den Entwicklertools in Ihrem Browser, gehen Sie zu Netzwerk Tab, filtern Sie es heraus, so dass Sie nur WebSockets sehen und auf das dort sichtbare klicken können. Sie sollten die zwischen dem Browser und dem Server gesendeten Daten sehen und feststellen, dass diese wesentlich kleiner sind als bei der serverseitigen Vorlage und AJAX (die Länge ist in Byte):
Wie Sie sehen, kann (und wird wahrscheinlich) die Verwendung von WebSockets und clientseitigen Vorlagen die Leistung und Lebensdauer Ihrer App verbessern. Ich bin mir sicher, dass es viele Websites gibt, die mit dieser Technik verbessert werden könnten, und ich hoffe, dass Sie damit eine bessere Benutzererfahrung für Ihre mobilen und Desktop-Benutzer erzielen werden.
