Codieren Sie eine Echtzeitumfrage mit HTML5 WebSockets

Derick Mosley

Dieser Artikel erschien zuerst in Ausgabe 217 of .net magazine - das weltweit meistverkaufte Magazin für Webdesigner und Entwickler.

WebSockets sind Teil der HTML5-Spezifikation, und die einfachste Art, sie zu betrachten, besteht darin, dass sie einen Standard für die Erstellung langjähriger bidirektionaler Verbindungen zwischen einem Browser und einem Server setzen. Wenn diese Verbindung besteht, können Browser Nachrichten an den Server zurücksenden (wie z. B. schnelleres Ajax), und, was noch wichtiger ist, der Server kann neue Informationen an verbundene Clients senden, sobald diese verfügbar sind. WebSockets ermöglichen eine Kommunikation mit extrem geringer Latenz bei geringem Overhead.

Es gibt seit vielen Jahren Techniken, um Daten an verbundene Clients zu senden, und diese wurden unter dem Begriff Comet zusammengefasst (siehe en.wikipedia.org/wiki/Comet_(programming) für Details). WebSockets bieten jedoch eine weitaus einfachere und standardisierte Möglichkeit, dies zu tun, und werden wahrscheinlich die Art und Weise revolutionieren, wie Benutzer Echtzeitschnittstellen erstellen. Derzeit sind WebSockets mit mehreren modernen Browsern kompatibel, und für diejenigen, die noch nicht an Bord sind, stehen Flash-Fallback-Optionen zur Verfügung.

Warum sie benutzen? Mit WebSockets können Sie Benutzererlebnisse in Echtzeit viel einfacher erstellen. Die Menschen haben sich bereits an ein Gefühl der Unmittelbarkeit in den Anwendungen gewöhnt, die sie regelmäßig verwenden, und möchten sich mit anderen Menschen verbunden fühlen, die einen Dienst nutzen. Der Aufstieg des Facebook-Chats, der Multiplayer-Online-Spiele, der Echtzeit-Updates von Twitter und der gemeinsamen Bearbeitung über Google Text & Tabellen haben den Weg für die Anwendungen der nächsten Jahre geebnet. Diese Art von Benutzererfahrungen wird immer beliebter, und WebSockets wird die Technologie dahinter sein. Es wird immer wichtiger zu wissen, wie man diese Art von Schnittstellen erstellt.

Wie man sie benutzt

Wie nutzen wir diese großartige neue Technologie? Im Gegensatz zu einigen anderen Teilen der HTML5-Spezifikation benötigen WebSockets sowohl eine Client- als auch eine Serverkomponente. Sie sind daher nicht so einfach in Betrieb zu nehmen wie bei Dingen wie Video, Leinwand, Geolokalisierung oder Formularsteuerelementen. Lassen Sie sich jedoch nicht abschrecken, da es viele Optionen gibt, mit denen Sie beginnen können.

Die erste verfügbare Methode ist die Installation und Wartung Ihres eigenen Socket-Servers. Es gibt Open Source Projekte wie E / A-Buchse , die ziemlich einfach zu beginnen sind. Es ist jedoch nicht immer einfach, diese Art von Socket-Servern in einer durchschnittlichen Hosting-Umgebung zu installieren, da die Hosting-Sicherheitsbeschränkungen auferlegt und die Ressourcenzuweisungen für die langjährigen Verbindungen, die WebSockets benötigen, reduziert wurden.

Eine weitere Option ist die Verwendung eines gehosteten Dienstes, der in Ihre vorhandene Website-Infrastruktur integriert ist. Das bietet meine Firma Pusher.

Für die Tutorials verwende ich unseren Service, da die WebSocket-API ein bisschen 'Bare Bones' ist und eine Abstraktionsschicht die Kommunikation zwischen Client und Server verständlicher machen kann.

Die Abstraktionsschichten können auch gängige Szenarien wie das Behandeln von Verbindungen und das erneute Verbinden von Verbindungen verwalten und umfassendere Features und Funktionen hinzufügen. Beispielsweise kann eine Bibliothek, die WebSockets umschließt, als ähnlich angesehen werden, wie jQuery den Zugriff auf grundlegende DOM-Manipulationen umschließt. denken document.getElementById ('myDiv') vs. jQuery ('# myDiv') .

Wie sehen Sie aus?

Wenn wir sagen, dass WebSockets Teil der HTML5-Spezifikation sind, ist nicht unbedingt klar, was dies bedeutet. In der Praxis bedeutet dies keine Änderung des HTML-Codes der Seite, sondern die Funktionalität wird über einige neue JavaScript-APIs verfügbar gemacht. Das erste, was neu ist, ist ein WebSocket-Objekt, das mit der URL initialisiert wird, zu der es eine Verbindung herstellen muss:

var ws = new WebSocket('ws://example.com');

Dieses WebSocket-Objekt verfügt über mehrere Ereignisse, mit denen Sie sich in den Rest Ihres Codes einbinden können. Die Hauptereignisse treten auf, wenn eine Verbindung geöffnet wird, wenn sie geschlossen wird und wenn neue Nachrichten eintreffen.

socket.onopen = function(evt) { alert('Connection established') } socket.onclose = function(evt){ alert('Connection closed') } socket.onmessage = function(evt){ alert('I got data: ' + evt.data) }

Sie können auch Daten über die Verbindung senden:

socket.send( 'Have some data' );

Anhand des begrenzten Codes oben können Sie hoffentlich sehen, wie Twitter beispielsweise eine WebSocket-Verbindung herstellen kann, die bei ihrem Auftreten neue Tweets empfängt, damit diese auf der Seite angezeigt werden.

Erstellen einer Echtzeitumfrage

Um eine detailliertere Verwendung zu demonstrieren, habe ich ein Beispiel für eine Echtzeitumfrage genommen. Wenn dies eine vollständige Anwendung wäre, würde ich wahrscheinlich einige Dinge anders machen, aber ich kann zeigen, wie nützlich WebSockets sind.

In diesem Beispiel stellt unsere Anwendung die einfache Frage 'Was ist die beste Sprache?' Und bietet Schaltflächen, mit denen der Benutzer seine Wahl treffen kann. Über den Schaltflächen wird ein Diagramm angezeigt, das die Beliebtheit der verschiedenen Antworten verfolgt. Was dies interessanter macht, ist, dass Sie sehen können, wie sich die Ergebnisse in Echtzeit ändern, wenn Personen in anderen Browsern abstimmen.

Apple MacBook Pro umfasst 15 Zoll

Ich werde Ruby auf dem Server verwenden und versuchen, die Dinge ziemlich einfach zu halten, damit wir uns auf die WebSocket-Interaktion konzentrieren können. Ich werde Pusher auch für den WebSocket-Server verwenden, da es die Fallback-Unterstützung für ältere Browser hinzufügt. Den Quellcode finden Sie unter Github . Informationen zum Erstellen der Basisanwendung finden Sie im Abschnitt Erste Schritte. Wenn Sie lieber Echtzeitfunktionen hinzufügen möchten, Laden Sie die Basisanwendung herunter .

Einstieg

Zuerst müssen wir unsere grundlegende Survey Rails-Anwendung erstellen. Wir brauchen eine Datenbank, a SurveyEntry Modell, a Umfrageeinträge Controller und eine Ansicht zur Anzeige der Ergebnisse. In Ruby on Rails ist dies ganz einfach. Öffnen Sie eine Eingabeaufforderung oder ein Terminalfenster und geben Sie die folgenden Befehle ein:

Schienen neue realtime_survey - Erstellen Sie die neue Anwendung
cd realtime_survey - Navigieren Sie in das neue Anwendungsverzeichnis
Rechen db: erstellen - Erstellen Sie die Datenbank
Schienen erzeugen das Modell SurveyEntry. Auswahl: Zeichenfolge - Erstellen Sie die SurveyEntry Modell-
Schienen erzeugen Controller SurveyEntries Index erstellen - Erstellen Sie den SurveyEntries-Controller mit aufgerufenen Aktionen Index und erstellen
Rechen db: migrieren - Erstellen Sie die Umfrageeinträge Tabelle in der Datenbank für das SurveyEntry-Modell

Ein index.html.erb Datei sollte innerhalb der erstellt worden sein / app / views / umfrageeinträge Mappe. Dies ist die Ansicht für die Indexaktion des Umfrageeinträge Regler. Falls vorhanden, löschen Sie die index.html Datei in der gefunden App / Öffentlichkeit Verzeichnis und aktualisieren Sie die /config/routes.rb so dass die Indexaktion innerhalb der SurveyController wird standardmäßig aufgerufen.

RealtimeSurvey::Application.routes.draw doroot :to => 'survey_entries#index' resources :survey_entries end

Wenn Sie die ausführen Rails Server Befehl von der realtime_survey Verzeichnis und gehen Sie zu http: // localhost: 3000 Sie sehen den Inhalt des index.html.erb Aussicht. Fügen wir auch Code hinzu, der die Anzahl der Stimmen pro Sprache aus der Datenbank abruft, indem wir der Methode eine Methode hinzufügen SurveyEntry Modell ( query_entry.rb ). Wir werden die Programmiersprachenoptionen auch im Modell definieren.

class SurveyEntry :choice }) FORM_OPTIONS.map do |o| end end end

Dann sollten wir diesen Code von unserem Controller aus aufrufen und die Umfrageeintragsdaten unserer Ansicht zur Verfügung stellen.

class SurveyEntriesController params[:choice]) redirect_to '/' endend

Schließlich sollten wir unsere Indexansicht für Umfrageeinträge aktualisieren, um die Ergebnisse der Umfrageeinträge und die Programmiersprachenoptionen anzuzeigen.