Socket.io ile AngularJS işbirliği panosu

İçerik

• 01. Sunucu
• 02. Çıplak kemikler
• 03. Bağımlılıklarınızı beyan edin
• 04. Socket.io'yu bağlayın
• 05. Motorlarınızı çalıştırın!
• 06. Devam etmeden önce birkaç samimi düşünce
• 07. Müşteri
• 08. Çıplak kemikler
• 09. Yapışkan not oluşturma
• 10. Yapışkan notların görüntülenmesi
• 11. Yapışkan notu silme
• 12. Yapışkan notu güncelleme
• 13. Yapışkan notu taşıma
• 14. Bonus
• 15. Sonuç
• Bunu beğendin mi? Bunları oku!

• Bilgi gerekli: Orta düzey JavaScript
• Gerektirir: Node.js, NPM
• Proje Zamanı: 2 saat

AngularJS, tarayıcıda zengin istemci tarafı uygulamaları oluşturmak için özellikle uygundur ve karışıma biraz Socket.io eklediğinizde işler gerçekten ilginç hale gelir. Bu makalede, istemci tarafı uygulaması için AngularJS ve tüm bağlı istemciler arasında durumu paylaşmak için Socket.io kullanan gerçek zamanlı bir işbirliği panosu oluşturacağız.

Başlamadan önce biraz temizlik işini ele alalım. Kodun her köşesini ele almayacağım için HTML ve JavaScript konusunda temel bir kavrayışa sahip olduğunuzu varsayacağım. Örneğin, orada yeni bilgi olmadığı için HTML dosyasının başlığına dahil ettiğim CSS ve JavaScript dosyalarını açıklamayacağım.

Ayrıca, takip etmek için kodu GitHub hesabımdan almanızı tavsiye ederim. İyi arkadaşım Brian Ford'un da orijinal fikirlerimden bazılarına dayandırdığım mükemmel bir Socket.io tohumu var.

İşbirliği panosunda istediğimiz dört ana özellik, bir not oluşturma, notları okuma, bir notu güncelleme, bir notu silme ve eğlence için tahtaya bir notu taşıma becerisidir. Evet, doğru, standart CRUD özelliklerine odaklanıyoruz. İnanıyorum ki, bu temel özelliklere odaklanarak, kalıpların ortaya çıkması için yeterli kodu ele almış olacağız, böylece onları alıp başka bir yere uygulayabilirsiniz.

01. Sunucu

Her şeyi üzerine inşa edeceğimiz temel görevi göreceğinden önce Node.js sunucusuyla başlayacağız.

Express ve Socket.io ile bir Node.js sunucusu oluşturacağız. Express'i kullanmamızın nedeni, Node.js içinde statik bir varlık sunucusu kurmak için güzel bir mekanizma sağlamasıdır. Express, birçok harika özellikle birlikte gelir, ancak bu durumda, uygulamayı sunucu ve istemci arasında temiz bir şekilde ikiye bölmek için kullanacağız.

(Node.js ve NPM'nin yüklü olduğu varsayımıyla çalışıyorum. Hızlı bir Google araması, yüklemiyorsanız bunları nasıl yükleyeceğinizi gösterecektir.)

02. Çıplak kemikler

Bu nedenle, sunucunun çıplak kemiklerini oluşturmak için, ayağa kalkıp çalışır durumda olacak birkaç şey yapmamız gerekiyor.

// app.js

// A.1
var express = required (’express’),
app = express ();
server = required (’http’). createServer (uygulama),
io = required (’socket.io’). listen (sunucu);

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

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

A.1 Node.js modüllerimizi uygulamamızda kullanabilmemiz için bildiriyor ve başlatıyoruz. Express'i ilan ediyoruz, Express'i başlatıyoruz ve ardından bir HTTP sunucusu oluşturuyor ve Express örneğini ona gönderiyoruz. Ve buradan Socket.io'yu örnekliyoruz ve ona sunucu örneğimize göz kulak olmasını söylüyoruz.

A.2 Daha sonra, Express uygulamamıza, dosyaları sunmak için genel dizinimizi kullanmasını söylüyoruz.

A.3 Sunucuyu başlatıyoruz ve ona porttan dinlemesini söylüyoruz 1337.

Şimdiye kadar oldukça acısız ve hızlı oldu. Kodda 10 satırdan daha az olduğumuza ve zaten işlevsel bir Node.js sunucumuz olduğuna inanıyorum. İleri!

03. Bağımlılıklarınızı beyan edin

// packages.json
{
"name": "açısal-ortak çalışma panosu",
"description": "AngularJS İşbirliği Panosu",
"sürüm": "0.0.1-1",
"özel": doğru,
"bağımlılıklar": {
"express": "3.x",
"socket.io": "0.9.x"
}
}

NPM'nin en güzel özelliklerinden biri, bağımlılıklarınızı bir package.json dosya ve ardından bunları otomatik olarak npm yükleme komut satırında.

04. Socket.io'yu bağlayın

Uygulamada istediğimiz temel özellikleri zaten tanımladık ve bu nedenle, her işlem için olayı işlemek için Socket.io olay dinleyicileri ve uygun bir kapatma kurmamız gerekiyor.

Aşağıdaki kodda, bunun esasen olay dinleyicileri ve geri aramalardan oluşan bir yapılandırma olduğunu fark edeceksiniz. İlk olay bağ Kapanıştaki diğer olaylarımızı bağlamak için kullandığımız olay.

io.sockets.on (’bağlantı’, işlev (soket) {
socket.on ('createNote', function (data) {
socket.broadcast.emit (’onNoteCreated’, data);
});

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

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

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

Buradan dinleyicileri ekliyoruz createNote, updateNote, deleteNote ve hareket notu. Ve geri arama işlevinde, dinleyen herhangi bir müşteriye olayın gerçekleştiğine dair bildirim gönderilebilmesi için ne olduğunu yayınlıyoruz.

Tek tek olay işleyicilerindeki geri çağırma işlevleri hakkında dikkat çekmeye değer birkaç nokta vardır. Birincisi, eklediğiniz olayı yayınlayan istemciden başka herkese bir etkinlik göndermek istiyorsanız yayın yapmak önce yaymak işlev çağrısı. İkinci olarak, uygun gördükleri şekilde işleyebilmeleri için etkinliğin yükünü ilgili taraflara aktarıyoruz.

05. Motorlarınızı çalıştırın!

Artık bağımlılıklarımızı tanımladığımıza ve Node.js uygulamamızı Express ve Socket.io güçleriyle kurduğumuza göre, Node.js sunucusunu başlatmak oldukça basit.

Öncelikle Node.js bağımlılıklarınızı şu şekilde kurarsınız:

npm yükleme

Ve sonra sunucuyu şu şekilde başlatırsınız:

düğüm app.js

Ve sonra! Tarayıcınızda bu adrese gidersiniz. Bam!

06. Devam etmeden önce birkaç samimi düşünce

Öncelikle bir ön uç geliştiricisiyim ve başlangıçta bir Node.js sunucusunu uygulamama bağlamaktan biraz korkmuştum. AngularJS kısmı bir çırpıda ama sunucu tarafı JavaScript miydi? Bir korku filmindeki ürpertici müziği sıraya koyun.

Ancak, sadece birkaç satır kodla statik bir web sunucusu kurabileceğimi ve tarayıcılar arasındaki tüm olayları işlemek için Socket.io'yu kullanarak birkaç satır daha kurabileceğimi keşfetme konusunda kesinlikle heyecanlandım. Ve hala sadece JavaScript'ti! Zamanında olmak adına, sadece birkaç özelliği ele alıyoruz, ancak umarım makalenin sonunda yüzmenin kolay olduğunu ve havuzun derin ucunun o kadar da korkutucu olmadığını göreceksiniz.

07. Müşteri

Artık sunucumuzla sağlam bir temel oluşturduğumuza göre, en sevdiğim bölüme geçelim - istemciye! Sürüklenebilir kısım için AngularJS, jQueryUI ve stil tabanı için Twitter Bootstrap kullanacağız.

08. Çıplak kemikler

Kişisel bir tercih meselesi olarak, yeni bir AngularJS uygulaması başlattığımda, başlamam gerektiğini bildiğim asgari düzeyi hızlı bir şekilde tanımlamayı ve ardından bunu olabildiğince çabuk yinelemeye başlamayı seviyorum.

Her AngularJS uygulamasının mevcut en az bir denetleyici ile önyüklenmesi gerekir ve bu nedenle genellikle her zaman başladığım yer burasıdır.

Otomatik olarak önyükleme yapmak için uygulamayı eklemeniz yeterlidir ng-uygulaması uygulamanın yaşamasını istediğiniz HTML düğümüne. Çoğu zaman, bunu HTML etiketine eklemek tamamen kabul edilebilir olacaktır. Ayrıca şuna bir özellik ekledim: ng-uygulaması kullanmak istediğimi söylemek için uygulama modül, birazdan tanımlayacağım.

// public / index.html
html ng-app = "uygulama">

En az bir denetleyiciye ihtiyacım olacağını biliyorum ve bu yüzden bunu kullanarak sesleneceğim ng denetleyicisi ve ona bir özellik atamak MainCtrl.

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

O halde şimdi, uygulama ve adında bir denetleyici MainCtrl. Devam edelim ve şimdi onları yaratalım.

Bir modül oluşturmak oldukça basittir. Onu arayarak tanımlarsın açısal modül ve ona bir isim vermek. İleride başvurmak üzere, boş bir dizinin ikinci parametresi, uygulamada kullanılmak üzere alt modülleri enjekte edebileceğiniz yerdir. Bu eğitimin kapsamı dışındadır, ancak uygulamanız karmaşıklık ve ihtiyaçlar içinde büyümeye başladığında kullanışlıdır.

// public / js / collab.js
var app = angular.module (’uygulama’, []);

Bir kaç boş yer tutucu ilan edeceğiz. uygulama ile başlayan modül MainCtrl altında.Bunların hepsini daha sonra dolduracağız, ancak başlangıçtan itibaren temel yapıyı göstermek istedim.

app.controller (’MainCtrl’, function ($ kapsam) {});

Ayrıca Socket.io işlevselliğini bir priz hizmet, böylece bu nesneyi kapsülleyebiliriz ve onu küresel ad alanında yüzer halde bırakmayız.

app.factory (’soket’, işlev ($ rootScope) {});

Ve biz oradayken, adında bir yönerge ilan edeceğiz yapışkan not yapışkan not işlevini içinde kapsüllemek için kullanacağımız.

app.directive (’stickyNote’, function (soket) {});

Öyleyse şimdiye kadar yaptıklarımızı gözden geçirelim. Uygulamayı kullanarak önyükleme yaptık ng-uygulaması ve uygulama denetleyicimizi HTML'de ilan etti. Ayrıca uygulama modülünü tanımladık ve MainCtrl denetleyici priz hizmet ve yapışkan not direktif.

09. Yapışkan not oluşturma

Artık AngularJS uygulamasının iskeletine sahip olduğumuza göre, oluşturma özelliğini geliştirmeye başlayacağız.

app.controller (’MainCtrl’, function ($ kapsam, soket) {// B.1
$ kapsam.notlar = []; // B.2

// Gelen
socket.on ('onNoteCreated', function (data) {// B.3
$ kapsam.notes.push (veri);
});

// Dışa dönük
$ kapsam.createNote = function () {// B.4
var note = {
id: new Date (). getTime (),
title: "Yeni Not",
body: "Beklemede"
};

$ kapsam.notes.push (not);
socket.emit ('createNote', not);
};

B.1 AngularJS'de yerleşik bir bağımlılık ekleme özelliği vardır, bu nedenle $ kapsam nesne ve priz hizmet. $ kapsam nesnesi bir ViewModel görevi görür ve temelde iki yönlü veri bağlamayı etkinleştirmek için içine bazı olayların dahil edildiği bir JavaScript nesnesidir.

B.2 Görünümü bağlamak için kullanacağımız diziyi bildiriyoruz.

B.3 için bir dinleyici ekliyoruz onNoteCreated olay priz hizmet ve olay yükünü $ kapsam.notlar dizi.

B.4 Biz bir createNote varsayılan oluşturan yöntem Not nesne ve onu içine iter $ kapsam.notlar dizi. Ayrıca, priz yaymak için hizmet createNote olay ve geçmek yeni not boyunca nesne.

Artık notu oluşturmak için bir yöntemimiz olduğuna göre, ona nasıl isim vereceğiz? Bu güzel bir soru! HTML dosyasında yerleşik AngularJS yönergesini ekliyoruz ng-tıklama düğmesine ve ardından createNote öznitelik değeri olarak yöntem çağrısı.

button id = "createButton" ng-click = "createNote ()"> Not Oluştur / düğme>

Şimdiye kadar yaptıklarımızı hızlıca gözden geçirmenin zamanı geldi. Bir dizi ekledik. $ kapsam içindeki nesne MainCtrl bu, uygulamanın tüm notlarını tutacak. Ayrıca bir createNote yöntemi $ kapsam yeni bir yerel not yaratma ve ardından bu notu diğer istemcilere yayınlama nesnesi priz hizmet. Ayrıca şuraya bir etkinlik dinleyicisi de ekledik: priz diğer müşterilerin ne zaman bir not oluşturduğunu öğrenebilmemiz için, koleksiyonumuza ekleyebilmemiz için.

10. Yapışkan notların görüntülenmesi

Artık bir not nesnesi oluşturma ve onu tarayıcılar arasında paylaşma yeteneğine sahibiz, ancak bunu gerçekte nasıl görüntüleyeceğiz? Direktiflerin devreye girdiği yer burasıdır.

Yönergeler ve karmaşıklıkları geniş bir konudur, ancak kısa versiyonu, öğeleri ve öznitelikleri özel işlevlerle genişletmenin bir yolunu sağlamasıdır. Direktifler, AngularJS ile ilgili en sevdiğim kısımdır çünkü temelde uygulamanızın etrafında HTML'de tam bir DSL (Etki Alanına Özel Dil) oluşturmanıza olanak tanır.

Doğaldır ki, işbirliği panomuz için yapışkan notlar oluşturacağımızdan, yapışkan not direktif. Yönergeler, üzerinde bildirmek istediğiniz bir modül üzerinde yönerge yöntemini çağırarak ve bir isim ve bir yönerge tanımlama nesnesi döndüren bir işlevi ileterek tanımlanır. Yönerge tanımlama nesnesi, üzerinde tanımlayabileceğiniz birçok olası özelliğe sahiptir, ancak burada amaçlarımız için yalnızca birkaçını kullanacağız.

Yönerge tanımlama nesnesinde tanımlayabileceğiniz özelliklerin tüm listelerini görmek için AngularJS belgelerine göz atmanızı öneririm.

app.directive (’stickyNote’, function (socket) {
var linker = function (kapsam, öğe, öznitelik) {};

var denetleyici = işlev ($ kapsam) {};

dönüş {
restrict: "A", // C.1
link: bağlayıcı, // C.2
denetleyici: denetleyici, // C.3
kapsam: {// C.4
not: ’=’,
ondelete: ’&’
}
};
});

C.1 Yönergenizi belirli bir HTML öğesi türüyle sınırlayabilirsiniz. En yaygın olan ikisi, kullanarak beyan ettiğiniz öğe veya özniteliktir. E ve Bir sırasıyla. Bunu bir CSS sınıfı veya yorumla da sınırlayabilirsiniz, ancak bunlar o kadar yaygın değildir.

C.2 Bağlantı işlevi, tüm DOM işleme kodunuzu koyduğunuz yerdir. Bulduğum birkaç istisna var, ancak bu her zaman doğrudur (zamanın en az yüzde 99'u). Bu, AngularJS'nin temel bir temel kuralıdır ve bu yüzden onu vurguladım.

C.3 Kontrolör işlevi, tıpkı uygulama için tanımladığımız ana kontrolör gibi çalışır, ancak $ kapsam ilettiğimiz nesne, direktifin üzerinde bulunduğu DOM öğesine özeldir.

C.4 AngularJS, bir direktifin kapsamının dış dünya ile nasıl iletişim kurduğunu açıkça tanımlamanıza izin veren izole edilmiş kapsam kavramına sahiptir. Kapsam bildirmemiş olsaydık, yönerge örtülü olarak üst kapsamdan üst-çocuk ilişkisiyle miras alırdı. Çoğu durumda bu optimal değildir. Kapsamı izole ederek, dış dünyanın istemeden ve direktifinizin durumunu olumsuz etkileme olasılığını azaltıyoruz.

İki yönlü veri bağlamayı beyan ettim Not ile = sembol ve bir ifade bağlanması ondelete ile & sembol. Çerçevedeki daha karmaşık konulardan biri olduğundan, izole kapsamın tam açıklaması için lütfen AngularJS belgelerini okuyun.

Şimdi DOM'a yapışkan bir not ekleyelim.

Herhangi bir iyi çerçeve gibi, AngularJS de kutudan çıkar çıkmaz gerçekten harika özelliklerle birlikte gelir. En kullanışlı özelliklerden biri ng-tekrar. Bu AngularJS yönergesi, bir dizi nesneyi geçirmenize izin verir ve dizideki öğe sayısı kadar üzerinde olduğu etiketi çoğaltır. Aşağıdaki durumda, üzerinde yineliyoruz notlar dizisi ve çoğaltılması div eleman ve onun uzunluğu için alt öğeleri notlar dizi.

div sticky-note ng-tekrar = "notlardaki not" note = "not" ondelete = "deleteNote (id)">
button type = "button" ng-click = "deleteNote (note.id)"> × / button>
input ng-model = "note.title" ng-change = "updateNote (not)" type = "text">
textarea ng-model = "note.body" ng-change = "updateNote (not)"
> {{note.body}} / textarea>
/ div>

Nin güzelliği ng-tekrar ilettiğiniz diziye bağlı olmasıdır ve diziye bir öğe eklediğinizde DOM öğeniz otomatik olarak güncellenir. Bunu bir adım öteye taşıyabilir ve yalnızca standart DOM öğelerini değil, diğer özel yönergeleri de tekrarlayabilirsiniz. Bu yüzden görüyorsun yapışkan not öğenin bir özniteliği olarak.

Açıklığa kavuşturulması gereken iki özel kod biti daha vardır. Kapsamı izole ettik. yapışkan notlar iki özellik hakkında direktif. İlki, bağlanma tanımlı yalıtılmış kapsamdır. Not Emlak. Bu, not nesnesi üst kapsamda her değiştiğinde, yönergedeki karşılık gelen not nesnesini otomatik olarak güncelleyeceği ve bunun tersi anlamına gelir. Tanımlanan diğer izole kapsam, ondelete öznitelik. Bunun anlamı ne zaman ondelete direktifte çağrılırsa, içindeki ifade ne olursa olsun ondelete yönergeyi başlatan DOM öğesindeki öznitelik.

Bir yönerge somutlaştırıldığında, DOM'a eklenir ve bağlantı işlevi çağrılır. Bu, öğede bazı varsayılan DOM özelliklerini ayarlamak için mükemmel bir fırsattır. Geçtiğimiz element parametresi aslında bir jQuery nesnesidir ve bu nedenle onun üzerinde jQuery işlemlerini gerçekleştirebiliriz.

(AngularJS aslında içine yerleştirilmiş bir jQuery alt kümesiyle birlikte gelir, ancak jQuery'nin tam sürümünü zaten eklediyseniz, AngularJS bunu erteleyecektir.)

app.directive (’stickyNote’, function (soket) {
var linker = function (kapsam, öğe, öznitelik) {
// Güzelleştirmek için biraz DOM başlatması
element.css ('left', '10px');
element.css ('top', '50px');
element.hide (). fadeIn ();
};
});

Yukarıdaki kodda, yapışkan notu sahnede konumlandırıp, silikleştiriyoruz.

11. Yapışkan notu silme

Artık yapışkan not ekleyebildiğimize ve görüntüleyebileceğimize göre, yapışkan notları silmenin zamanı geldi. Yapışkan notların oluşturulması ve silinmesi, notların bağlı olduğu dizideki öğeleri ekleme ve silme meselesidir. Bu, bu diziyi korumak için üst kapsamın sorumluluğudur, bu nedenle silme talebini direktifin içinden başlatırız, ancak asıl ağır işi üst kapsamın yapmasına izin veririz.

Bu nedenle, direktifte ifade tanımlı izole kapsam yaratmanın tüm zorluklarını aştık: böylece direktif silme olayını dahili olarak alabilir ve işlenmek üzere üst kuruluşuna iletebilirdi.

Yönergenin içindeki HTML'ye dikkat edin.

button type = "button" ng-click = "deleteNote (note.id)"> × / button>

Söyleyeceğim bir sonraki şey uzun bir yol gibi görünebilir, ancak aynı tarafta olduğumuzu ve detaylandırdıktan sonra mantıklı olacağını unutmayın. Yapışkan notun sağ üst köşesindeki düğmeye tıklandığında arıyoruz deleteNote direktifin denetleyicisinde ve note.id değer. Denetleyici daha sonra arar ondelete, daha sonra ona bağladığımız ifadeyi çalıştırır. Çok uzak çok iyi? Denetleyicide yerel bir yöntemi çağırıyoruz ve ardından izole kapsamda tanımlanmış olan ifadeyi çağırarak onu devre dışı bırakıyoruz. Ebeveyn tarafından çağrılan ifade sadece çağrılır deleteNote yanı sıra.

app.directive (’stickyNote’, function (socket) {
var controller = function ($ kapsam) {
$ kapsam.deleteNote = function (id) {
$ kapsam.ondelete ({
yaptım
});
};
};

dönüş {
restrict: "A",
link: bağlayıcı,
denetleyici: denetleyici,
dürbün: {
not: ’=’,
ondelete: ’&’
}
};
});

(İfade tanımlı yalıtılmış kapsam kullanılırken, parametreler bir nesne eşleminde gönderilir.)

Üst kapsamda, deleteNote çağrılır ve oldukça standart bir silme işlemi yapar. açısal. forEach notes dizisi üzerinde yineleme yapmak için yardımcı program işlevi. İşlev, yerel işini hallettikten sonra devam eder ve dünyanın geri kalanının buna göre tepki vermesi için olayı yayar.

app.controller (’MainCtrl’, function ($ kapsam, soket) {
$ kapsam.notlar = [];

// Gelen
socket.on ('onNoteDeleted', function (data) {
$ kapsam.deleteNote (data.id);
});

// Dışa dönük
$ kapsam.deleteNote = function (id) {
var oldNotes = $ kapsam.notlar,
newNotes = [];

angular.forEach (oldNotes, function (note) {
if (note.id! == id) newNotes.push (not);
});

$ kapsam.notlar = yeniNotlar;
socket.emit ('deleteNote', {id: id});
};
});

12. Yapışkan notu güncelleme

Harika bir ilerleme kaydediyoruz! Şimdiye kadar, yaptığımız bu kasırga turundan bazı kalıpların ortaya çıktığını görmeye başlamışsınızdır umarım. Listedeki bir sonraki öğe güncelleme özelliğidir.

Gerçek DOM öğeleriyle başlayacağız ve bunu sunucuya ve istemciye kadar tüm yol boyunca izleyeceğiz. Öncelikle yapışkan notun başlığının veya gövdesinin ne zaman değiştirileceğini bilmemiz gerekir. AngularJS, form öğelerini veri modelinin bir parçası olarak ele alır, böylece iki yönlü veri bağlamayı bir çırpıda bağlayabilirsiniz. Bunu yapmak için şunu kullanın: ng-modeli direktif ve bağlamak istediğiniz mülke koyun. Bu durumda kullanacağız note.title ve note.body sırasıyla.

Bu özelliklerden herhangi biri değiştiğinde, bu bilgiyi aktarmak için yakalamak isteriz. Bunu şununla başarıyoruz: ng-değişim direktif ve aramak için kullanın updateNote ve not nesnesinin kendisine iletin. AngularJS, ne olursa olsun değerinin olup olmadığını tespit etmek için çok akıllıca kirli kontroller yapar. ng-modeli değişti ve sonra içindeki ifadeyi çalıştırdı ng-değişimi.

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

Kullanmanın iyi tarafı ng-değişimi yerel dönüşümün çoktan gerçekleşmiş olması ve sadece mesajı iletmekten sorumlu olduğumuzdur. Kontrolörde, updateNote çağrılır ve oradan yayınlayacağız updateNote sunucumuzun diğer istemcilere yayınlaması için etkinlik.

app.directive (’stickyNote’, function (soket) {
var controller = function ($ kapsam) {
$ kapsam.updateNote = function (not) {
socket.emit ('updateNote', not);
};
};
});

Yönerge denetleyicisinde, onNoteUpdated yerel sürümümüzü güncelleyebilmemiz için başka bir istemciden gelen bir notun ne zaman güncellendiğini bilme olayı.

var controller = function ($ kapsam) {
// Gelen
socket.on ('onNoteUpdated', function (data) {
// Aynı not varsa güncelle
if (data.id == $ kapsam.note.id) {

$ kapsam.note.title = data.title;
$ kapsam.note.body = data.body;
}
});
};

13. Yapışkan notu taşıma

Bu noktada temelde CRUD çocuk havuzunun etrafında bir tur attık ve hayat güzel! Sadece arkadaşlarınızı etkilemek için bir salon numarası uğruna, ekranda notları hareket ettirme ve koordinatları gerçek zamanlı olarak güncelleme yeteneği ekleyeceğiz. Panik yapmayın - bu sadece birkaç satırlık bir koddur. Tüm bu sıkı çalışma karşılığını alacak. Söz veriyorum!

Partiye özel konuk jQueryUI'yi davet ettik ve her şeyi draggables için yaptık. Bir notu yerel olarak sürükleme yeteneğini eklemek yalnızca bir satır kod alır. Eklerseniz element.draggable (); Bağlayıcı işlevinize, Survivor'dan "Eye of the Tiger" ı duymaya başlayacaksınız çünkü artık notlarınızı sürükleyebilirsiniz.

Sürüklemenin ne zaman durduğunu bilmek ve geçmek için yeni koordinatları yakalamak istiyoruz. jQueryUI bazı çok akıllı kişiler tarafından oluşturulmuştur, bu nedenle sürükleme durduğunda, durdurma olayı için bir geri arama işlevi tanımlamanız yeterlidir. Yakalarız note.id kapsam dışı nesne ve sol ve üst CSS değerleri ui nesne. Bu bilgiyle, başından beri yaptığımız şeyi yapıyoruz: yaymak!

app.directive (’stickyNote’, function (soket) {
var linker = function (kapsam, öğe, öznitelik) {
element.draggable ({
stop: function (olay, ui) {
socket.emit ('moveNote', {
id: kapsam.note.id,
x: ui.position.left,
y: ui.position.top
});
}
});

socket.on ('onNoteMoved', function (data) {
// Aynı not varsa güncelle
if (data.id == kapsam.note.id) {
element.animate ({
sol: data.x,
top: data.y
});
}
});
};
});

Bu noktada, soket hizmetinden hareketle ilgili bir olay da dinliyor olmamız şaşırtıcı olmamalıdır. Bu durumda onNoteMoved olay ve eğer not bir eşleşme ise sol ve üst CSS özelliklerini güncelliyoruz. Bam! Bitti!

14. Bonus

Bu, 10 dakikadan daha kısa sürede elde edeceğinizden kesinlikle emin olmasaydım dahil etmeyeceğim bir bonus bölümüdür. Canlı bir sunucuya dağıtacağız (Yapmanın ne kadar kolay olduğuna hala şaşırıyorum).

Öncelikle, ücretsiz bir Nodejitsu denemesine kaydolmanız gerekir. Deneme 30 gün boyunca ücretsizdir, bu da ayaklarınızı ıslatmak için mükemmeldir.

Hesabınızı oluşturduktan sonra, jitsu paketini kurmanız gerekir, bunu komut satırından şu yolla yapabilirsiniz: $ npm jitsu -g yükle.

Ardından komut satırından şu adresten giriş yapmanız gerekir: $ jitsu girişi ve kimlik bilgilerinizi girin.

Doğrudan uygulamanızda olduğunuzdan emin olun, yazın $ jitsu dağıtımı ve sorular üzerinden adım atın. Genellikle mümkün olduğunca varsayılana bırakırım, bu da uygulamama bir ad veririm ancak bir alt alan adı vb. Vermem anlamına gelir.

Ve sevgili dostlarım, hepsi bu kadar! Uygulamanızın URL'sini, dağıtıldıktan ve kullanıma hazır olduğunda sunucunun çıktısından alacaksınız.

15. Sonuç

Bu makalede birçok AngularJS alanını ele aldık ve umarım bu süreçte çok eğlenmişsinizdir. Yaklaşık 200 satır kodda AngularJS ve Socket.io ile başarabileceklerinizin gerçekten harika olduğunu düşünüyorum.

Ana noktalara odaklanmak uğruna ele almadığım birkaç şey vardı, ancak kaynağı aşağı çekip uygulamayla oynamanızı tavsiye ederim. Güçlü bir temel oluşturduk, ancak ekleyebileceğiniz birçok özellik var. Bilgisayar korsanlığı alın!

Lukas Ruebbelke bir teknoloji meraklısıdır ve AngularJS in Action for Manning Publications'ın ortak yazarıdır. En sevdiği şey, insanları yeni teknoloji konusunda kendisi kadar heyecanlandırmaktır. Phoenix Web Uygulaması Kullanıcı Grubunu yönetiyor ve suç ortaklarıyla birlikte çok sayıda hackathon barındırdı.

Bunu beğendin mi? Bunları oku!

• Uygulama nasıl yapılır
• Favori web yazı tiplerimiz - ve bir kuruşa mal olmazlar
• Artırılmış Gerçeklik için sırada neler olduğunu keşfedin
• Ücretsiz dokuları indirin: yüksek çözünürlüklü ve şimdi kullanıma hazır