Erstellen Sie mit Socket.IO eine Echtzeit-App

Socket.IO ist wahrscheinlich das bekannteste aller Echtzeit-Webframeworks. In Kombination mit Node.js ist es verantwortlich für eine deutliche Steigerung des Bewusstseins für die Vorteile von 'Evented Web', Echtzeitdaten und interaktiven Benutzererlebnissen in Echtzeit.

In diesem Tutorial werde ich einen Blick auf die Funktionen des neuen Socket.IO 1.0 werfen und zeigen, wie damit eine App für Echtzeitanalysen erstellt werden kann.

Zur Vereinfachung erfassen wir die Seiten-URL und einige Browserfunktionen mit Modernizr (modernizr.com). Diese Informationen werden über eine Socket.IO-Verbindung an den Server gesendet.



Der Server führt einige grundlegende Analysen dieser Daten durch, speichert sie und veröffentlicht die Daten in einem Dashboard. Das Dashboard empfängt die Informationen und zeigt sie mithilfe der Epoch-Diagrammbibliothek (fastly.github.io/epoch) an.

Einstieg

Für diese App benötigen Sie bei mindestens Node.js v0.10.25 installiert . Sie müssen auch Laden Sie die Zip-Datei 'Erste Schritte' herunter . Entpacken Sie dieses Archiv und Sie sehen ein node_modules-Verzeichnis mit allen Node.js-Modulen, die wir für dieses Tutorial benötigen.

Wir werden unseren gesamten clientseitigen Code in das öffentliche Verzeichnis stellen - dort befindet sich ein Verzeichnis bower_components, das alle JavaScript-Bibliotheken enthält, von denen unsere App abhängt. Es gibt auch ein Dashboard-Verzeichnis, in dem wir das Dashboard-Frontend erstellen.

Lassen Sie uns Socket.IO einrichten und eine Testseite erstellen, die eine Verbindung zum laufenden Server herstellt. Erstellen Sie zunächst eine index.js-Datei im Stammverzeichnis Ihres Arbeitsverzeichnisses. Da wir ein Dashboard bereitstellen möchten, erstellen wir zunächst einen Webserver mit ausdrücken , eines der beliebtesten Node.js-Webserver-Pakete.

var express = require( ‘express’ ); var app = express(); app.use( express.static( __dirname + ‘/public’) ); var server = require( ‘http’ ).Server( app ); server.listen( 3000, function(){ console.log( ‘listening on *:3000’ ); } );

In index.js verwenden wir die express.static-Funktion von Express, um zu deklarieren, dass alle Dateien im öffentlichen Ordner direkt bereitgestellt werden können. Lassen Sie uns eine capture.html im öffentlichen Verzeichnis erstellen.

Führen Sie den Knoten index.js in Ihrem Arbeitsverzeichnis an einer Eingabeaufforderung aus und navigieren Sie in Ihrem Browser zu http: // localhost: 3000 / capture.html. Stellen Sie sicher, dass diese Datei bereitgestellt wird. Jetzt können wir index.js Socket.IO hinzufügen.

var server = require( ‘http’ ).Server( app ); var io = require( ‘socket.io’ )( server ); io.on( ‘connection’, function( socket ) { console.log( ‘We have a connection!’ ); } );

Ein Verweis auf den laufenden Server wird über require ('http') abgerufen. Server (App) und Socket.IO können dann mit var io = require ('socket.io') (Server) eine Verbindung zu diesem Server herstellen. Wir binden auch mit io.on ('connection, function () {}) an das Verbindungsereignis und melden uns bei der Verbindung an, wenn das Ereignis ausgelöst wird. Dieses Ereignis zeigt an, dass eine Verbindung von einem Client erkannt wurde.

Schließlich müssen wir etwas JavaScript hinzufügen, um es zu erfassen. HTML, um eine Verbindung zu Socket.IO herzustellen.

var socket = io( 'localhost:3000' ); socket.on( 'connect', function() { console.log( 'connected' ); } );

Um dies zu erreichen, haben wir die Socket.IO-Clientbibliothek aufgenommen, eine neue Socket-Verbindung mit io ('localhost: 3000') erstellt und an das Verbindungsereignis gebunden, damit wir wissen, wann die Serververbindung hergestellt wurde.

wie man wie ein Chef zeichnet

Laden Sie die Datei capture.html neu und öffnen Sie die JavaScript-Konsole, um nach der verbundenen Protokollnachricht zu suchen. Schauen Sie sich die Eingabeaufforderung an, mit der Sie den Knoten index.js ausgeführt haben, und Sie werden sehen, dass wir eine Verbindung haben!

Daten erfassen

Mit den Grundlagen können wir nun mit der Erfassung von Daten vom Client beginnen. Wir werden capture.html verwenden, um diese Funktionalität zu entwickeln und zu testen.

Die Informationen, die wir erfassen und letztendlich anzeigen werden, lauten wie folgt: Es wurde eine Verbindung hergestellt, welche Seiten-URL der Benutzer anzeigt und einige Browserfunktionen des Benutzers wie Touch- und HTML5-Video-Unterstützung.

var socket = io( 'localhost:3000/capture' ); socket.on( 'connect', function() { var data = { url: window.location.href, touch: Modernizr.touch, video: Modernizr.video }; socket.emit( 'client-data', data ); } );

Die URL, zu der wir eine Verbindung herstellen, lautet localhost: 3000 / capture, wobei / capture ein Beispiel für einen Socket.IO-Namespace ist (netm.ag/names-258). Namespaces sind praktisch zum Partitionieren von Daten - hier identifizieren sie einen Kommunikationskanal zum Erfassen von Daten.

Im Rückruf des Verbindungsereignisses erstellen wir ein Datenobjekt, auf dem wir alle von unserer App gewünschten Informationen speichern. Die Seiten-URL wird in data.url gespeichert und Modernizr wird zum Erfassen von Werten für data.touch und data.video verwendet. Schließlich werden die Informationen mit socket.emit ('Client-Daten', Daten) an den Server gesendet.

Wir senden jetzt alle Daten, die wir erfassen möchten, an den Server. Aktualisieren wir den Servercode in index.js, um zu beweisen, dass diese Daten abgerufen werden:

var io = require( 'socket.io' )( server ); var capture = io.of( '/capture' ); capture.on( 'connection', function( socket ) { socket.on( 'client-data', function( data ) { console.log( data ); } ); } );

Sie werden feststellen, dass der Servercode ebenfalls aktualisiert wurde, um jetzt auf den Namespace / capture zu verweisen. Es ist wichtig, dass wir einen Namespace verwenden. Andernfalls zählen wir die Verbindungen zu unserem Dashboard in den Statistiken, wenn wir ihn erstellen.

Wir binden an das Client-Datenereignis, das das Ereignis widerspiegelt, das wir auf dem Client ausgeben. Wenn Sie den Knotenprozess neu starten und die Datei capture.html aktualisieren, werden die erfassten Informationen an der Eingabeaufforderung protokolliert.

Speichern von Statistikdaten

Auf dem Server möchten wir die Verbindungen und zugehörigen Daten verfolgen, damit wir Statistiken berechnen können.

var socketData = {}; var stats = { connections: 0, touch: 0, video: 0, pages: {} }; var capture = io.of( '/capture' ); capture.on( 'connection', function( socket ) { ++stats.connections; socket.on( 'client-data', function( data ) ); } );

Zunächst wird die Verbindungsanzahl erhöht, wenn ein Benutzer eine Verbindung zum Namespace / capture herstellt. Die Variable socketData wird verwendet, um einen Socket mithilfe einer eindeutigen socket.id den zugehörigen Statistikdaten zuzuordnen.

Die Speicherung erfolgt im Client-Datenereignis-Rückruf. Berührungs- und Videowerte werden erhöht, wenn dies vom Client unterstützt wird. Die Anzahl der Verbindungen auf jeder Seite wird per URL in der Eigenschaft stats.pages gespeichert.

Wir müssen auch die Statistiken aktualisieren, da Verbindungen unterbrochen werden. Binden Sie innerhalb des Verbindungsrückrufs an das Trennungsereignis für das Socket-Objekt:

stats.pages[ data.url ] = ++pageCount; } ); socket.on( 'disconnect', function() { --stats.connections; stats.touch -= ( socketData[ socket.id ].touch? 1 : 0 ); stats.video -= ( socketData[ socket.id ].video? 1 : 0 ); --stats.pages[ socketData[ socket.id ].url ]; delete socketData[ socket.id ]; } );

Auf die gleiche Weise, wie wir die Werte im Verbindungsrückruf erhöht haben, verringern wir die Werte im Trennungsrückruf.

Daten veröffentlichen

Nachdem alle Daten gespeichert wurden, möchten wir sie veröffentlichen, damit ein Dashboard die Statistiken verwenden und anzeigen kann. Da alle Daten bereits im Statistikobjekt gespeichert sind, müssen wir sie nur veröffentlichen. Dafür verwenden wir einen / dashboard-Namespace.

var stats = { connections: 0, touch: 0, video: 0, pages: {} }; var dashboard = io.of( '/dashboard' ); dashboard.on( 'connection', function( socket ) { socket.emit( 'stats-updated', stats ); } );

Auf den Namespace / dashboard wird verwiesen, und wenn eine neue Verbindung erkannt wird, werden die aktuellen Statistiken nur an den neu verbundenen Socket ausgegeben.

Wir müssen außerdem ein Ereignis für alle Dashboard-Clients auslösen, wenn die Statistiken aktualisiert werden - beispielsweise nachdem ein Clientdatenereignis empfangen und verarbeitet wurde oder wenn eine / capture-Verbindung das Trennungsereignis auslöst. Senden Sie dazu einfach ein am Status aktualisiertes Ereignis im Dashboard-Namespace am Ende der entsprechenden Rückrufe aus:

dashboard.emit( 'stats-updated', stats );

Echtzeit-Analyse-Dashboard

Jetzt müssen Sie nur noch das Dashboard erstellen. Wenn Sie public / dashboard / index.html öffnen, werden die Epoch-Diagrammbibliothek, das Stylesheet und die Abhängigkeiten angezeigt.

In dieser Datei finden Sie auch verschiedene Elementplatzhalter mit klar benannten ID-Attributen für unsere Echtzeit-Analysediagramme: Besucherbereichsdiagramm für die Anzahl der Verbindungen, Seitenbalkendiagramm für beliebte Seiten, Touch- und Videoanzeigen für die Touch-Unterstützung bzw. Videoelement-Unterstützung .

Auf eine Datei js / dashboard.js wird auch in index.html verwiesen. Öffnen Sie dies und initialisieren Sie die Epochendiagramme.

var visitors = $('#visitors').epoch( { type: 'time.area', axes: ['left', 'bottom', 'right'], data: [ { values: [ { time: Date.now()/1000, y: 0 } ] } ], } ); var pages = $( '#pages' ).epoch( { type: 'bar' } ); var touch = $( '#touch' ).epoch( { type: 'time.gauge' } ); var video = $( '#video' ).epoch( { type: 'time.gauge' } );

Der Server veröffentlicht die Statistiken bereits, sobald er sie enthält. Um diese Daten zu erhalten, müssen wir den Namespace / dashboard abonnieren und an das Ereignis mit aktualisierten Statistiken binden.

Fertig

Schließlich müssen wir die gewünschten Daten aus dem Update extrahieren und unseren Diagrammen mitteilen, dass sie aktualisiert werden sollen.

var video = $( '#video' ).epoch( { type: 'time.gauge' } ); var dashboard = io( 'localhost:3000/dashboard' ); dashboard.on( 'stats-updated', function( update ) { visitors.push( [ { time: Date.now()/1000, y: update.connections } ] ); var pagesData = []; for( var url in update.pages ) { pagesData.push( { x: url, y: update.pages[ url ] } ); } pages.update( [ { values: pagesData } ] ); touch.update( update.touch / update.connections || 0 ); video.update( update.video / update.connections || 0 ); } );

Um das Besucherdiagramm zu aktualisieren, verweisen wir auf update.connections und aktualisieren das Besucherdiagramm. Wir durchlaufen die Datei update.pages und formatieren die Daten, wobei x die Seiten-URL und y die Anzahl der Verbindungen auf dieser Seite ist. Die Touch- und Video-Anzeigen werden mit einem Wert zwischen 0 und 1 aktualisiert, basierend auf dem Verhältnis von stat zu Verbindungen.

Wenn alles vorhanden ist, können Sie jetzt den Knotenprozess neu starten und http: // localhost: 3000 / dashboard / index.html laden, um das Dashboard anzuzeigen. Öffnen Sie http: // localhost: 3000 / capture.html auf einer oder mehreren Registerkarten, um mit der Datenerfassung zu beginnen und die erfassten Daten sofort im Dashboard anzuzeigen.

Fazit

Wir haben nur die Oberfläche dessen zerkratzt, was mit dieser Anwendung und den neuen Tools und Funktionen in Socket.IO 1.0 erreicht werden kann. Hoffentlich hat Ihnen dieses Tutorial einen Vorgeschmack darauf gegeben, wie leistungsfähig und einfach es sein kann, Echtzeittechnologien in Ihren Web-Apps zu verwenden.

Wörter: Phil Leggetter

So brechen Sie die Adobe Illustrator-Testversion ab

Phil Leggetter ist Experte für Echtzeit-Webtechnologien, JavaScript und HTML5. Folgen Sie ihm auf Twitter unter @leggetter .

So was? Lesen Sie dies!