Erstellen

Schlüsselpunkte

• doffene.js ist eine beliebte Bibliothek HTML5 und CSS3, um beeindruckende webbasierte Präsentationen zu erstellen, die von mehreren Benutzern in Echtzeit gesteuert werden können.
• Um eine Multi-Benutzer-Präsentation mit dendous.js zu erstellen, müssen Sie einen Express.js-Server mit node.js, yeoman, grunzen und bower einrichten und Socket.io verwenden, um Ereignisse zu senden und zu empfangen.
• Hinzufügen der grundlegenden Authentifizierung im serverseitigen Code hilft, nicht autorisierte Benutzer daran zu hindern, Präsentationen zu steuern, und bietet alternative Routen für nicht autorisierte Benutzer.
• enthüllt.js Präsentationen können mit Funktionen wie WEBRTC weiter angepasst und verbessert werden und durch Einbetten von Multimedia -Inhalten, Quiz, Stimmen und Formularen interaktiver gestaltet werden.

Verabschieden Sie sich von der PowerPoint -Ära und nutzen Sie moderne Webdemonstrationen! Mit der Entwicklung der Web -Technologie und der Verbesserung der Browserleistung hat sich eine Demonstrationsbibliothek basierend auf HTML5 und CSS3 entstanden. Enthuy.js ist eine der beliebtesten Bibliotheken, die atemberaubende Präsentationen erstellen. Der in der HTML5-Spezifikation definierte WebSocket-Standard implementiert die bidirektionale Voll-Duplex-Kommunikation im Browser. Viele JavaScript -Bibliotheken vereinfachen die Verwendung von WebSocket, und Socket.io ist einer der ausstehenden Vertreter. In diesem Artikel wird untersucht, wie eine DILDECT.JS -Präsentation erstellt werden kann, die von mehreren Benutzern gesteuert werden kann und mit Socket.io in Echtzeit Sendungswechsel -Ereignisse senden und empfangen kann (ignoriert das etwas komplexere Multiplexer -Plugin, das mit Enthüllung.js geliefert wird).

Vorsichtsmaßnahmen

In diesem Artikel geht davon aus, dass Sie installiert haben und die folgenden Bibliotheken verwenden können:

• node.js
• yeoman
• grunzen
• bower

Anfangsschritte

Erstens werden wir einen Express.js -Server einrichten. Yeoman vereinfacht die Installation und den Betrieb von Express.js -Servern mit Hilfe von Generatoren. Also installieren wir zuerst Yeoman Express-Generator mit NPM.

<code class="language-bash">$ npm install –g generator-express</code>

wird weltweit Express-Generator installiert. Lassen Sie uns nun den Server einrichten.

<code class="language-bash">$ yo express</code>

Aus diesem Grund werden Sie gefragt, welche Art von Ausdruck Sie installieren sollten. Sie können Basic oder MVC auswählen. In unserem Fall benötigen wir nur die Grundeinstellungen. Anschließend werden eine Reihe von NPM -Modulen zusammen mit Bower.json und Gruntfile.js -Dateien installiert.

Verwenden Sie als nächstes Grunzen, um den Express -Server zu starten.

<code class="language-bash">$ grunt</code>

yeoman erstellt eine Standard -App.js -Datei für uns mit den Einstellungen, die zum Ausführen des Servers erforderlich sind. Beachten Sie außerdem, dass sie mit einer "Uhr" -Bibliothek ausgestattet ist, in der Änderungen im Code verfolgt und den Server automatisch neu geladen werden, sodass wir dies nicht manuell ausführen müssen.

Bevor wir fortfahren, werden wir die Bower verwenden, um die Bibliothek von Discover.js einzurichten. Installieren enthüllt.js ist sehr einfach und direkt. Geben Sie einfach den folgenden Befehl im Terminal aus.

<code class="language-bash">$ bower install reveal.js --save</code>

Dies wird von GitHub die neueste stabile Version der Discover.js -Bibliothek erhalten und sie im Verzeichnis der Öffentlichkeit/Komponenten installiert. Die Option -Save -Option aktualisiert automatisch den Abhängigkeitsteil der Bower.json -Datei mit dendend.js.

Jetzt haben wir alles, was wir brauchen, um einen Präsentationsserver zu erstellen. Wir beginnen mit der ersten Folie des Erstellens der Präsentation. Erstellen Sie dazu eine HTML -Datei im Ordner "Ansichten". (Der HTML -Code wird hier weggelassen, was mit dem Originaltext übereinstimmt)

Diese HTML enthält die CSS- und JavaScript -Dateien für dendend.js. Enthüllen.initialize () konvertiert das obige HTML in eine schöne Präsentation. Jeder Teil des div -Elements mit der slides -Klasse wirkt als Folie.

Bevor wir die Demo starten, müssen wir den Server einrichten, um diese Datei gemäß der Anfrage zu erstellen. Daher werden wir App.js mit dem folgenden Code aktualisieren. (Der App.js -Code ist hier weggelassen, was mit dem Originaltext übereinstimmt)

Die erste Codezeile erfordert die erforderlichen Abhängigkeiten vom Server und erstellt dann ein Expressobjekt. Die nächste Zeile konfiguriert den öffentlichen Ordner als statisches Verzeichnis, in dem der Server nach Anforderungen für die statische Datei sucht. Anschließend fügen wir eine Route hinzu, um die Index.html -Datei bereitzustellen und den Server zu starten. Jetzt können wir die Präsentation im Browser mit der http: // localhost: 3000/url anzeigen. Aber das brauchen wir nicht wirklich. Wir müssen diese Präsentation multiplexen, damit ein Benutzer die Folie ändert, sie auf dem Browser eines anderen Benutzers reflektiert werden sollte. Als nächstes werden wir das Socket.IO-Modul installieren und einrichten, um die Zwei-Wege-Kommunikation mithilfe von Websockets zu aktivieren. (Der in Socket.io verwandte Code wird hier weggelassen, was mit dem Originaltext einschließlich des Sicherheitsteils übereinstimmt)

)

Sie können den vollständigen Quellcode von GitHub finden.

Zusammenfassung

In diesem Artikel haben wir gesehen, wie man eine einfache Präsentation für enthüllt.js erstellt, die von mehreren Benutzern gesteuert werden kann. Hier verwenden wir die Socket.io -Bibliothek, um alle verbundenen Clients in Echtzeit zu aktualisieren. Wir haben auch grundlegende Sicherheit hinzugefügt, um zu verhindern, dass nicht autorisierte Benutzer die Präsentation kontrollieren. Sie können weitere Funktionen hinzufügen und Technologien wie WebRTC anwenden, um es populärer zu machen. Ich hoffe, Sie können sehen, dass dieser Artikel nur der Anfang ist.

(Der FAQ -Teil wird hier weggelassen, was mit dem Originaltext übereinstimmt)

Das obige ist der detaillierte Inhalt vonErstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!