Socket Io

angular 에서 socket-io를 연동하는 방법에 대한 설명

필요한 모듈인 socket.io-client와 ng-node-socket 을 npm을 이용해 인스톨합니다.

Install

npm i socket.io-client
npm i ng-node-socket

app.module.ts

import { SocketMultiService } from 'ng-node-socket';
@NgModule({
  providers: [
    SocketMultiService,
  ]
})

app.components.ts

import { SocketMultiService } from 'ng-node-socket';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

''''
export class AppComponent implements OnDestroy {
  private ngUnsubscribe = new Subject();

  ''''''''''''''''''''''''''
  constructor(
    private socket: SocketMultiService,
  ){
    // 소켓연결 초기화
    this.socket.init('game', '//localhost:3000');

    // 클라이언트에서 서버로 소켓 전송
    this.socket.Emit('game', 'emitSomeThing', {params}, () => {}
    
    // 서버로 부터 소켓 수신
    this.socket.On('game', 'onSomeThing')
      .pipe(takeUntil(this.ngUnsubscribe))
      .subscribe((data: any) => {
      });
  }

  // 아래 처럼 처리하지 않을 경우 동일 소켓이 여러 번 생성되므로 반드시 subscribe한 내용은 ngUnsubscribe 을 이용해 삭제 해야 함
  public ngOnDestroy(): void {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }