<\/div>\n
Merhaba,<\/p>\n
Bu i\u00e7eri\u011fimizde Angular 7<\/em><\/strong> ile birlikte SocketIoModule<\/strong><\/em> mod\u00fcl\u00fcn\u00fc kullanarak bir websockete nas\u0131l ba\u011flan\u0131laca\u011f\u0131n\u0131 ve bu ba\u011flant\u0131 \u00fczerinden nas\u0131l isteklerde bulunulaca\u011f\u0131n\u0131 inceleyece\u011fiz.<\/p>\n
Makale boyunca backend olarak websocket sunucusunu Node.js<\/a> temelli in\u015fa etti\u011fimiz a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fma kar\u015f\u0131layacakt\u0131r.<\/p>\n
\r\nconst http = require("http");\r\nconst socket = require("socket.io");\r\nconst server = http.createServer((request, response) => response.end("..."));\r\nconst io = socket.listen(server.listen(5000, () => console.log("Started...")));\r\nio.on("connect", socket => {\r\n    console.log(`${socket.id} connected.`);\r\n    socket.on("disconnect", () => console.log(`${socket.id} disconnected.`));\r\n    socket.broadcast.on("message", data => socket.broadcast.emit("message", data));\r\n});\r\n<\/pre>\nSocketIoModule Paketinin \u0130ndirilmesi<\/h4>\nHerhangi bir Angular 7 uygulamas\u0131na SocketIoModule paketinin indirilebilmesi i\u00e7in Angular CLI taraf\u0131ndan a\u015fa\u011f\u0131daki kodun \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 yeterlidir;<\/p>\n\r\nAngular CLI : npm install ng-socket-io --save\r\n<\/pre>\nUygulamaya Entegrasyonu<\/h4>\n\u0130ndirilen SocketIoModule paketini uygulamaya entegre edebilmek i\u00e7in “app.module.ts” dosyas\u0131na \u015fu;<\/p>\n\r\nimport { SocketIoModule, SocketIoConfig } from 'ng-socket-io';\r\nconst config: SocketIoConfig = { url: 'http:\/\/localhost:5000', options: {} };\r\n<\/pre>\nve \u015fu;<\/p>\n\r\n  imports: [\r\n    BrowserModule,\r\n    AppRoutingModule,\r\n    SocketIoModule.forRoot(config)\r\n  ],\r\n<\/pre>\nkodlar\u0131n\u0131 yerle\u015ftirmemiz gerekmektedir. Tam bir \u00f6rnek isteyenler i\u00e7in a\u015fa\u011f\u0131ya b\u00fct\u00fcn olarak “app.module.ts” dosyas\u0131n\u0131 alal\u0131m.<\/p>\n\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\nimport { AppComponent } from '.\/app.component';\r\n\r\nimport { SocketIoModule, SocketIoConfig } from 'ng-socket-io';\r\nconst config: SocketIoConfig = { url: 'http:\/\/localhost:5000', options: {} };\r\n\r\n@NgModule({\r\n  declarations: [\r\n    AppComponent\r\n  ],\r\n  imports: [\r\n    BrowserModule,\r\n    AppRoutingModule,\r\n    SocketIoModule.forRoot(config)\r\n  ],\r\n  providers: [],\r\n  bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\nService Olu\u015fturma<\/h4>\nArd\u0131ndan websocket ba\u011flant\u0131s\u0131n\u0131 ger\u00e7ekle\u015ftirebilmesi ve t\u00fcm s\u00fcreci organize edebilmesi i\u00e7in bir service olu\u015ftural\u0131m.<\/p>\n\r\nimport { Injectable } from '@angular\/core';\r\nimport { Socket } from 'ng-socket-io';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class SocketService {\r\n  constructor(private socket: Socket) { }\r\n  sendMessage(message: string) {\r\n    this.socket.emit("message", message);\r\n  }\r\n  getMessage() {\r\n    this.socket.on("message", data => alert(data));\r\n  }\r\n}\r\n<\/pre>\nYukar\u0131da tan\u0131mlanan service’e dikkat ederseniz e\u011fer biri mesaj g\u00f6ndermek i\u00e7in “sendMessage” ve bir di\u011feri ise g\u00f6nderilen mesajlar\u0131 almas\u0131 i\u00e7in “getMessage” olmak \u00fczere iki adet metot tan\u0131mlanm\u0131\u015ft\u0131r. Sizler burada ihtiyac\u0131n\u0131za d\u00f6n\u00fck farkl\u0131 operasyonel fonksiyonlar tan\u0131mlayabilirsiniz.<\/p>\n
Son olarak tan\u0131mlanan bu service’i “app.module.ts” dosyas\u0131nda provider olarak uygulamaya dahil etmeyi unutmuyoruz.<\/p>\n
\r\n@NgModule({\r\n  .\r\n  .\r\n  .\r\n  providers: [SocketService],\r\n  .\r\n  .\r\n  .\r\n})\r\n<\/pre>\nOlas\u0131 Hatalar\u0131n Temizlenmesi<\/h4>\nAngular uygulamas\u0131n\u0131 yay\u0131na al\u0131rken s\u00fcre\u00e7 esnas\u0131nda olas\u0131 hatalarla kar\u015f\u0131la\u015fabilirsiniz. E\u011fer ki bu hatalardan biri;<\/p>\n
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’.
\nnode_modules\/rxjs\/Observable.d.ts(1,15): error TS2307: Cannot find module ‘rxjs-compat\/Observable’.<\/strong><\/em><\/p><\/blockquote>\n
\u015feklindeyse yapman\u0131z gereken rxjs-compat<\/em> k\u00fct\u00fcphanesini projeye entegre etmenizdir.<\/p>\n
\r\nAngular CLI : npm i rxjs-compat\r\n<\/pre>\n\u0130lgili paket yukar\u0131daki komut ile Angular CLI arac\u0131l\u0131\u011f\u0131yla uygulamaya dahil edildi\u011fi taktirde belirtilen olas\u0131 hata d\u00fczeltilmi\u015f olacakt\u0131r.<\/p>\n
Bu hatay\u0131 d\u00fczelttikten sonra uygulamay\u0131 yay\u0131na al\u0131rken a\u015fa\u011f\u0131daki hataylada kar\u015f\u0131la\u015f\u0131lma ihtimali y\u00fcksektir;
\n<\/a>
\n\u0130lgili hatan\u0131n metinsel halinide a\u015fa\u011f\u0131ya al\u0131rsak e\u011fer;<\/p>\n
Uncaught ReferenceError: global is not defined<\/strong><\/em><\/p><\/blockquote>\n
\u015feklindedir.<\/p>\n
Bu hataya kar\u015f\u0131 \u00e7\u00f6z\u00fcm\u00fc ise a\u015fa\u011f\u0131daki kodu uygulaman\u0131n “polyfills.ts” dosyas\u0131n\u0131n makul bir noktas\u0131na ekleyerek ger\u00e7ekle\u015ftiriyoruz.<\/p>\n
\r\n(window as any).global = window\r\n<\/pre>\nAray\u00fcz Tasar\u0131m\u0131<\/h4>\n\u015eimdide client’\u0131n kullanaca\u011f\u0131 aray\u00fcz\u00fc tasarlayal\u0131m.<\/p>\n\r\n<input type="text" #txtMessage> <button (click)="Send(txtMessage.value)">Send<\/button>\r\n<\/pre>\n\r\nimport { Component } from '@angular\/core';\r\nimport { SocketService } from '.\/services\/socket.service';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n\r\n  constructor(private socket: SocketService) {\r\n    socket.getMessage();\r\n  }\r\n  Send(message: string) {\r\n    this.socket.sendMessage(message);\r\n  }\r\n}\r\n<\/pre>\nUygulamay\u0131 Test Edelim<\/h4>\n\u015eu ana kadar yapm\u0131\u015f oldu\u011fumuz \u00e7al\u0131\u015fma neticesinde uygulamay\u0131 aya\u011fa kald\u0131r\u0131p test edersek e\u011fer;
\n<\/a>
\nyukar\u0131daki ekran g\u00f6r\u00fcnt\u00fcs\u00fcnde oldu\u011fu gibi sorunsuz \u00e7al\u0131\u015fmaktad\u0131r.<\/p>\n
Ve i\u015fte b\u00f6ylece Angular uygulamalar\u0131nda websocket \u00e7al\u0131\u015fmalar\u0131n\u0131n nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 incelemi\u015f olduk. Muhtemelen bir sonraki i\u00e7eri\u011fimizde ise Angular 7 ile birlikte birden fazla client\u0131 kapsayacak \u015fekilde websocket ba\u011flant\u0131s\u0131 \u00fczerinde \u00e7al\u0131\u015fan bir top oyunu yazaca\u011f\u0131z.<\/p>\n
O halde \u015fimdilik g\u00f6r\u00fc\u015fmek \u00fczere diyelim…
\n\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…<\/p>\n
\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde Angular 7 ile birlikte SocketIoModule mod\u00fcl\u00fcn\u00fc kullanarak bir websockete nas\u0131l ba\u011flan\u0131laca\u011f\u0131n\u0131 ve bu ba\u011flant\u0131 \u00fczerinden nas\u0131l isteklerde bulunulaca\u011f\u0131n\u0131 inceleyece\u011fiz. Makale boyunca backend olarak websocket sunucusunu Node.js temelli in\u015fa etti\u011fimiz a\u015fa\u011f\u0131daki \u00e7al\u0131\u015fma...<\/p>\n","protected":false},"author":1,"featured_media":10794,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2144,2415,2599,2756,2145],"tags":[2757,2821,2823,2822,2696,2820,2713],"class_list":["post-10766","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-4","category-angular-5","category-angular-6","category-angular-7","category-node-js","tag-angular-7","tag-angular-7-socketiomodule","tag-angular-7-websocket","tag-angular-websocket","tag-rxjs-compat","tag-socketiomodule","tag-websocket"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10766","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=10766"}],"version-history":[{"count":24,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10766\/revisions"}],"predecessor-version":[{"id":10795,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/10766\/revisions\/10795"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/10794"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=10766"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=10766"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=10766"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}