Bina Aplikasi Web dengan Backbone.js dan Socket.io

Takeaways Key

Backbone.js menyediakan struktur kepada aplikasi web dengan menawarkan model dengan pengikatan nilai utama dan peristiwa tersuai, koleksi dengan fungsi yang dapat disebutkan, pandangan dengan pengendalian acara, dan sambungan ke API yang sedia ada melalui antara muka JSON yang tenang.
socket.io adalah perpustakaan JavaScript yang membolehkan aplikasi web masa nyata dengan membenarkan komunikasi dua arah antara pelanggan dan pelayan web. Ia digunakan untuk membuat sesi komunikasi interaktif antara penyemak imbas pengguna dan pelayan.
Corak PubSub adalah paradigma pemesejan tak segerak yang membantu mengelakkan gandingan, menjadikan kod lebih fleksibel, boleh diperluas, dan dikekalkan. Backbone.js membuat pelaksanaan sistem acara ini dengan mudah. ​​
Dalam contoh yang disediakan, Backbone.js dan Socket.io digunakan untuk membuat alat visualisasi graf di mana data disegerakkan di seluruh pengguna dalam masa nyata. Kod ini berstruktur untuk membolehkan penyesuaian dan penghijrahan mudah ke perpustakaan atau pangkalan data lain.
Menjalankan contoh tempatan melibatkan pengklonan repositori GitHub, memasang kebergantungan, memulakan aplikasi, dan menuju ke http: // localhost: 5000 untuk melihat aplikasi yang sedang berjalan.
Artikel ini dikaji semula oleh Thomas Greco dan Marc Towler. Terima kasih kepada semua pengulas rakan sebaya SitePoint untuk membuat kandungan SitePoint yang terbaik!

Sebilangan besar daripada anda tahu, Backbone.js adalah rangka kerja MV yang terkenal. Ia dihoskan di GitHub dan ia memberikan struktur kepada aplikasi web dengan menyediakan model dengan pengikatan nilai utama dan peristiwa tersuai, koleksi dengan API yang kaya dengan fungsi yang boleh dibaca, pandangan dengan pengendalian peristiwa deklaratif, dan menghubungkan semuanya ke API anda yang sedia ada antara muka JSON yang tenang.

Dalam artikel ini, kami akan menggunakan ciri terbina dalam Backbone yang dipanggil

peristiwa

untuk melaksanakan paradigma pemesejan tak segerak untuk mengelakkan gandingan. Idea ini adalah untuk memisahkan kumpulan kod yang sangat bergantung pada satu sama lain. Contoh yang akan saya tunjukkan adalah alat visualisasi graf di mana data adalah pengguna salib yang disegerakkan dengan indah. Penggunaan WebSockets akan memungkinkan untuk membuka sesi komunikasi interaktif antara penyemak imbas pengguna dan pelayan.

Matlamatnya adalah untuk mengekalkan contoh semudah mungkin. Konsep -konsep yang dipelajari di sini akan membantu anda banyak dalam mengurangkan gandingan. Di samping itu, ini adalah pendekatan yang sangat membantu untuk membina kod yang boleh diperluaskan, fleksibel, dan boleh dipelihara. Pada akhir eksperimen kami, kami akan mempunyai hasil berikut:

backbone.js

Backbone.js adalah rangka kerja untuk membina aplikasi satu halaman dengan menyediakan model , paparan , pengawal , koleksi , dan peristiwa tersuai . Strukturnya membantu kami memisahkan antara muka pengguna dari logik perniagaan. Dalam artikel ini saya akan memperkenalkan anda hanya pada beberapa elemen ini tetapi sekiranya anda mahukan panduan yang lebih mendalam, saya cadangkan anda membaca artikel "Backbone.js Asas: Model, Pandangan, Koleksi dan Templat".

Model mewakili data dan ia boleh dibuat dengan memperluaskan tulang belakang.model:

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

Pandangan adalah cara untuk mengatur antara muka pengguna ke dalam pandangan logik, yang disokong oleh model. Ia tidak mengandungi markup HTML, tetapi hanya logik di sebalik pembentangan data model kepada pengguna. Untuk membuat paparan, anda perlu melanjutkan Backbone.View seperti berikut:

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

Acara adalah modul yang boleh dicampur ke mana -mana objek, memberikan objek keupayaan untuk mengikat dan mencetuskan peristiwa bernama adat. Kedua -dua model dan Lihat Mempunyai modul ini event yang membolehkan kita mengikat peristiwa ke model atau Lihat . Corak yang sama adalah mewujudkan pandangan yang mendengar perubahan dalam model. Teknik ini biasanya bertujuan untuk membolehkan pandangan secara automatik membuat semula apabila data asas berubah.

Untuk memberi anda contoh bagaimana unsur -unsur ini berfungsi bersama, saya telah membuat demo pada Codepen.

lihat pena xxpwmq oleh sitepoint (@sitePoint) pada codepen.

setiap kali kita menukar input , paparan mengubah model kami . Setelah memukul butang OK, paparan menjadikan nilai ID baru.

komunikasi masa nyata antara pelayan dan klien

WebSockets adalah cara maju yang memungkinkan untuk membuka sesi komunikasi interaktif antara pelayar pengguna dan pelayan. Dengan API ini, pengguna boleh menghantar mesej ke pelayan dan menerima respons yang didorong oleh acara tanpa perlu mengundi pelayan untuk balasan. Kontrak ini adalah perjanjian yang menggambarkan peraturan dan tingkah laku yang diharapkan, dan melibatkan tindakan dari kedua -dua pihak. Apabila kedua -dua keping ini menghubungkan melalui API, ia bertindak sebagai gam untuk mengintegrasikan pelayan dan klien.

Dalam analogi jambatan, sekali di tempat, data dan arahan dapat menyeberangi jambatan. Sebagai contoh, pelayan menerima arahan, melakukan tindakan, dan selepas memproses arahan, ia mengembalikan maklumat kembali ke aplikasi web. Memberi dan mendapat antara pihak. Dengan lapisan abstraksi ini (API), kami menyembunyikan perkara -perkara rumit perkhidmatan web, tanpa perlu memahami butiran lanjut tentang bagaimana pelayan telah melakukan tindakan.

socket.io adalah perpustakaan JavaScript untuk aplikasi web masa nyata. Ia membolehkan komunikasi dua arah antara pelanggan web dan pelayan. Kedua-dua pihak mempunyai API yang sama dan didorong oleh peristiwa seperti Node.js. Untuk membuka sesi komunikasi interaktif ini antara penyemak imbas dan pelayan, kami perlu membuat pelayan HTTP untuk membolehkan komunikasi masa nyata. Ia akan membolehkan kita memancarkan dan menerima mesej. Soket adalah objek yang mengendalikan komunikasi ini antara pelanggan web dan pelayan.

Kod di bawah mencipta pelayan itu menggunakan socket.io dengan rangka kerja ekspres.

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

Selepas membuat pelayan itu, kami mempunyai kelas IO yang membolehkan untuk menyediakan panggilan balik yang mengambil soket sebagai parameter. Dengan objek soket ini, kami dapat membuat sambungan antara penyemak imbas pengguna dan pelayan.

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

Dalam penyemak imbas, klien menghubungkan ke pelayan yang memanggil fungsi IO yang mengembalikan soket untuk sambungan:

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

berkata, mari kita buat komunikasi mudah bahawa data dan arahan dapat menyeberangi jambatan.

io<span>.on('connection', function(socket) {  
</span>  <span>console.log('a user connected');
</span>  socket<span>.on('disconnect', function(){
</span>    <span>console.log('user disconnected');
</span>  <span>});
</span><span>});</span>

dengan kod ini di tempat kita dapat membina demo berikut:

lihat pen mvrymw oleh sitepoint (@sitePoint) pada codepen.

Sekiranya anda ingin mengetahui lebih lanjut mengenai Socket.io dan Express, saya cadangkan anda artikel berikut:

• Pengenalan kepada Stack Mean
• Membuat API RESTFUL dengan Express 4
• Bina aplikasi web ruang sembang node.js: nod, mongoDB dan soket
• aplikasi sembang menggunakan socket.io

backbone.js dengan socket.io

Dalam bahagian ini saya akan menunjukkan kepada anda contoh cara menggunakan socket.io dengan tulang belakang.js:

<span>var socket = io("http://pubsub-example-with-backbone.herokuapp.com/");</span>

dan ini hasilnya:

lihat pen qydxwo oleh sitepoint (@sitePoint) pada codepen.

pubSub dengan backbone.js

PubSub adalah paradigma pemesejan tak segerak. Ia memberikan ciri yang memberi kita untuk mengelakkan gandingan. Gandingan adalah apabila sekumpulan kod sangat bergantung pada satu sama lain, yang bermaksud bahawa jika sekeping kod berubah, maka kemas kini segala -galanya yang menggunakan sekeping kod ini diperlukan.

pubSub adalah corak yang mempunyai penyegerakan penyegerakan. Ia menggunakan sistem acara seperti cara kerja radio: Siaran stesen radio ( menerbitkan ) dan sesiapa sahaja boleh mendengar ( Pelanggan ). Lebih -lebih lagi, bukannya bercakap dengan objek lain secara langsung, anda boleh menerbitkan mesej di stesen radio bersama. Sistem acara itu membolehkan kita menentukan peristiwa yang boleh lulus argumen yang mengandungi nilai yang diperlukan oleh pelanggan. Backbone.js menjadikan pelaksanaan sistem acara ini cukup mudah. Anda hanya perlu mencampur tulang belakang.

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

Pada ketika ini, anda boleh menggunakan pencetus standard dan kaedah untuk menerbitkan dan melanggan mesej:

<span>var MyView = Backbone.<span>View</span>.extend({
</span>  <span>el: 'div#my-view-container',
</span>  <span>initialize: function (options) {
</span>    <span>this.model = new MyModel()
</span>    <span>console.log('view initialized')
</span>  <span>}
</span><span>})</span>

Melakukannya, maka anda kini dapat mengeluarkan soket.io dari pandangan tulang belakang kami.

<span>var express = require('express'),  
</span>    app     <span>= express(),
</span>    http    <span>= require('http').<span>Server</span>(app),
</span>    io      <span>= require('socket.io')(http);
</span>
http<span>.listen(process.env.PORT || 5000, function(){  
</span>  <span>console.log('listening on *:5000');
</span><span>});</span>

Matlamatnya adalah untuk mengelakkan kebergantungan antara modul. Setiap modul boleh mempunyai saluran seperti stesen radio yang menembak peristiwa (penerbit) dan mana -mana modul lain boleh mendengar peristiwa mereka yang ingin menerima pemberitahuan (pelanggan).

Hasil yang diperoleh adalah yang berikut:

lihat pena gpgnpz oleh sitepoint (@sitePoint) pada codepen.

contoh visualisasi graf

Visualisasi graf kami menggunakan dua modul pada sisi klien: satu untuk melukis graf yang diarahkan dan satu lagi untuk menyimpan dan mengambil data. Modul lukisan graf menggunakan alat bernama editor Force. Modul ini, yang kami panggil ForceView dalam kod, membolehkan kami meletakkan nod graf dalam ruang dua dimensi dengan cara yang mudah dan intuitif. Modul penyimpanan, yang kami panggil DBAA, menggunakan socket.io untuk membolehkan komunikasi realtime, bi-arah antara pelanggan web dan pelayan. Tiada seorang pun daripada mereka,

ForceView dan dbaas , tahu tentang mana -mana yang lain. Tingkah laku mereka semuanya berasingan.

Kedua -dua modul ditubuhkan dalam gaya

Publish/Langgan untuk mengelakkan kebergantungan. Mereka menggunakan sistem acara dengan cara yang sama seperti kerja radio, dengan penyiaran stesen radio (penerbitan) dan penerima radio mendengar (melanggan). Daripada bercakap dengan yang lain secara langsung, setiap modul menerbitkan mesej mereka di stesen radio " " menembak peristiwa di saluran mereka sendiri, dan yang lain juga boleh mendengar mana -mana saluran lain untuk acara. Satu -satunya kebergantungan di sini adalah pada setiap saluran radio yang mempunyai API yang sangat kecil. Apa yang penting ialah mesej saluran itu mencetuskan, dan untuk memastikan bahawa sistem bertindak balas terhadap peristiwa dengan betul. Jika mereka mencetuskan peristiwa dan memberikan perkara yang betul, sistem akan berfungsi secara keseluruhan. Lihatlah imej di bawah untuk melihat peristiwa mana yang dipancarkan dari setiap modul ini.

Pandangan tulang belakang bertindak sebagai mediator antara Forceview dan DBAAs. Ini membolehkan kita untuk menguraikan segala -galanya ke dalam kepingan kecil yang boleh digunakan dan kemudian membuat kepingan -kepingan kecil itu berfungsi dengan indah bersama -sama. Dengan cara ini, kod menjadi lebih mudah untuk difahami dan mudah dikekalkan. Sebagai contoh, jika kita mahu menyesuaikannya hanya sedikit untuk memenuhi rasa tertentu, kita boleh dengan mudah mengambil modul dan mengubahnya dengan cara yang kita suka. Kami boleh menggantikan visualisasi graf oleh perpustakaan graf lain, mis. JQplot, Dracula, Arborjs, Sigmajs, Raphaeljs dan sebagainya. Atau kita boleh menggunakan mana -mana pangkalan data masa nyata seperti Firebase, AppBase, Neo4J, Titandb, dan lain -lain. Berita baiknya ialah kita hanya perlu menukar satu fail untuk berhijrah ke perpustakaan lain. Imej di bawah menggambarkan interaksi antara pandangan tulang belakang dan kedua -dua modul ini.

Sila ambil perhatian bahawa kami tidak menggunakan mana -mana pangkalan data. Data disimpan dalam ingatan. Cara kami memusnahkan kod ini membolehkan kami menyambung ke mana -mana jenis pangkalan data.

menjalankan contoh visualisasi graf kami secara tempatan

keseluruhan kod boleh didapati di GitHub. Anda boleh mengklon repositori atau memuat turun kod.

<span>var MyModel = Backbone.<span>Model</span>.extend({
</span>  <span>initialize: function () {
</span>    <span>console.log('model initialized');
</span>  <span>}
</span><span>})</span>

kemudian laksanakan pemasangan NPM dari konsol untuk memasang semua kebergantungan.

Seterusnya, laksanakan node server.js untuk memulakan aplikasi.

Kepala ke http: // localhost: 5000 dengan penyemak imbas anda untuk melihat aplikasi berjalan. Jika anda hanya ingin melihat aplikasi dalam tindakan, anda boleh mencari demo di sini.

KESIMPULAN

selesai! Kami hanya menggunakan ciri tulang belakang terbina dalam untuk melaksanakan corak pubSub. Di samping itu, kami menggunakan corak ini untuk mewakili dan menyimpan data graf dalam masa nyata di mana data disegerakkan dengan indah di seluruh pengguna. Seperti yang anda lihat, kami mempunyai beberapa konsep menarik yang menarik dalam contoh yang hebat untuk melihat kepingan kod yang bekerja bersama -sama.

Langkah seterusnya sekarang ialah menyesuaikannya dan menyimpan data dalam pangkalan data dan bukannya dalam ingatan. Tetapi kami mungkin akan membincangkan tentang penyesuaian dalam salah satu jawatan yang akan datang.

Jangan ragu untuk berkongsi komen anda di bahagian di bawah.

Soalan Lazim (Soalan Lazim) Mengenai Membina Aplikasi Web Dengan Backbone.js dan Socket.io

Apakah peranan Backbone.js dalam membina aplikasi web? Dengan API yang kaya dengan fungsi -fungsi yang boleh dibaca, pandangan dengan pengendalian peristiwa deklaratif, dan menghubungkan semuanya ke API anda yang sedia ada melalui antara muka JSON yang tenang. Ia membantu dalam mengatur kod anda dan menjadikannya lebih mudah untuk dikendalikan. Ia amat berguna apabila berurusan dengan antara muka pengguna yang kompleks dan sejumlah besar data.

Bagaimanakah Socket.io meningkatkan fungsi aplikasi web?

socket.io adalah perpustakaan JavaScript yang membolehkan komunikasi masa nyata, bidirectional, dan berasaskan acara antara pelayar dan pelayan. Ia terdiri daripada dua bahagian: perpustakaan sisi klien yang berjalan di penyemak imbas dan perpustakaan sisi pelayan untuk Node.js. Kedua -dua komponen mempunyai API yang sama. Socket.io sangat berguna dalam membuat aplikasi masa nyata seperti aplikasi sembang, analisis masa nyata, streaming binari, pemesejan segera, dan kerjasama dokumen.

Backbone.js menyediakan sistem pengendalian acara yang membolehkan anda mengikat peristiwa tersuai ke model anda. Anda boleh menggunakan kaedah 'On' untuk mengikat peristiwa ke model dan kaedah 'pencetus' untuk mencetuskan peristiwa. Anda juga boleh menggunakan kaedah 'off' untuk membuang acara. Sistem acara ini menjadikannya lebih mudah untuk menguruskan perubahan dalam aplikasi anda dan pastikan antara muka pengguna anda selaras dengan data anda. boleh diintegrasikan dengan mudah dengan Express.js, rangka kerja aplikasi web yang popular untuk node.js. Anda boleh membuat aplikasi Express.js dan kemudian pasangkan pelayan Socket.io kepadanya. Anda kemudian boleh menggunakan Socket.io untuk mengendalikan komunikasi masa nyata antara klien dan pelayan. Gabungan ekspres.js dan soket.io ini sangat kuat dan boleh digunakan untuk membuat aplikasi web yang kompleks. direka bentuk untuk bekerja dengan API yang tenang. Anda boleh menggunakan kaedah 'Ambil' untuk mendapatkan data dari pelayan dan kaedah 'Simpan' untuk menyimpan data ke pelayan. Anda juga boleh menggunakan kaedah 'memusnahkan' untuk memadam data dari pelayan. Backbone.js secara automatik menukar data model anda ke dalam format JSON semasa menghantarnya ke pelayan dan menukarnya kembali ke data model apabila menerimanya dari pelayan. >

socket.io menyokong data binari, seperti gumpalan dan buffer array. Anda boleh menghantar data binari dari klien ke pelayan atau dari pelayan ke klien. Socket.io secara automatik menjaga pengekodan dan penyahkodan data binari. mengendalikan kesilapan. Anda boleh mengikat pengendali ralat ke model menggunakan kaedah 'On' dan kemudian mencetuskan peristiwa ralat menggunakan kaedah 'pencetus'. Pengendali ralat akan dipanggil dengan model dan ralat sebagai argumen.

Bagaimana saya boleh mengendalikan pemotongan dalam socket.io?

socket.io secara automatik mengendalikan pemotongan dan penyambungan semula. Apabila pelanggan terputus, acara 'putus' dipancarkan pada pelayan. Apabila pelanggan disambung semula, acara 'menyambung semula' dipancarkan pada pelanggan. Anda boleh menggunakan acara ini untuk mengendalikan sambungan dan penyambung semula dalam aplikasi anda.

bagaimana saya boleh memperluaskan model dan pandangan Backbone.js? Anda boleh menggunakan kaedah 'Extend' untuk membuat subclass model atau pandangan. Anda kemudian boleh menambah kaedah dan sifat anda sendiri ke subkelas. . Anda boleh menggunakan penyesuai 'socket.io-redis' untuk membolehkan komunikasi antara node socket.io berganda. Anda juga boleh menggunakan modul 'Sticky-Sesi' untuk memastikan semua permintaan dari pelanggan sentiasa dihantar ke nod yang sama.

Atas ialah kandungan terperinci Bina Aplikasi Web dengan Backbone.js dan Socket.io. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!