Angular ve NodeJs Üzerinde SocketIO Kullanılarak Real Time Data Bildirilmesi

Selamlar,

Bu makalede, NodeJS üzerinde  Socket.IO ile üzerinde değişiklik yapılan dataları, real time olarak diğer clientlara da bildirilmesi sağlanacaktır. Kısacası güncellenen, silinen ve yeni eklenen tüm kayıtları, connect olan yani ekranı açık olan tüm clientlara real time olarak bildirilecektir. Bu işlem yapılırken sayfa yenilenmeyecek, sadece dataların bağlı olduğu model’e müdahale edilecektir. Böylece, datanın en son hali clientlara her daim bildirilmiş olacaktır.

Bu makale, bir önceki NodeJs Üzerinde Redis Kullanımı ve Refactoring makalesinin devamıdır.

Yeni bir NodeJS Socket projesi oluşturulur. Aşağıdaki komut ile, Express ve Socket.IO kütüphaneleri projeye yüklenir.

UpdatePerson : İlk olarak gelin var olan bir kayıt güncellendiğinde, bunu tüm clientlara bildirip, hepsinde güncellenmesini sağlayalım.

Server Side / app.js: Var olan projeye, Socket.IO implementasyonu için http ve server aşağıdaki gibi tanımlanır.

  • “const server = require(‘http’).Server(app)”: Http kütüphanesi kullanılması için, sayfanın üstünde tanımlanır.
  • “const io = require(‘socket.io’)(server)” : Socket işlemler için Socet.IO, bu şeklide tanımlanır.
  • “server.listen(1453)” : SocketIO’nun, 1453 portundan haberleşmesi sağlanır.
  • “io.on(‘connection’, (socket) => {“: Herhangi bir client connect olduğu zaman, ilk çalışacak function budur.
  • “console.log(‘User Socket Connected’)” : Herhangi bir client login olunca, “User Socket Connected” mesajı console’a yazılır.
  • “socket.on(“disconnect”, () => console.log(${socket.id} User disconnected.))” : Herhangi bir client’ın disconnect olması durumunda, çalışması için tanımlanan methoddur. socket.on() olay yakalama için kullanılan methoddur.
    • console.log(${socket.id} User disconnected.): Size, örnek amaçlı Disconnect olan client’ın socketID’si console’a basılmıştır.
  • socket.broadcast.on(“sendUpdatePerson”, person => {” : Herhangi bir kayıt, client side tarafda güncellendiği zaman, bunun tüm clientlara bildirilmesi için, NodeJs tarafında “socket.broadcast.on()” methodu ile “sendUpdatePerson” olayı’i yakalanır. İlgili event’e güncellenen “Person” model, tüm clientlara “socket.broadcast.emit()” methodu ile Client Side taraftaki “Updatedperson” olayı(event’i) oluşturularak gönderilir.

Not : socket.broadcast.emit() : Kendisi hariç diğer tüm clientlara göndermek için kullanılır. socket.emit(): Olaya neden olan kişi dahil, yani kendisi dahil herkese gönderilir.

Server Side / app.js:

Client Side Angular/ Socket.IO :

Şimdi gelin frontend tarafında Angular projesine, Socket.IO kütüphanesini aşağıdaki komut ile ekleyelim.

app/app.module.ts: Module dosyasına, aşağıdaki kütüphaneler eklenir. “http://localhost:1453” adresi SocketIO’nun çalıştığı url’dir.

app.module.ts / imports [ ]: “SocketIoModule.forRoot(config)”İlgili module, import dizisine config ayarı ile birlikte eklenir.

src/app/personService.ts:

  • Öncelikle import dosyası olarak ‘ngx-socket-io’ sayfanın üstünde tanımlanır.
  • Constructor’da, Dependency Injection ile “Socket” tanımlanır. Bu şekilde daha constructor’da, Socket.IO’ya bağlanılmış olunur.
  • “sendUpdatePerson(person: Person) {“: Herhangi bir kayıt güncellendiği zaman, diğer clientlara bildirmek için çağrılacak methoddur.
  • “this.socket.emit(‘sendUpdatePerson’, person)” : “sendUpdatePerson” olayı yaratılıp SocketIO’ya gönderilir.
  • “updatedPerson = this.socket.fromEvent<Person>(‘Updatedperson’)” : “fromEvent()” function’ı ile NodeJS’den gönderilen, güncellenmiş person datası yakalanır. Ve “updatedPerson” değişkenine gelen “person” model atanır. “fromEvent()” methodunun, geri dönüş tipi her zaman “Observer“‘dır.

src/app/personService.ts/updatePerson(): Methodu aşağıdaki gibi değiştirilir. Sadece yeni eklenen satır, “this.sendUpdatePerson(data); // Send SocketIO“‘dır. Güncellenen “person” model, yukarıda tanımlanan method ile SocketIO’ya gönderilir.

src/app/app.component.ts: ngAfterViewInit() methodu aşağıdaki gibi değiştirilir:

  • “this.service.updatedPerson.subscribe((person: Person) => {” Servis tarafında, “Updatedperson” olayının sürekli dinlenmesi sağlanır. Cevap gelmesi durumunda, gelen data “Person”‘dır.
  • “let updateIndex = this.peopleList.findIndex(per => per.username === person.username)” : Yeni bir data güncellendiğinde, SocketIO “Updatedperson” olayını oluşturur ve personService’de yakanan person datası buraya düşer. “findIndex()” methodu ile, “peopleList” dizisinden ilgili güncelenen person datasının index’i bulunur. 
  • “this.peopleList[updateIndex] = person” : Bulunan index’deki data ile güncelenen data değiştirilir.

InsertPerson: Şimdi sıra geldi yeni bir kayıt girdiğinde, bunun tüm clientlara bildirilmesi ve hepsine canlı olarak eklenmesine.

Server Side / app.js:

  • “socket.broadcast.on(“sendSavePerson”, person => {“: Aşağıda görüldüğü gibi yeni bir person kaydedildiğinde, “sendSavePerson” olayı beklenmektedir.
  • “socket.broadcast.emit(“Savedperson”, person)” : Yeni bir person model geldiğinde, gönderen kişi hariç tüm clientlara yeni eklenen “person” datası gönderilir.

Client Side :  src/app/personService.ts: Yeni bir kayıt eklendiği zaman, yapılacak işler için değiştirilen yerler aşağıda belirtilmiştir.

  • “sendSavePerson(person: Person) {“: Yeni bir person kaydı kaydedilince, ilgili kayıdın tüm clientlara real time gönderilmesi için çağrılan methoddur.
  • “this.socket.emit(‘sendSavePerson’, person)” : “sendSavePerson” olayı yaratılır ve SocketIO’ya gönderilir.
  • “savedPerson = this.socket.fromEvent<Person>(‘Savedperson’)”: SocketIO’dan “Savedperson” olayı beklenir. Yeni bir kayıt girişinde, SocketIO’dan gönderilen “Person” model burada yakalanır.
  • “insertPeople() {.. this.sendSavePerson(data);..} // Send SocketIO” : insertPeople() methodunda diğer clientlara kaydedilen “person” datanın, real time gönderilmesi için yukarıda tanımlanan “this.sendSavePerson()” methodu çağrılır.
    • Düzeltme: Kaydedilen veri olarak data nesnesi gönderilir ise, MongoDB’nin her kaydedilen data için oluşturduğu “_id” kolonu atlanmış olunur. Bundan dolayı, diğer clientlara gönderilen data eksik olur. Bu da SocketIO ile datayı alan diğer clientların, güncelleme sırasında mongoDB’den alınan “_id” değerini veremiyeceğinden hataya düşmesine sebebiyet verir.
    • this.sendSavePerson(response.body)” : Doğru yolu NodeJS’den dönen “_id” kolonun da dahil olduğu datanın, tüm clientlara gönderilmesidir.

src/app/app.component.ts: ngAfterViewInit() methodu aşağıdaki gibi değiştirilir:

  • “this.service.savedPerson.subscribe((person: Person) => {” :”Savedperson” olayının dinlendiği method burasıdır. Yeni bir kayıt girildiğinde, Observer<Person> tipinde data yakalanır.
  • “this.peopleList.unshift(person)” : Yakalanan yeni girilmiş data, “unshift()” methodu ile peopleList[ ]’in en başına eklenir.

Delete person: Şimdi sıra geldi bir kayıt silindiğinde, bunun tüm clientlara bildirilmesine ve herkezden real time silinmesine.

Server Side / app.js:

  • “socket.broadcast.on(“sendDeletePerson”, person => {“: Aşağıda görüldüğü gibi seçilen person kaydı silindiğinde, “sendSavePerson” olayı beklenmektedir.
  • “socket.broadcast.emit(“Deleteperson”, person)” :Silinen person model geldiğinde, gönderen kişi hariç tüm clientlara , silinen “person” model gönderilir.

Client Side :  src/app/personService.ts: Kayıt silindiği zaman, yapılacak işler için değiştirilen yerler aşağıda belirtilmiştir.

  • “sendDeletePerson(person: Person) {“: Kayıt silindiği zaman, silinen kayıdın tüm clientlara real time gönderilmesi için çağrılan methoddur.
  • “this.socket.emit(‘sendDeletePerson’, person)” : “sendDeletePerson” olayı yaratılır ve SocketIO’ya gönderilir.
  • “deletedPerson = this.socket.fromEvent<Person>(‘Deletedperson’)”: SocketIO’dan “Deletedperson” olayı beklenir. Kayıt silindiğinde, SocketIO’dan gönderilen “Person” model burada yakalanır.
  • “deletePeople() {.. this.sendDeletePerson(data);..} // Send SocketIO” : deletePeople() methodunda diğer clientlara, silinen”person” datanın, real time gönderilmesi için yukarıda tanımlanan “this.sendDeletePerson()” methodu çağrılır.

src/app/app.component.ts: ngAfterViewInit() methodu aşağıdaki gibi değiştirilir:

  • “this.service.deletedPerson.subscribe((person: Person) => {” :”Deletedperson” olayının dinlendiği method burasıdır. Kayıt silindiğinde, Observer<Person> tipinde data yakalanır.
  • “let deleteIndex = this.peopleList.findIndex(per => per.username === person.username)” : Kayıt silindiğinde, SocketIO “Deletedperson” olayını oluşturur ve personService’de yakanan person’datası buraya düşer. “findIndex()” methodu ile, elimizde olan “peopleList” dizisinden ilgili silinen person datanın index’i bulunur. 
  • “this.peopleList.splice(deleteIndex, 1);” : Yakalanan yeni silinmiş data, peopleList dizisindeki index ile, “splice()” methodu kullanılarak diziden çıkarılır.

Bu makalede Angular ve NodeJs’üzerinde güncelenen, kaydedilen ve silinen kayıtların, diğer tüm clientlarda SocketIO kullanılarak bildirilmesi ve onlarda da aynı kayıt değişikliğinin olması sağlanmıştır.

Geldik bir makalenin daha sonuna. Yeni bir makalede görüşmek üzere hoşçakalın.

Kaynaklar:

Source Code : https://github.com/borakasmer/SocketIO-Angular8-Redis-NodeJS/tree/master/mongoDb

Herkes Görsün:

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir