Papan kolaborasi AngularJS dengan Socket.io

Pengarang: Peter Berry

Tarikh Penciptaan: 14 Julai 2021

Tarikh Kemas Kini: 13 Mungkin 2024

Video.: Develop Collaborative White Board : Web socket, Node JS & React JS

Kandungan

01. Pelayan
02. Tulang kosong
03. Nyatakan kebergantungan anda
04. Wire up Socket.io
05. Mulakan enjin anda!
06. Beberapa pemikiran jujur sebelum meneruskan
07. Pelanggan
08. Tulang kosong
09. Membuat nota melekit
10. Mempamerkan nota melekit
11. Menghapus nota melekit
12. Mengemas kini nota lekat
13. Menggerakkan nota melekit
14. Bonus
15. Kesimpulannya
Suka ini? Baca ini!

Pengetahuan yang diperlukan: JavaScript Pertengahan
Memerlukan: Node.js, NPM
Masa Projek: 2 jam

AngularJS sangat sesuai untuk membuat aplikasi sisi pelanggan yang kaya di penyemak imbas dan, apabila anda menambahkan sedikit Socket.io ke dalam campuran, perkara menjadi sangat menarik. Dalam artikel ini kita akan membina papan kolaborasi masa nyata yang menggunakan AngularJS untuk aplikasi sisi klien dan Socket.io untuk berkongsi keadaan antara semua pelanggan yang terhubung.

Mari kita bahas sedikit pengemasan sebelum kita memulakannya. Saya akan menganggap bahawa anda mempunyai pemahaman asas mengenai HTML dan JavaScript kerana saya tidak akan merangkumi setiap sudut kecil kod tersebut. Sebagai contoh, saya tidak akan memanggil fail CSS dan JavaScript yang saya sertakan di kepala file HTML kerana tidak ada informasi baru di sana.

Juga, saya menggalakkan anda mengambil kod dari akaun GitHub saya untuk mengikutinya. Rakan baik saya Brian Ford juga mempunyai benih Socket.io yang sangat baik, yang mana saya mengasaskan beberapa idea asal saya.

Empat ciri utama yang kami mahukan dalam papan kolaborasi adalah kemampuan membuat nota, membaca nota, mengemas kini nota, menghapus nota dan, untuk bersenang-senang, memindahkan nota di papan tulis. Ya, itu betul, kami memfokuskan pada ciri CRUD standard. Saya percaya bahawa dengan menumpukan pada ciri-ciri asas ini, kita akan merangkumi kod yang mencukupi agar corak dapat muncul sehingga anda dapat membawanya dan menggunakannya di tempat lain.

01. Pelayan

Kita akan mulakan dengan pelayan Node.js terlebih dahulu kerana ia akan menjadi asas bahawa kita akan membina semua yang lain.

Kami akan membina pelayan Node.js dengan Express dan Socket.io. Sebab kami menggunakan Express adalah kerana ia menyediakan mekanisme yang bagus untuk menyiapkan pelayan aset statik dalam Node.js. Express dilengkapi dengan sekumpulan ciri yang sangat mengagumkan tetapi, dalam hal ini, kami akan menggunakannya untuk membelah aplikasi dengan bersih antara pelayan dan pelanggan.

(Saya beroperasi dengan anggapan bahawa anda telah memasang Node.js dan NPM. Carian Google yang pantas akan menunjukkan kepada anda cara memasangnya jika tidak.)

02. Tulang kosong

Oleh itu, untuk membina tulang pelayan, kita perlu melakukan beberapa perkara untuk bangun dan berjalan.

// app.js

// A.1
var express = memerlukan ('express'),
aplikasi = ekspres ();
pelayan = memerlukan ('http'). createServer (aplikasi),
io = memerlukan ('socket.io'). dengar (pelayan);

// A.2
app.configure (fungsi () {
app.use (express.static (__ dirname + ’/ public’));
});

// A.3
pelayan.listen (1337);

A.1 Kami menyatakan dan memberi contoh modul Node.js kami sehingga kami dapat menggunakannya dalam aplikasi kami. Kami menyatakan Express, memberi contoh Express dan kemudian membuat pelayan HTTP dan mengirimkan instance Express ke dalamnya. Dan dari sana kami membuat instansi Socket.io dan menyuruhnya mengawasi contoh pelayan kami.

A.2 Kami kemudian memberitahu aplikasi Express kami untuk menggunakan direktori awam kami untuk melayani fail dari.

A.3 Kami memulakan pelayan dan menyuruhnya mendengar di port 1337.

Sejauh ini cukup menyakitkan dan cepat. Saya percaya kita kurang dari 10 baris ke dalam kod dan kita sudah mempunyai pelayan Node.js yang berfungsi. Maju!

03. Nyatakan kebergantungan anda

// pakej.json
{
"name": "sudut-papan kolab",
"description": "Lembaga Kerjasama AngularJS",
"versi": "0.0.1-1",
"peribadi": benar,
"kebergantungan": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

Salah satu ciri terbaik NPM adalah kemampuan untuk menyatakan kebergantungan anda di pakej.json fail dan kemudian memasangnya secara automatik melalui pasang npm pada baris arahan.

04. Wire up Socket.io

Kami telah menentukan ciri-ciri teras yang kami mahukan dalam aplikasi dan oleh itu kami perlu menyediakan pendengar acara Socket.io dan penutupan yang sesuai untuk menangani acara tersebut untuk setiap operasi.

Dalam kod di bawah ini, anda akan melihat bahawa itu pada dasarnya adalah konfigurasi pendengar acara dan panggilan balik. Acara pertama ialah sambungan acara, yang kami gunakan untuk menyatukan acara kami yang lain semasa penutupan.

io.sockets.on ('sambungan', fungsi (soket) {
socket.on ('createNote', fungsi (data) {
socket.broadcast.emit ('onNoteCreated', data);
});

socket.on ('updateNote', fungsi (data) {
socket.broadcast.emit ('onNoteUpdated', data);
});

socket.on ('deleteNote', fungsi (data) {
socket.broadcast.emit ('onNoteDeleted', data);
});

socket.on ('moveNote', fungsi (data) {
socket.broadcast.emit ('onNoteMoved', data);
});
});

Dari sini kita menambah pendengar buat Catatan, kemas kiniNota, padamNota dan bergerakNota. Dan dalam fungsi panggilan balik, kami hanya menyiarkan peristiwa yang berlaku sehingga mana-mana pelanggan yang mendengar dapat diberitahu bahawa peristiwa itu berlaku.

Terdapat beberapa perkara yang perlu diperhatikan mengenai fungsi panggilan balik dalam setiap pengendali acara. Satu, jika anda ingin menghantar acara kepada orang lain tetapi pelanggan yang memancarkan acara yang anda masukkan bersiaran sebelum itu mengeluarkan panggilan fungsi. Kedua, kami hanya menyampaikan muatan acara kepada pihak yang berminat sehingga mereka dapat memprosesnya sesuai yang mereka sukai.

05. Mulakan enjin anda!

Setelah kita menentukan kebergantungan kita dan menyediakan aplikasi Node.js kita dengan kuasa Express dan Socket.io, sangat mudah untuk memulakan server Node.js.

Mula-mula anda pasang kebergantungan Node.js anda seperti:

pasang npm

Dan kemudian anda memulakan pelayan seperti ini:

aplikasi nod.js

Dan kemudian! Anda pergi ke alamat ini di penyemak imbas anda. Bam!

06. Beberapa pemikiran jujur sebelum meneruskan

Saya terutamanya adalah pembangun frontend dan pada awalnya saya agak terintimidasi dengan menyambungkan pelayan Node.js ke aplikasi saya. Bahagian AngularJS adalah JavaScript yang ringkas tetapi pelayan? Beratur muzik menyeramkan dari filem seram.

Tetapi, saya benar-benar yakin untuk mengetahui bahawa saya dapat membuat pelayan web statik hanya dalam beberapa baris kod dan dalam beberapa baris lagi menggunakan Socket.io untuk menangani semua peristiwa antara penyemak imbas. Dan ia masih hanya JavaScript! Demi ketepatan masa, kami hanya merangkumi beberapa ciri, tetapi saya harap pada akhir artikel anda akan melihat bahawa ia mudah untuk berenang - dan hujung kolam yang dalam tidak begitu menakutkan.

07. Pelanggan

Sekarang kita mempunyai asas kukuh dengan pelayan kita, mari beralih ke bahagian kegemaran saya - pelanggan! Kami akan menggunakan AngularJS, jQueryUI untuk bahagian yang dapat diseret dan Twitter Bootstrap untuk pangkalan gaya.

08. Tulang kosong

Sebagai pilihan peribadi, semasa saya memulakan aplikasi AngularJS baru, saya ingin dengan cepat menentukan minimum yang saya tahu bahawa saya perlu memulakannya dan kemudian memulakan iterasi secepat mungkin.

Setiap aplikasi AngularJS perlu diikat dengan sekurang-kurangnya satu pengawal yang ada dan jadi ini adalah di mana saya selalu bermula.

Untuk bootstrap aplikasi secara automatik, anda hanya perlu menambahkan ng-aplikasi ke node HTML di mana anda mahu aplikasi hidup. Selalunya, menambahkannya ke tag HTML akan dapat diterima dengan baik. Saya juga telah menambahkan atribut untuk ng-aplikasi untuk memberitahu bahawa saya mahu menggunakan aplikasi modul, yang akan saya tentukan sebentar lagi.

// awam / indeks.html
html ng-app = "app">

Saya tahu bahawa saya memerlukan sekurang-kurangnya satu pengawal dan oleh itu saya akan menggunakannya ng-pengawal dan memberikannya hak milik MainCtrl.

body ng-controller = "MainCtrl"> / badan>

Oleh itu, kita sedang berusaha untuk modul bernama aplikasi dan pengawal bernama MainCtrl. Mari kita teruskan dan membuatnya sekarang.

Membuat modul agak mudah. Anda menentukannya dengan memanggil sudut.modul dan memberikannya nama. Untuk rujukan masa depan, parameter kedua dari array kosong adalah di mana anda dapat menyuntik sub-modul untuk digunakan dalam aplikasi. Ini di luar ruang lingkup tutorial ini, tetapi berguna apabila aplikasi anda mula berkembang dalam kerumitan dan keperluan.

// awam / js / collab.js
var app = angular.module ('app', []);

Kami akan menyatakan beberapa tempat letak kosong di aplikasi modul bermula dengan MainCtrl di bawah.Kami akan mengisi semua ini kemudian tetapi saya ingin menggambarkan struktur asas sejak awal.

app.controller ('MainCtrl', fungsi ($ lingkup) {});

Kami juga akan membungkus fungsi Socket.io di soket perkhidmatan sehingga kita dapat merangkum objek itu dan tidak membiarkannya melayang di ruang nama global.

app.factory ('socket', fungsi ($ rootScope) {});

Dan semasa kita melakukannya, kita akan menyatakan arahan yang disebut melekitNota yang akan kita gunakan untuk merangkumi fungsi nota lekat di.

app.directive ('stickyNote', fungsi (soket) {});

Oleh itu marilah kita mengkaji semula apa yang telah kita lakukan setakat ini. Kami telah menggunakan aplikasi ini ng-aplikasi dan menyatakan pengawal aplikasi kami dalam HTML. Kami juga telah menentukan modul aplikasi dan membuat MainCtrl pengawal, soket perkhidmatan dan melekitNota arahan.

09. Membuat nota melekit

Sekarang kita mempunyai kerangka aplikasi AngularJS, kita akan mula membina ciri penciptaan.

app.controller ('MainCtrl', fungsi ($ lingkup, soket) {// B.1
$ lingkup.notes = []; // B.2

// Masuk
socket.on ('onNoteCreated', fungsi (data) {// B.3
$ lingkup.notes.push (data);
});

// Keluar
$ lingkup.createNote = fungsi () {// B.4
nota var = {
id: Tarikh baru (). getTime (),
tajuk: 'Nota Baru',
badan: 'Belum selesai'
};

$ lingkup.notes.push (nota);
socket.emit ('createNote', nota);
};

B.1 AngularJS mempunyai ciri suntikan ketergantungan yang terdapat di dalamnya sehingga kami menyuntikkan a $ skop objek dan soket perkhidmatan. The $ skop objek berfungsi sebagai ViewModel dan pada dasarnya adalah objek JavaScript dengan beberapa peristiwa dimasukkan ke dalamnya untuk membolehkan pengumpulan data dua arah.

B.2 Kami menyatakan susunan yang akan kami gunakan untuk mengikat pandangan.

B.3 Kami menambah pendengar untuk onNoteCreated acara di soket perkhidmatan dan mendorong muatan acara ke $ lingkup.nota susunan.

B.4 Kami telah menyatakan a buat Catatan kaedah yang mewujudkan lalai Nota objek dan menolaknya ke $ lingkup.nota susunan. Ia juga menggunakan soket perkhidmatan untuk memancarkan buat Catatan acara dan lulus nota baru objek bersama.

Jadi sekarang kita mempunyai kaedah untuk membuat nota, bagaimana kita menyebutnya? Itu adalah soalan yang baik! Dalam fail HTML, kami menambah arahan AngularJS terbina dalam ng-klik ke butang dan kemudian tambahkan buat Catatan kaedah panggilan sebagai nilai atribut.

butang id = "createButton" ng-click = "createNote ()"> Buat Catatan / butang>

Masa untuk mengkaji semula apa yang telah kita lakukan setakat ini. Kami telah menambahkan susunan ke $ skop objek di MainCtrl itu akan menyimpan semua nota untuk aplikasi. Kami juga telah menambah a buat Catatan kaedah pada $ skop objek untuk membuat nota tempatan baru dan kemudian menyiarkan nota itu kepada pelanggan lain melalui soket perkhidmatan. Kami juga telah menambahkan pendengar acara di soket perkhidmatan supaya kami dapat mengetahui kapan pelanggan lain telah membuat nota sehingga kami dapat menambahkannya ke koleksi kami.

10. Mempamerkan nota melekit

Kita sekarang mempunyai kemampuan untuk membuat objek catatan dan membaginya antara penyemak imbas tetapi bagaimana kita sebenarnya memaparkannya? Di sinilah arahan masuk.

Arahan dan selok-beloknya adalah subjek yang luas, tetapi versi pendek adalah bahawa mereka menyediakan cara untuk memperluas elemen dan atribut dengan fungsi khusus. Arahan adalah bahagian kegemaran saya dengan mudah mengenai AngularJS kerana ia membolehkan anda membuat keseluruhan DSL (Domain Spesifik Bahasa) di sekitar aplikasi anda dalam HTML.

Adalah wajar bahawa kerana kita akan membuat nota lekapan untuk papan kolaborasi kita, kita harus membuat melekitNota arahan. Arahan ditentukan dengan memanggil kaedah direktif pada modul yang ingin anda nyatakan dan meneruskan nama dan fungsi yang mengembalikan objek definisi arahan. Objek definisi arahan mempunyai banyak kemungkinan sifat yang dapat anda tentukan padanya, tetapi kami akan menggunakan hanya beberapa untuk tujuan kami di sini.

Saya mengesyorkan agar anda melihat dokumentasi AngularJS untuk melihat keseluruhan senarai sifat yang dapat anda tentukan pada objek definisi arahan.

app.directive ('stickyNote', fungsi (soket) {
var linker = fungsi (skop, elemen, atrs) {};

var controller = function ($ lingkup) {};

kembali {
hadkan: 'A', // C.1
pautan: penghubung, // C.2
pengawal: pengawal, // C.3
skop: {// C.4
nota: ’=’,
ondelete: '&'
}
};
});

C.1 Anda boleh menyekat arahan anda untuk jenis elemen HTML tertentu. Dua yang paling umum adalah elemen atau atribut, yang anda nyatakan menggunakan E dan A masing-masing. Anda juga boleh membataskannya ke kelas CSS atau komen, tetapi ini tidak biasa.

C.2 Fungsi pautan adalah tempat anda meletakkan semua kod manipulasi DOM anda. Terdapat beberapa pengecualian yang saya dapati, tetapi ini selalu berlaku (sekurang-kurangnya 99 peratus masa). Ini adalah peraturan asas AngularJS dan sebab itulah saya menekankannya.

C.3 Fungsi pengawal berfungsi seperti pengawal utama yang kami tetapkan untuk aplikasi tetapi $ skop objek yang kami lalui adalah khusus untuk elemen DOM yang direktif oleh arahan itu.

C.4 AngularJS mempunyai konsep ruang lingkup terpencil, yang membolehkan anda menentukan secara jelas bagaimana ruang lingkup arahan berkomunikasi dengan dunia luar. Sekiranya kita tidak menyatakan ruang lingkup, arahan itu secara tidak langsung akan diwarisi dari ruang lingkup ibu bapa dengan hubungan ibu bapa-anak. Dalam banyak kes, ini tidak optimum. Dengan mengasingkan ruang lingkup, kami mengurangkan kemungkinan dunia luar dapat mempengaruhi keadaan arahan anda secara tidak sengaja dan buruk.

Saya telah menyatakan pengikatan data dua hala untuk Nota dengan = simbol dan ungkapan yang mengikat hapus kira dengan & simbol. Sila baca dokumentasi AngularJS untuk penjelasan lengkap mengenai ruang lingkup terpencil kerana ini adalah salah satu subjek yang lebih rumit dalam kerangka kerja.

Oleh itu, mari kita tambahkan nota lekat pada DOM.

Seperti kerangka kerja yang baik, AngularJS dilengkapi dengan beberapa ciri yang sangat hebat di luar kotak. Salah satu ciri paling berguna adalah ng-ulangi. Arahan AngularJS ini membolehkan anda memasukkan pelbagai objek dan menggandakan teg apa pun pada seberapa banyak item terdapat dalam array. Dalam kes di bawah ini, kami melakukan iterasi nota susunan dan pendua div elemen dan anak-anaknya untuk panjang nota susunan.

div sticky-note ng-repeat = "note in note" note = "note" ondelete = "deleteNote (id)">
jenis butang = "butang" ng-click = "deleteNote (note.id)"> × / butang>
input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (nota)"
> {{note.body}} / textarea>
/ div>

Keindahan dari ng-ulangi adalah bahawa ia terikat dengan array apa pun yang anda masukkan dan, apabila anda menambahkan item ke array, elemen DOM anda akan dikemas kini secara automatik. Anda boleh mengambil langkah ini lebih jauh dan mengulangi bukan sahaja elemen DOM standard tetapi juga arahan khusus yang lain. Itulah sebabnya anda melihat melekit-nota sebagai atribut pada elemen.

Terdapat dua bahagian kod tersuai yang perlu dijelaskan. Kami telah mengasingkan skop di nota melekit arahan mengenai dua sifat. Yang pertama adalah ruang lingkup terpencil yang ditentukan yang mengikat pada Nota harta benda. Ini bermaksud bahawa setiap kali objek nota berubah dalam ruang lingkup induk, ia secara automatik akan mengemas kini objek catatan yang sesuai dalam arahan dan sebaliknya. Skop terpencil lain yang ditentukan adalah pada hapus kira atribut. Maksudnya ialah apabila hapus kira disebut dalam arahan, ia akan memanggil apa sahaja ungkapan yang ada di hapus kira atribut pada elemen DOM yang mewujudkan arahan.

Apabila arahan dibuat, ia ditambahkan ke DOM dan fungsi pautan dipanggil. Ini adalah peluang yang tepat untuk menetapkan beberapa sifat DOM lalai pada elemen. Parameter elemen yang kami lalui sebenarnya adalah objek jQuery dan oleh itu kami dapat melakukan operasi jQuery di atasnya.

(AngularJS sebenarnya dilengkapi dengan subkumpulan jQuery yang terdapat di dalamnya tetapi jika anda sudah memasukkan versi lengkap jQuery, AngularJS akan menangguhkannya.)

app.directive ('stickyNote', fungsi (soket) {
var linker = fungsi (skop, elemen, atrs) {
// Beberapa inisiatif DOM untuk menjadikannya bagus
element.css ('kiri', '10 piksel');
element.css ('teratas', '50 piksel');
element.hide (). fadeIn ();
};
});

Dalam kod di atas kita hanya meletakkan nota lekat di atas panggung dan memudarnya.

11. Menghapus nota melekit

Oleh itu, sekarang kita dapat menambah dan menampilkan nota melekit, sudah waktunya untuk menghapus nota melekit. Pembuatan dan penghapusan nota melekit adalah soal menambahkan dan menghapus item dari tatasusunan yang terikat dengan nota tersebut. Ini adalah tanggungjawab skop induk untuk menjaga susunan itu, itulah sebabnya kami mengemukakan permintaan penghapusan dari dalam arahan, tetapi membiarkan ruang lingkup induk melakukan angkat berat sebenarnya.

Inilah sebabnya mengapa kami mengalami semua masalah dalam membuat ekspresi yang ditentukan sebagai ruang lingkup terpencil pada arahan: sehingga arahan dapat menerima peristiwa penghapusan secara dalaman dan menyebarkannya kepada induknya untuk diproses.

Perhatikan HTML di dalam arahan.

jenis butang = "butang" ng-click = "deleteNote (note.id)"> × / butang>

Perkara seterusnya yang akan saya sampaikan mungkin kelihatan jauh tetapi ingatlah bahawa kita berada di pihak yang sama dan akan masuk akal setelah saya menghuraikannya. Apabila butang di sudut kanan atas nota melekit diklik, kami memanggil padamNota pada pengawal arahan dan lulus di nota.id nilai. Pengawal kemudian memanggil hapus kira, yang kemudian melaksanakan apa sahaja ungkapan yang kita wujudkan. Sejauh ini bagus? Kami memanggil kaedah tempatan pada pengawal yang kemudian menyerahkannya dengan memanggil apa sahaja ungkapan yang ditentukan dalam ruang lingkup terpencil. Ungkapan yang meminta ibu bapa kebetulan dipanggil padamNota juga.

app.directive ('stickyNote', fungsi (soket) {
var controller = fungsi (skop $) {
$ lingkup.deleteNote = fungsi (id) {
$ lingkup.ondelete ({
saya telah lakukan
});
};
};

kembali {
hadkan: 'A',
pautan: penghubung,
pengawal: pengawal,
skop: {
nota: ’=’,
ondelete: '&'
}
};
});

(Ketika menggunakan ruang lingkup terpencil yang ditentukan ekspresi, parameter dikirim dalam peta objek.)

Dalam skop ibu bapa, padamNota dipanggil dan melakukan penghapusan yang agak standard menggunakan sudut.untuk setiap fungsi utiliti untuk berulang pada nota. Setelah fungsi itu mengendalikan perniagaan tempatannya, ia akan terus maju dan memancarkan acara untuk seluruh dunia untuk bertindak balas dengan sewajarnya.

app.controller ('MainCtrl', fungsi ($ lingkup, soket) {
$ lingkup.notes = [];

// Masuk
socket.on ('onNoteDeleted', fungsi (data) {
$ lingkup.deleteNote (data.id);
});

// Keluar
$ lingkup.deleteNote = fungsi (id) {
var oldNotes = $ lingkup.notes,
nota baru = [];

angular.forEach (nota lama, fungsi (nota) {
jika (note.id! == id) newNotes.push (nota);
});

$ lingkup.notes = nota baru;
socket.emit ('deleteNote', {id: id});
};
});

12. Mengemas kini nota lekat

Kami membuat kemajuan yang luar biasa! Sekarang saya harap anda mula melihat beberapa corak yang muncul dari lawatan angin puyuh ini yang kami lalui. Item seterusnya dalam senarai adalah ciri kemas kini.

Kami akan memulakan elemen DOM yang sebenarnya dan mengikutinya hingga ke pelayan dan kembali ke pelanggan. Mula-mula kita perlu tahu bila tajuk atau isi nota melekit ditukar. AngularJS memperlakukan elemen bentuk sebagai sebahagian daripada model data sehingga anda dapat menghubungkan pengikat data dua arah dalam sekelip mata. Untuk melakukan ini gunakan model ng arahan dan masukkan harta benda yang ingin anda ikat. Dalam kes ini kita akan menggunakan nota.title dan nota.seseorang masing-masing.

Apabila salah satu dari sifat ini berubah, kami ingin menangkap maklumat tersebut untuk disampaikan. Kami mencapai ini dengan ng-perubahan arahan dan menggunakannya untuk memanggil kemas kiniNota dan lulus dalam objek nota itu sendiri. AngularJS melakukan pemeriksaan kotor yang sangat pintar untuk mengesan sama ada nilai apa sahaja yang ada model ng telah berubah dan kemudian melaksanakan ungkapan yang ada di ng-perubahan.

input ng-model = "note.title" ng-change = "updateNote (note)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (note)"> {{note.body}} / textarea>

Kelebihan penggunaan ng-perubahan adakah transformasi tempatan telah berlaku dan kita hanya bertanggungjawab menyampaikan mesej tersebut. Di pengawal, kemas kiniNota dipanggil dan dari sana kita akan memancarkan kemas kiniNota acara untuk pelayan kami disiarkan kepada pelanggan lain.

app.directive ('stickyNote', fungsi (soket) {
var controller = fungsi (skop $) {
$ lingkup.updateNote = fungsi (nota) {
socket.emit (‘updateNote’, nota);
};
};
});

Dan dalam pengawal arahan, kita sedang mendengar onNoteUpdated acara untuk mengetahui bila nota dari pelanggan lain telah diperbaharui sehingga kami dapat mengemas kini versi tempatan kami.

13. Menggerakkan nota melekit

Pada ketika ini kita pada asasnya telah melakukan pusingan di sekitar kolam kiddie CRUD dan kehidupannya baik! Hanya untuk tujuan trik orang ramai untuk menarik perhatian rakan anda, kami akan menambahkan kemampuan untuk memindahkan nota di sekitar skrin dan mengemas kini koordinat dalam masa nyata. Jangan panik - hanya beberapa baris lagi kod. Semua kerja keras ini akan terbayar. Saya janji!

Kami telah menjemput tetamu khas, jQueryUI, ke pesta itu, dan kami melakukan semuanya untuk draggables. Menambah kemampuan menyeret nota secara tempatan hanya memerlukan satu baris kod. Sekiranya anda menambah element.draggable (); ke fungsi penghubung anda, anda akan mula mendengar 'Eye of the Tiger' oleh Survivor kerana anda kini boleh menyeret nota anda ke sekeliling.

Kami ingin mengetahui kapan seretan berhenti dan menangkap koordinat baru untuk diteruskan. jQueryUI dibina oleh beberapa orang yang sangat pintar, jadi apabila penarikan berhenti anda hanya perlu menentukan fungsi panggilan balik untuk acara berhenti. Kami merebut nota.id dari objek lingkup dan nilai CSS kiri dan atas dari ui objek. Dengan pengetahuan itu, kita melakukan apa yang telah kita lakukan selama ini: emit!

app.directive ('stickyNote', fungsi (soket) {
var linker = fungsi (skop, elemen, atrs) {
element.draggable ({
berhenti: fungsi (peristiwa, ui) {
socket.emit ('moveNote', {
id: lingkup.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', fungsi (data) {
// Kemas kini jika nota yang sama
jika (data.id == lingkup.note.id) {
element.animate ({
kiri: data.x,
atas: data.y
});
}
});
};
});

Pada ketika ini, tidak mengejutkan bahawa kami juga sedang mendengar acara berkaitan perpindahan dari perkhidmatan soket. Dalam kes ini adalah diNoteMoved acara dan jika nota itu sepadan maka kami mengemas kini sifat CSS kiri dan atas. Bam! Selesai!

14. Bonus

Ini adalah bahagian bonus yang tidak akan saya sertakan sekiranya saya tidak begitu yakin anda dapat mencapainya dalam masa kurang dari 10 minit. Kami akan menyebarkan ke pelayan langsung (saya masih kagum dengan betapa mudahnya melakukannya).

Pertama, anda perlu mendaftar untuk percubaan Nodejitsu percuma. Percubaan ini percuma selama 30 hari, yang sangat sesuai untuk kaki anda basah.

Setelah membuat akaun, anda perlu memasang pakej jitsu, yang boleh anda lakukan dari baris perintah melalui $ npm pasang jitsu -g.

Kemudian anda perlu log masuk dari baris arahan melalui log masuk $ jitsu dan masukkan kelayakan anda.

Pastikan anda berada dalam aplikasi anda secara langsung, taip $ jitsu menyebarkan dan lalui soalan. Saya biasanya membiarkan sebanyak mungkin ke default, yang bermaksud saya memberikan nama aplikasi saya tetapi bukan subdomain dll.

Dan, kawan-kawan yang saya sayangi, hanya itu yang ada! Anda akan mendapatkan URL ke aplikasi anda dari output pelayan setelah ia digunakan dan sudah siap untuk digunakan.

15. Kesimpulannya

Kami telah membahas banyak sudut AngularJS dalam artikel ini dan saya harap anda bersenang-senang dalam proses ini. Saya rasa ini betul-betul kemas yang dapat anda capai dengan AngularJS dan Socket.io dalam kira-kira 200 baris kod.

Terdapat beberapa perkara yang tidak saya rungkaikan kerana fokus pada perkara utama, tetapi saya mendorong anda untuk menarik sumbernya dan bermain-main dengan aplikasi tersebut. Kami telah membina asas yang kuat, tetapi masih terdapat banyak ciri yang dapat anda tambahkan. Dapatkan penggodaman!

Lukas Ruebbelke adalah peminat teknologi dan mengarang bersama AngularJS dalam Action for Manning Publications. Perkara kegemarannya ialah membuat orang teruja dengan teknologi baru seperti sekarang. Dia menjalankan Kumpulan Pengguna Aplikasi Web Phoenix dan telah mengadakan beberapa hackathon dengan rakan-rakannya dalam melakukan jenayah.