Angular 7 – SocketIoModule Modülü İle Websocket İşlemleri

Merhaba,

Bu içeriğimizde Angular 7 ile birlikte SocketIoModule modülünü kullanarak bir websockete nasıl bağlanılacağını ve bu bağlantı üzerinden nasıl isteklerde bulunulacağını inceleyeceğiz.

Makale boyunca backend olarak websocket sunucusunu Node.js temelli inşa ettiğimiz aşağıdaki çalışma karşılayacaktır.

const http = require("http");
const socket = require("socket.io");
const server = http.createServer((request, response) => response.end("..."));
const io = socket.listen(server.listen(5000, () => console.log("Started...")));
io.on("connect", socket => {
    console.log(`${socket.id} connected.`);
    socket.on("disconnect", () => console.log(`${socket.id} disconnected.`));
    socket.broadcast.on("message", data => socket.broadcast.emit("message", data));
});

SocketIoModule Paketinin İndirilmesi

Herhangi bir Angular 7 uygulamasına SocketIoModule paketinin indirilebilmesi için Angular CLI tarafından aşağıdaki kodun çalıştırılması yeterlidir;

Angular CLI : npm install ng-socket-io --save

Uygulamaya Entegrasyonu

İndirilen SocketIoModule paketini uygulamaya entegre edebilmek için “app.module.ts” dosyasına şu;

import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:5000', options: {} };

ve şu;

  imports: [
    BrowserModule,
    AppRoutingModule,
    SocketIoModule.forRoot(config)
  ],

kodlarını yerleştirmemiz gerekmektedir. Tam bir örnek isteyenler için aşağıya bütün olarak “app.module.ts” dosyasını alalım.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { SocketIoModule, SocketIoConfig } from 'ng-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:5000', options: {} };

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SocketIoModule.forRoot(config)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Service Oluşturma

Ardından websocket bağlantısını gerçekleştirebilmesi ve tüm süreci organize edebilmesi için bir service oluşturalım.

import { Injectable } from '@angular/core';
import { Socket } from 'ng-socket-io';

@Injectable({
  providedIn: 'root'
})
export class SocketService {
  constructor(private socket: Socket) { }
  sendMessage(message: string) {
    this.socket.emit("message", message);
  }
  getMessage() {
    this.socket.on("message", data => alert(data));
  }
}

Yukarıda tanımlanan service’e dikkat ederseniz eğer biri mesaj göndermek için “sendMessage” ve bir diğeri ise gönderilen mesajları alması için “getMessage” olmak üzere iki adet metot tanımlanmıştır. Sizler burada ihtiyacınıza dönük farklı operasyonel fonksiyonlar tanımlayabilirsiniz.

Son olarak tanımlanan bu service’i “app.module.ts” dosyasında provider olarak uygulamaya dahil etmeyi unutmuyoruz.

@NgModule({
  .
  .
  .
  providers: [SocketService],
  .
  .
  .
})

Olası Hataların Temizlenmesi

Angular uygulamasını yayına alırken süreç esnasında olası hatalarla karşılaşabilirsiniz. Eğer ki bu hatalardan biri;

ERROR in node_modules/ng-socket-io/dist/src/socket-io.service.d.ts(1,10): error TS2305: Module ‘”/node_modules/rxjs/Observable”‘ has no exported member ‘Observable’.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module ‘rxjs-compat/Observable’.

şeklindeyse yapmanız gereken rxjs-compat kütüphanesini projeye entegre etmenizdir.

Angular CLI : npm i rxjs-compat

İlgili paket yukarıdaki komut ile Angular CLI aracılığıyla uygulamaya dahil edildiği taktirde belirtilen olası hata düzeltilmiş olacaktır.

Bu hatayı düzelttikten sonra uygulamayı yayına alırken aşağıdaki hataylada karşılaşılma ihtimali yüksektir;
Angular 7 – SocketIoModule Modülü İle Websocket İşlemleri
İlgili hatanın metinsel halinide aşağıya alırsak eğer;

Uncaught ReferenceError: global is not defined

şeklindedir.

Bu hataya karşı çözümü ise aşağıdaki kodu uygulamanın “polyfills.ts” dosyasının makul bir noktasına ekleyerek gerçekleştiriyoruz.

(window as any).global = window

Arayüz Tasarımı

Şimdide client’ın kullanacağı arayüzü tasarlayalım.

<input type="text" #txtMessage> <button (click)="Send(txtMessage.value)">Send</button>
import { Component } from '@angular/core';
import { SocketService } from './services/socket.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private socket: SocketService) {
    socket.getMessage();
  }
  Send(message: string) {
    this.socket.sendMessage(message);
  }
}

Uygulamayı Test Edelim

Şu ana kadar yapmış olduğumuz çalışma neticesinde uygulamayı ayağa kaldırıp test edersek eğer;
Angular 7 – SocketIoModule Modülü İle Websocket İşlemleri
yukarıdaki ekran görüntüsünde olduğu gibi sorunsuz çalışmaktadır.

Ve işte böylece Angular uygulamalarında websocket çalışmalarının nasıl yapıldığını incelemiş olduk. Muhtemelen bir sonraki içeriğimizde ise Angular 7 ile birlikte birden fazla clientı kapsayacak şekilde websocket bağlantısı üzerinde çalışan bir top oyunu yazacağız.

O halde şimdilik görüşmek üzere diyelim…
İlgilenenlerin faydalanması dileğiyle…

İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir cevap yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.