Buat persembahan berbilang pengguna dengan mendedahkan.js

mata utama

reveal.js adalah perpustakaan HTML5 dan CSS3 yang popular untuk membuat persembahan berasaskan web yang dapat dikawal secara real time oleh beberapa pengguna.
Untuk membuat persembahan berbilang pengguna menggunakan reveal.js, anda perlu menyediakan pelayan Express.js dengan node.js, yeoman, grunt, dan bower dan gunakan socket.io untuk menghantar dan menerima peristiwa perubahan slaid.
Menambah pengesahan asas dalam kod sisi pelayan membantu mencegah pengguna yang tidak dibenarkan daripada mengawal persembahan dan menyediakan laluan alternatif untuk pengguna yang tidak dibenarkan.
reveal.js Presentations boleh disesuaikan dan dipertingkatkan lagi dengan ciri -ciri seperti WebRTC dan boleh dibuat lebih interaktif dengan membenamkan kandungan multimedia, kuiz, undi dan bentuk.

Mengucapkan selamat tinggal kepada era PowerPoint dan merangkul demonstrasi web moden! Dengan pembangunan teknologi web dan peningkatan prestasi penyemak imbas, perpustakaan demonstrasi berdasarkan HTML5 dan CSS3 telah muncul. Reveal.js adalah salah satu perpustakaan yang paling popular yang membuat persembahan yang menakjubkan. Standard WebSocket yang ditakrifkan dalam spesifikasi HTML5 melaksanakan komunikasi dupleks bidirectional dalam penyemak imbas. Banyak perpustakaan JavaScript memudahkan penggunaan WebSocket, dan Socket.io adalah salah satu wakil yang cemerlang. Artikel ini akan meneroka cara membuat persembahan reveal.js yang boleh dikawal oleh beberapa pengguna dan menggunakan socket.io untuk menghantar dan menerima peristiwa perubahan slaid dalam masa nyata (mengabaikan plugin multiplexer yang sedikit lebih kompleks yang dilengkapi dengan mendedahkan.js).

Langkah berjaga -jaga

Artikel ini mengandaikan bahawa anda telah memasang dan boleh menggunakan perpustakaan berikut:

node.js
yeoman
grunt
Bower

Langkah -langkah awal

Pertama, kami akan menyediakan pelayan Express.js. Yeoman memudahkan pemasangan dan operasi pelayan Express.js dengan bantuan penjana. Oleh itu, kami mula-mula memasang Yeoman Express-Generator menggunakan NPM.

$ npm install –g generator-express

Ini akan memasang penjanaan ekspres di seluruh dunia. Sekarang mari kita sediakan pelayan.

$ yo express

Ini akan meminta anda jenis ungkapan yang perlu anda pasang. Anda boleh memilih Asas atau MVC; Ia kemudian akan memasang sekumpulan modul NPM bersama -sama dengan fail Bower.json dan Gruntfile.js.

Seterusnya, gunakan Grunt untuk memulakan pelayan Express.

$ grunt

Yeoman mencipta fail app.js lalai untuk kami dengan tetapan yang diperlukan untuk menjalankan pelayan. Juga, ambil perhatian bahawa ia datang dengan perpustakaan "menonton" yang akan menjejaki perubahan dalam kod dan memuatkan semula pelayan secara automatik, jadi kami tidak perlu melakukan ini secara manual.

Sebelum kami meneruskan, kami akan menggunakan Bower untuk memasang dan menyediakan perpustakaan Reveal.js. Memasang Reveal.js sangat mudah dan langsung. Hanya mengeluarkan arahan berikut di terminal.

$ bower install reveal.js --save

Ini akan mendapat versi stabil terbaru dari Perpustakaan Reveal.js dari GitHub dan memasangnya dalam direktori awam/komponen. Pilihan -Save secara automatik akan mengemas kini bahagian ketergantungan fail bower.json menggunakan reveal.js.

Sekarang kita mempunyai segala yang kita perlukan untuk membuat pelayan persembahan. Kami akan bermula dengan slaid pertama membuat persembahan. Untuk melakukan ini, buat fail HTML dalam folder paparan. (Kod HTML ditinggalkan di sini, yang selaras dengan teks asal)

HTML ini mengandungi fail CSS dan JavaScript untuk mendedahkan.js. Mendedahkan.initialize () menukarkan HTML di atas menjadi persembahan yang indah. Mana -mana bahagian elemen div dengan kelas slides akan bertindak sebagai slaid.

Sebelum kita memulakan demo, kita perlu menubuhkan pelayan untuk menyampaikan fail ini mengikut permintaan. Oleh itu, kami akan mengemas kini app.js dengan kod berikut. (Kod App.js ditinggalkan di sini, yang selaras dengan teks asal)

baris pertama kod memerlukan kebergantungan yang diperlukan dari pelayan, dan kemudian membuat objek ekspres. Baris seterusnya mengkonfigurasi folder awam sebagai direktori statik di mana pelayan akan mencari permintaan untuk fail statik. Kemudian kami menambah laluan untuk menyediakan fail index.html dan memulakan pelayan. Sekarang kita dapat melihat persembahan dalam penyemak imbas menggunakan http: // localhost: 3000/url. Tetapi itu bukan apa yang kita perlukan. Kami memerlukan persembahan ini untuk menjadi multiplex supaya apabila satu pengguna mengubah slaid, ia harus ditunjukkan pada penyemak imbas pengguna lain. Seterusnya, kami akan memasang dan menyediakan modul Socket.io untuk membolehkan komunikasi dua hala menggunakan WebSockets. (Kod berkaitan Socket.io ditinggalkan di sini, yang selaras dengan teks asal, termasuk bahagian keselamatan)

Anda boleh mencari kod sumber penuh dari GitHub.

Ringkasan

Dalam artikel ini, kita telah melihat bagaimana untuk membina persembahan yang mudah diturunkan.js yang boleh dikawal oleh beberapa pengguna. Di sini kami menggunakan perpustakaan Socket.io untuk mengemas kini semua pelanggan yang disambungkan secara real time. Kami juga menambah keselamatan asas untuk mengelakkan pengguna yang tidak dibenarkan daripada mengawal persembahan. Anda boleh menambah lebih banyak ciri dan menggunakan teknologi seperti WebRTC untuk menjadikannya lebih popular, jadi saya harap anda dapat melihat bahawa artikel ini hanya permulaan.

(bahagian FAQ ditinggalkan di sini, yang selaras dengan teks asal)

Atas ialah kandungan terperinci Buat persembahan berbilang pengguna dengan mendedahkan.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!