7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Bekerja dengan Data dalam Sails.js

Read Time: 21 mins

Indonesian (Bahasa Indonesia) translation by Fodal Fadul (you can also view the original English article)

Sails.js adalah datang ke atas dan Node.js kerangka, dengan fokus pada kebebasan dan pengaturan bawaan yang cerdas. Dalam artikel ini kita akan melihat beberapa data fitur layar menyediakan out-of-the-box, untuk dengan mudah membuat aplikasi yang kompleks.


Mengapa layar berbeda dari kerangka lain

Alasan untuk memilih layar yang terbaik meletakkan oleh pencipta Sails, Mike McNeil, "Layar diciptakan dari kebutuhan". Banyak kerangka yang Anda lihat di sekitar, dibangun hampir untuk sisi akademis hal, kerangka ini biasanya mendorong praktik terbaik, dan menciptakan sebuah platform untuk pengembang untuk menciptakan hal-hal lebih cepat, atau lebih baik.

Layar di sisi lain, diciptakan untuk produksi, itu tidak berusaha untuk feed Anda sintaks baru atau platform, itu dasar yang solid, dimaksudkan untuk menciptakan 'kerja klien' dengan kecepatan. Kontras mungkin halus, tetapi ada beberapa perbedaan yang berbeda.

Untuk menggambarkan apa yang saya maksudkan, mari kita lihat di Meteor. Meteor mungkin platform JS terkemuka di sekitar hari ini, tapi ini adalah contoh utama dari kerangka demi kerangka. Sekarang ini bukanlah hal yang buruk, saya pendukung besar dari Meteor, maksud saya adalah, mereka berangkat untuk membangun kerangka kerja dan mereka melakukan pekerjaan yang baik di itu, Mike di sisi lain ditetapkan untuk membuat kerja klien lebih cepat. Layar ini hanya sarana untuk mencapai akhir.

Meteor, pretty much semua adalah disarikan pergi dan Anda menggunakan JavaScript ditambah Meteor API kode segalanya. Sedangkan layar tidak dimaksudkan untuk menjadi platform baru, jadi tidak ada yang tersembunyi.

Itu terletak di atas Socket.io dan kerangka Express populer, dan Anda memiliki akses kepada mereka secara keseluruhan, Native. Anda mulai melihat perbedaan?

Selain itu, karena layar ditujukan untuk produksi pertama, itu dibangun dengan beberapa pilihan untuk scaling dan keamanan.

Ada banyak berbicara tentang, tetapi pada artikel ini saya ingin fokus pada bagaimana layar menangani data, dan bagaimana Anda dapat memanfaatkan beberapa fitur lebih canggih layar untuk melakukan beberapa tindakan yang benar-benar keren.


Instalasi

Hanya dalam kasus Anda tidak memiliki layar intalled belum, Anda dapat melakukannya melalui NPM dengan menjalankan:


Socket.io & Express

Sekarang mari kita bicara sedikit tentang Socket.io dan Express sebelum kita masuk ke layar. Ada serangkaian baik premium di Express by Andrew Burgess jika Anda tertarik, tapi saya akan menjalankan melalui dasar-dasar relevan dari kedua Perpustakaan ini di sini:

Socket.io

Socket.io adalah pub sub library, yang berjalan pada kedua server dan klien, dan memungkinkan mereka untuk berbicara melalui web soket.

Singkat contohnya bisa terlihat seperti ini:

Kode ini dimulai dengan mengharuskan Perpustakaan socket.io, mendengarkan untuk koneksi, dan kemudian ketika menghubungkan soket lain, akan mengirimkannya pesan, ditujukan kepada acara welcomeMessage, dan akhirnya lewat beberapa JSON.

Selanjutnya, pada klien Anda akan menulis sesuatu seperti:

Di sini kita tersambung ke server dan mendengarkan acara welcomeMessage yang kami hanya dibuat. Seperti yang Anda lihat adalah cukup sederhana mempublikasikan / berlangganan server, yang adalah bidirectional (klien bisa memancarkan pesan untuk server juga).

Sekarang mari kita lihat di Express:

Express

Bentuk yang paling sederhana jalur Express dapat menjadi sesuatu seperti:

Ini mendefinisikan rute yang sederhana, sehingga ketika pengguna pergi ke alamat situs Anda dan mencoba untuk mengakses halaman /users, mereka akan disajikan dengan pesan "Hello dari ' / pengguna!".

Jadi Express adalah suatu kerangka kerja untuk menangani permintaan HTTP dan Socket.io adalah websocket komunikasi Perpustakaan. Apa yang telah dilakukan tim layar meskipun, adalah peta semua Express rute ke Socket.io internal. Apa ini berarti, Anda dapat menghubungi salah satu rute HTTP melalui web soket.

Sekarang that's pretty cool! Namun, masih ada satu bagian dari teka-teki yang hilang dan itulah Sails cetak biru.

Layar memungkinkan Anda untuk menghasilkan model seperti dalam Framework lain, perbedaannya adalah, layar juga dapat menghasilkan produksi API RESTfull siap untuk pergi bersama mereka. Ini berarti jika Anda menghasilkan sebuah model yang dinamakan 'pengguna' Anda dapat langsung menjalankan query RESTfull ' / sumber daya pengguna tanpa coding diperlukan.

Jika Anda baru untuk api tenang, itu adalah hanya sebuah cara untuk mengakses data, untuk mana operasi CRUD dipetakan ke berbagai metode HTTP.

Jadi mendapatkan permintaan untuk ' / pengguna akan mendapatkan seluruh pengguna, permintaan POST akan membuat pengguna baru, dll.

Jadi apa artinya semua ini?

Itu berarti kita memiliki sebuah API RESTfull penuh yang dipetakan ke Socket.io melalui layar, tanpa menulis satu baris kode!

Tapi mengapa soket lebih baik mengambil data kemudian permintaan Ajax? Nah, selain menjadi sebuah protokol yang lebih ramping, soket dibuka untuk komunikasi dua arah, dan layar telah mengambil keuntungan dari hal ini. Tidak hanya akan layar melewati Anda data, tetapi itu akan secara otomatis berlangganan Anda untuk update database itu, dan setiap kali sesuatu yang akan ditambahkan, dihapus, atau diperbarui, klien Anda akan menerima notifikasi melalui soket web, membiarkan Anda tahu tentang hal itu.

Inilah sebabnya mengapa layar begitu awesome!


Layar + tulang punggung

Topik berikutnya saya ingin menutupi adalah tulang punggung integrasi, karena jika Anda tidak menggunakan kerangka kerja JavaScript, Anda lakukan itu salah.

Dengan pemikiran ini, layar dan tulang punggung adalah pasangan yang sempurna. Tulang punggung, seperti layar, sangat mencolok, Semua fitur tersedia, mampu menjadi ditimpa dan opsional.

Jika Anda telah menggunakan tulang punggung sebelum maka Anda mungkin tahu menghubungkan Native dengan api ISTIRAHAT, sehingga dari kotak, Anda dapat menyinkronkan data di front-end aplikasi layar Anda.

Tapi cukup bicara untuk sekarang, mari kita melihat semua ini dalam tindakan dengan menciptakan sebuah aplikasi dasar obrolan. Untuk memulai, membuka jendela terminal dan ketik:

Ini akan menciptakan sebuah aplikasi baru dan menghasilkan beberapa file untuk kita. Anda dapat melihat dari atas, ada dua sumber daya yang berbeda yang Anda dapat menghasilkan; model dan controller. Jika Anda sudah familiar dengan pola desain MVC, maka Anda harus tahu apa yang ini adalah, tetapi dalam jangka pendek, model yang data dan controller memegang kode logika. Jadi kita akan membutuhkan dua koleksi, satu untuk memegang pengguna, dan satu untuk pesan.

Selanjutnya, untuk controller, kita membutuhkan satu untuk menangani rute halaman, saya menyebutnya 'utama', kemudian kami memiliki kontroler yang kedua bernama 'pesan'. Sekarang Anda mungkin bertanya-tanya mengapa saya membuat controller dengan nama yang sama sebagai model pesan kami? Nah, jika Anda ingat, saya katakan bahwa layar dapat membuat sebuah REST API untuk Anda. Apa yang terjadi adalah, dengan membuat controller kosong dengan nama yang sama sebagai model, layar akan tahu untuk jatuh kembali dan membangun sebuah REST API untuk sumber daya yang sesuai.

Jadi, kami telah membuat controller untuk model pesan kami, tapi ada tidak perlu untuk membuat satu untuk model pengguna, jadi aku hanya meninggalkannya. Dan itu semua ada untuk membuat model dan controller.

Selanjutnya, mari kita setup beberapa rute.

Rute

Rute yang selalu tempat yang aman untuk memulai, karena Anda biasanya memiliki ide yang baik yang halaman yang akan dibuat.

Begitu terbuka file routes.js dalam config folder, mungkin terlihat sedikit besar pada awalnya, tetapi jika Anda menghapus semua komentar dan menambahkan dalam rute berikut, Anda akan ditinggalkan dengan sesuatu seperti ini:

Kami memiliki halaman rumah, halaman obrolan, dan kemudian dua halaman untuk menangani halaman login dan pendaftaran. Aku menempatkan mereka semua dalam controller sama, tetapi di layar, Anda dapat membuat controller sebanyak yang Anda inginkan.

Model

Selanjutnya, mari kita lihat pesan yang dihasilkan model yang dapat terletak di "api > model > Messages.js". Kita perlu menambahkan kolom yang diperlukan untuk model kami. Sekarang ini tidak mutlak diperlukan, tetapi itu akan membuat beberapa fungsi penolong bagi kita bahwa kita dapat menggunakan:

Untuk model pesan, kita mulai dengan id pengguna bahwa pesan ini milik, username sehingga kita tidak akan memiliki untuk query ini secara terpisah, dan kemudian pesan aktual.

Sekarang mari kita mengisi pengguna model:

Dan itu saja, kita memiliki hanya atribut username dan password. Langkah berikutnya adalah untuk menciptakan fungsi rute kami dalam MainController.

Controller

Jadi membuka MainController, yang dapat ditemukan di "api > controller > MainController.js". Mari kita mulai dengan membuat sebuah fungsi untuk masing-masing rute kita didefinisikan di atas:

Jika Anda akrab dengan Express, maka Anda akan senang melihat bahwa fungsi-fungsi ini adalah fungsi rute Express standar. Mereka menerima dua variabel, req untuk permintaan HTTP dan res menciptakan respon.

Mengikuti pola MVC, layar menawarkan fungsi render pemandangan. Halaman rumah tidak perlu sesuatu yang istimewa, jadi mari kita hanya membuat tampilan.

Layar bersandar lebih ke arah Konvensi lebih konfigurasi, jadi ketika Anda memanggil res.view(); Layar akan terlihat untuk Lihat file (dengan ekstensi .ejs secara default) menggunakan pola berikut: ' pemandangan > controllerName > methodName.ejs'. Jadi untuk panggilan ini, itu akan mencari ' pemandangan > utama > index.ejs'. Hal ini juga perlu dicatat, pandangan ini hanya berisi Lihat bagian-bagian tertentu dari halaman. Jika Anda melihat ' pemandangan > layout.ejs', Anda akan melihat panggilan di tengah < %-tubuh % >, ini adalah dimana file tampilan Anda akan dimasukkan. Secara default menggunakan 'layout.ejs' file, tetapi Anda dapat menggunakan file tata letak lainnya hanya dengan melewati nama tata letak ke fungsi res.view(), di bawah properti bernama 'tata letak'. Sebagai contoh: ' res.view ({tata letak: "other.ejs"});'.

Aku akan menggunakan default tata letak file dengan penyesuaian kecil, aku akan Tambahkan jQuery, tulang punggung, dan menggarisbawahi. Jadi, dalam 'layout.ejs' file tepat sebelum tag penutup, tambahkan baris berikut:

Dengan itu di tempat kita sekarang siap untuk membuat halaman rumah.

Beranda

Mari kita membuat folder baru dalam folder dilihat bernama utama, dan dalam folder utama kami baru, kita akan menciptakan sebuah file baru yang bernama 'index.ejs'.

Di dalam file Mari kita hanya membuat form login dan pendaftaran:

Cukup sederhana, hanya yang penting.

Bidang Login dan pendaftaran

Selanjutnya kita perlu menambahkan sedikit JS untuk mendapatkan ini berkomunikasi dengan server. Sekarang ini tidak akan layar tertentu, kami hanya akan mengirim permintaan AJAX melalui jQuery ke server layar.

Kode ini dapat disertakan pada halaman itu sendiri atau dimuat di melalui file JS terpisah. Demi kemudahan, aku hanya akan meletakkannya di bagian bawah halaman yang sama:

Ini semua JS hanya standar dan jQuery, kita mendengarkan acara klik pada tombol login, memastikan bidang username dan password diisi, dan posting data ' / login' rute. Jika login berhasil, kami mengarahkan ulang pengguna ke halaman obrolan, sebaliknya kita akan menampilkan kesalahan yang dikembalikan oleh server.

Selanjutnya, mari kita membuat hal yang sama untuk wilayah pendaftaran:

Kode ini hampir identik, begitu banyak sehingga, bahwa Anda dapat mungkin hanya abstrak Ajax seluruh bagian luar ke fungsi sendiri, tetapi untuk tutorial ini baik.

Sekarang kita perlu kembali ke kami 'MainController' dan menangani dua rute ini, tetapi sebelum kita melakukannya, saya ingin menginstal modul Node. Kita akan perlu hash sandi, sebagai teks sandi tidak hal yang baik, bahkan tidak untuk demonstrasi! Saya menemukan bagus module bernama 'hash Katakunci' oleh David kayu yang akan bekerja dengan baik.

Untuk menginstalnya, hanya pergi ke akar aplikasi layar Anda, dari dalam terminal dan ketik: npm menginstal hash Katakunci.

Setelah yang menginstal, mari kita buka MainController dan menerapkan dua rute diperlukan. Mari kita mulai dengan pendaftaran:

Itu sedikit verbose, tetapi semua yang kita lakukan di sini membaca username dan password dari POST permintaan dan memastikan username tidak sudah diambil. Anda dapat melihat saya juga menggunakan sandi-penggiling daging kita hanya diinstal, itu super sederhana untuk menggunakan, hanya lulus password ke metode menghasilkan dan itu akan hash menggunakan garam acak.

Hal ini juga layak menyebutkan, bahwa di setiap lokasi yang mungkin mana kita mungkin mengalami galat atau masalah, kami akan mengirimkan kembali kode galat HTTP dan kembali pesan melalui sebuah header bernama 'kesalahan' yang, jika Anda ingat, kami menampilkan di pesan peringatan pada indeks Halaman.

Titik penting lain, fakta bahwa kami menggunakan fungsi 'ajaib' bernama 'findByUsername', hal ini dimungkinkan karena kita memiliki kolom nama pengguna dalam model pengguna kami.

Akhirnya, di bagian bawah Anda dapat melihat jika semuanya berjalan dengan baik, kita menyimpan pengguna dalam variabel sesi dan kembali dengan kode status default 200, yang akan memberitahu jQuery AJAX request itu berhasil.

Selanjutnya, mari kita menulis fungsi login:

Sekali lagi, ini sangat mirip dengan fungsi pendaftaran sebelumnya, kita sedang mencari pengguna dengan nama pengguna yang sama yang telah diposting dari bentuk dan jika menemukan satu, kami memeriksa jika password cocok menggunakan penggiling daging verifikasi metode. Kita tidak bisa hanya hash password lagi dan menyebarkannya ke dalam model menemukan fungsi alasannya karena penggiling daging menggunakan garam acak, jadi jika kita hashed password lagi itu akan sama dengan sesuatu yang lain.

Sisa kode adalah sama; Jika semuanya ternyata, kami menyimpan pengguna dalam sesi dan mengembalikannya, sebaliknya kita mengirim balik pesan kesalahan.

Sistem login telah selesai dan kami akhirnya mampu melanjutkan untuk membangun fitur obrolan.

Membangun fitur obrolan

Karena kita akan menggunakan tulang punggung untuk mendapatkan pesan, fungsi sebenarnya rute akan sangat sederhana. Berikut adalah fungsi chatting lengkap:

Kita mulai dengan memeriksa jika pengguna masuk atau tidak, jika ini akan memeriksa keluar, maka itu akan memuat tampilan, lewat itu nama pengguna yang sedang berlangsung, jika tidak kita hanya mengarahkan ke halaman rumah.

Sekarang mari kita membuat pandangan baru bernama 'chat.ejs' dalam folder utama. Membukanya dan mari kita menciptakan formulir sederhana untuk mengirim pesan baru dan wadah div untuk menampilkan semua dari mereka.

Jadi untuk tampilan ini, kami hanya menggunakan beberapa HTML standar cantik. Satu-satunya hal yang mungkin perlu beberapa penjelasan adalah < % = username %> kode, gaya pengkodean tidak spesifik untuk layar, itu adalah benar-benar sintaks EJS. Sintaks ini sangat mirip dengan PHP Tag pendek. < % adalah setara dengan <? dalam PHP dan < % = sama <? =. Potongan pertama EJS memungkinkan Anda untuk mengintegrasikan kode JS standar pada halaman, sedangkan yang kedua mencetak kode dalam. Di sini kita sedang hanya mencetak username yang kami melewati di dari controller.

Sisa fitur obrolan kami akan semua JavaScript. Untuk memulai, mari kita lihat pada bagaimana Anda akan menulis fungsi chatting menggunakan standar Backbone, dan kemudian kita akan melihat bagaimana untuk mengambil keuntungan dari web soket.

Di bagian bawah laman, tambahkan JS berikut:

Karena layar secara otomatis menciptakan sebuah API yang tulang punggung memahami Native, kode tambahan server tidak harus ditulis, tidak bisa lebih mudah dari itu. Ini adalah apa yang saya bicarakan ketika saya mengatakan bahwa layar tidak dibuat sebagai ' kerangka '. Ia tidak mencoba untuk membuat Anda gunakan sintaks sendiri, itu dibuat untuk menyelesaikan sesuatu dan seperti yang Anda lihat, memberikan.

Untuk menguji itu, membuka jendela terminal dan arahkan ke folder app layar, kemudian ketik 'layar angkat' untuk memulai itu. Secara default, itu akan meluncurkan untuk http://localhost:1337. Sekarang hanya signup dan posting beberapa pesan.

Untuk melihat pesan dikirim Anda dapat console.log variabel pesan, atau melihatnya dalam browser konsol. Sekarang hal berikutnya kita harus menerapkan adalah tampilan sehingga kita dapat melihat pesan yang dikirim dalam browser.

Kita mulai dengan mendefinisikan pandangan, melampirkan ke div yang kita buat sebelumnya, maka kami menambahkan sebuah event handler pada koleksi untuk kembali membuat div setiap kali model baru akan ditambahkan ke koleksi.

Anda dapat melihat di atas, saya harus mengubah garis bawah Setelan dari menggunakan sintaks EJS dalam template, sebaliknya, menggunakan sintaks kumis 's. Hal ini karena halaman sudah dokumen EJS, jadi ini akan diproses keluar pada server dan tidak di garis bawah.

Catatan: saya tidak datang dengan Regex untuk ini, bahwa kredit pergi ke Underscore docs itu sendiri.

Terakhir, di bawah Anda dapat melihat kami membuat sebuah instance baru dari pandangan ini, melewati koleksi variabel.

Jika semua berjalan baik, sekarang Anda akan melihat pesan Anda di browser, dan itu harus memperbarui setiap kali Anda membuat posting baru.


Layar kebijakan

Sekarang Anda mungkin telah memperhatikan bahwa kami tidak menetapkan userId atau username ketika kita mengirimkan posting, dan ini adalah untuk tujuan keamanan.

Anda tidak ingin menempatkan jenis kontrol pada sisi klien. Jika semua orang harus lakukan adalah mengubah variabel JavaScript untuk mengontrol akun pengguna lain, Anda akan memiliki masalah besar.

Jadi, bagaimana Anda harus menangani ini? Yah, dengan kebijakan tentu saja.

Kebijakan adalah pada dasarnya middleware, yang menjalankan sebelum permintaan web yang sebenarnya, dimana Anda dapat menghentikan, mengubah, atau bahkan mengarahkan permintaan, yang diperlukan.

Untuk aplikasi ini, mari kita membuat kebijakan untuk pesan kita. Kebijakan yang diterapkan ke controller, sehingga mereka bahkan dapat dijalankan pada halaman normal, tapi untuk tutorial ini Mari kita hanya tetap dengan satu untuk pesan kita Model.

Buat sebuah file yang bernama 'MessagesPolicy.js' dalam ' api > kebijakan folder, dan masukkan yang berikut:

Jadi, apa yang terjadi di sini? Anda dapat melihat fungsi ini menyerupai fungsi rute normal, perbedaan meskipun parameter ketiga, yang akan memanggil middleware berikutnya di tumpukan. Jika Anda baru ide middleware, Anda dapat berpikir itu seperti boneka Rusia bersarang. Setiap lapisan mendapat permintaan, bersama dengan variabel respon dan mereka dapat memodifikasi mereka karena mereka lihat cocok. Apabila mereka lulus semua persyaratan, lapisan dapat lulus lebih lanjut, hingga mencapai pusat, yang adalah fungsi rute.

Jadi di sini kita berada, memeriksa jika pengguna log in, jika pengguna tidak, kami menampilkan 403 kesalahan dan permintaan berakhir di sini. Jika tidak, (yaitu pengguna masuk) kita sebut fungsi next(); untuk menyebarkannya. Di tengah kode di atas, adalah dimana kami menyuntikkan beberapa variabel posting. Kami menerapkan ini untuk semua panggilan pada 'pesan' controller (pada dasarnya API), jadi kita mendapatkan aksi dan periksa jika permintaan ini berusaha untuk membuat pesan baru, dalam hal ini kita menambahkan bidang posting untuk id pengguna dan nama pengguna.

Selanjutnya, membuka file policies.js dalam config folder, dan menambahkan dalam kebijakan bahwa kami hanya dibuat. Jadi file Anda akan terlihat seperti ini:

Dengan ini menempatkan di tempat, kita akan perlu untuk menghapus semua catatan lama, karena mereka tidak memiliki potongan-potongan baru ini informasi. Jadi, menutup layar server (ctrl-c) dan di jendela terminal tipe yang sama: rm .tmp - r untuk menghapus database sementara memberikan kita yang bersih.

Selanjutnya, mari kita menambahkan pengguna ke posting sebenarnya, sehingga dalam 'chat.ejs' mengubah template untuk:

Restart server layar (lagi menggunakan lift layar) dan pendaftaran pengguna baru yang lain untuk menguji itu. Jika semuanya bekerja dengan benar, Anda harus dapat menambahkan pesan dan melihat nama Anda di pos.

Saat ini kami memiliki setup yang cukup baik, kami mengambil posting secara otomatis menggunakan tulang punggung dan API, ditambah kami memiliki beberapa dasar keamanan di tempat. Masalahnya adalah, itu tidak akan memperbarui ketika orang lain mengirim pesan. Sekarang Anda bisa memecahkan hal ini dengan menciptakan JavaScript interval dan polling untuk update, tapi kami can do better.

Meningkatkan Websockets

Saya sebutkan sebelumnya bahwa layar memanfaatkan bidirectional websockets' kemampuan untuk posting update pada data berlangganan. Menggunakan Pembaruan ini, kita dapat mendengarkan untuk tambahan baru ke tabel pesan dan memperbarui koleksi sesuai.

Jadi dalam chat.ejs file, mari kita membuat jenis baru koleksi; SailsCollection:

Mungkin ini panjang, tapi sebenarnya sangat sederhana, mari kita berjalan melaluinya. Kita mulai dengan menambahkan dua baru properti objek koleksi, satu untuk memegang nama layar 'model' dan satu untuk memegang soket web. Berikutnya, kita harus memodifikasi fungsi sinkronisasi, jika Anda terbiasa dengan tulang punggung, maka Anda akan tahu bahwa ini adalah fungsi yang interface dengan server ketika Anda menelepon hal-hal seperti mengambil. Biasanya, kebakaran off permintaan Ajax, tetapi kita akan menyesuaikannya untuk komunikasi soket.

Sekarang, kami tidak menggunakan sebagian besar fungsi yang menawarkan fungsi sinkronisasi, terutama karena kita belum menambahkan kemampuan bagi pengguna untuk memperbarui atau menghapus pesan, tapi hanya untuk menjadi lengkap, saya akan memasukkannya dalam definisi fungsi.

Mari kita lihat pada bagian pertama dari fungsi sinkronisasi:

Kode ini pertama memeriksa jika setiap 'mana' klausul yang dikirim melalui, ini akan membiarkan Anda melakukan hal-hal seperti: messages.fetch ({mana: {id: 4}}); untuk hanya mengambil baris mana id sama dengan empat.

Setelah itu, kita kemudian memiliki beberapa kode yang memastikan properti 'sailsCollection' telah ditetapkan, sebaliknya kita log pesan kesalahan. Setelah itu, kami menciptakan sebuah soket baru dan menyambung ke server, mendengarkan untuk sambungan dengan acara on('connect').

Setelah terhubung, kami meminta indeks dari 'sailsCollection' yang ditentukan untuk menarik daftar saat ini model. Ketika menerima data, kita menggunakan koleksi 's set fungsi ditetapkan sebagai model.

Baiklah, sekarang sejauh ini, kami memiliki setara dengan perintah fetch standar. Blok berikutnya kode adalah mana pemberitahuan push terjadi:

Sekarang tindakan yang sedang dilakukan (apakah kita membuat, memperbarui, atau menghancurkan pesan) dapat ditemukan dalam msg sebenarnya, yang kemudian dalam uri. Untuk mendapatkan aksi, kita membagi URI pada garis miring maju ('/') dan ambil hanya segmen terakhir menggunakan fungsi pop. Kami kemudian mencoba untuk mencocokkan itu dengan tiga tindakan mungkin membuat, memperbarui, atau menghancurkan.

Sisanya adalah tulang punggung standar, kami juga menambahkan, mengedit, atau menghapus model tertentu. Dengan kami kelas baru hampir selesai, semua yang tersisa untuk dilakukan adalah perubahan MessageCollection saat ini. Alih-alih memperluas koleksi Backbone, perlu memperluas koleksi baru, seperti:

Selain memperluas koleksi baru kami, kami akan membuat perubahan lain sehingga bukan menetapkan URL properti, kita sekarang mengatur properti sailsCollection. Dan itu semua ada untuk itu. Membuka aplikasi ke dua browser yang berbeda (misalnya, Chrome dan Safari) dan pendaftaran dua pengguna yang terpisah. Anda akan melihat bahwa pesan yang dikirim dari salah satu browser yang mendapatkan langsung ditampilkan pada yang lain, tidak ada polling, tanpa kesulitan.

Chat ScreenshotChat ScreenshotChat Screenshot

Kesimpulan

Layar adalah menghirup udara segar, dalam kekacauan kerangka. Cek dengan ego mereka di pintu, dan melakukan apa yang bisa untuk membantu pengembang bukan merek. Saya telah chatting dengan devs layar dan saya dapat memberitahu Anda bahwa ada lebih keangkeran dalam bekerja, dan itu akan menarik untuk melihat mana kerangka kerja ini pergi.

Jadi kesimpulannya, Anda telah belajar bagaimana untuk men-setup, menggunakan dan mengamankan data dari dalam layar, serta cara untuk antarmuka dengan perpustakaan Backbone populer.

Seperti biasa, jika Anda memiliki komentar, merasa bebas untuk meninggalkan mereka di bawah, atau bergabung dengan kami di Nettuts + IRC channel ("#nettuts" di freenode). Terima kasih untuk membaca.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.