[Angular] Angular에서 soket.io 사용하기

Q. 실시간으로 데이터를 받아서 출력해주세요.

레이저 사격 프로젝트를 진행하던중 메인 기능이였던 격발이 완료될시 점수와 표적위치를 출력하는 기능이 필요하였다.

 

처음에는 setInterval로 서버에 1초마다 요청을 하면서 데이터를 받아왔지만, 

 

사격 특성상 언제 사격이 될지 모르고 대기하는 상황에서도 계속해서 서버로 요청을 보내다보니 어떨대는 데이터를 받아오지 못하거나 웹 페이지가 느려지는 현상이 발생하였다.

 

이런 불필요한 요청을 하지 않고 안정적으로 데이터를 받아올 수있도록

데이터 상태변화를 감지하는 observable과 subcribe를 사용해서 구현하였다.

 

socket을 사용하기위해서는 아래 명령어로 설치를 해주어야한다.

npm install socket.io-client

 

바로 코드로 확인해보자.

// socket-service.ts

import { Injectable} from '@angular/core';
import { Observable } from 'rxjs';
import { io, Socket } from 'socket.io-client';

@Injectable()
export class SocketService {
	public socket: Socket;
	getSocketData() {
    	//socket데이터를 감지하기위해 Observable사용
        let observable = new Observable(observer => {
        
        	//socket서버로 연결
            this.socket = io('socket서버 url');
            
            //socket서버에서 받아오기위해 socket.on 사용
            //socket의 키값이 result인 데이터를 감지
            this.socket.on('result', (data) => {
            //data감지하면 observer.naxt로 data반환
                observer.next(data);
            });
            //subcribe 취소시 소켓 연결끊기 
            return () => {
                this.socket.disconnect();
            };
        })
        // observalbe안에는 observer.next(data)가 담겨있다.
        return observable;
    }
}

socket과 observable을 사용하기위해 import를 먼저 해준 다음 사용하면된다.

 

io로 소켓서버에 연결하고 socket.on으로 데이터를 받아온다.

 

socket.on('키값') 해당 부분에서 키값과 일치하는 데이터를 소켓서버에서 받아오고 데이터를 반환하는 예제이다.

 

컴포넌트에서 데이터를 받을때는 아래와 같이 사용하였다.

// main-component.ts

//사용하고자 하는 service를 import해준다.
import { SocketService } from 'src/app/service/socket.service';

export class MainComponent implements OnInit {
	
	// sokcet-service에서 정의한 getSokcetData 함수를 사용하기위한 DI
    constructor(private _socket: SocketService)
    
    ngOnInit(): void {
    	//observable에서 데이터를 감지하고 반환한 observer를 가져오기위한 subscribe사용
    	this._socket.getSocketData.subscribe(data => {
            this.socketData = data
        })
    }
    
	socketData:any
}

 

소켓에서 데이터를 감지한 observable이 observer객체를 반환하고, 반환했을때 subcribe로 반환한 데이터를 받아오는 예제이다.

 

이번 웹소켓 통신을 구현하면서 observable에 대해 공부하게 된 계기가 된것같아 좋은 경험이였다. 

단순한 데이터 핸들링만을 하고있지만 좀더 공부해본다면 웹소켓뿐만 아닌 다른 비동기 함수에 대해서도 적용해볼수 있을것같다.