본문 바로가기

Front-End

클라이언트 UI와 서버 데이터 제대로 연동하고 싶다.

 상황


Server DB table에 있는 값들을 Client 화면에 실시간으로 보여주고 싶다. ( 2-way binding ) 이걸 구현하려면 어떻게 해야될까???


 만약에 Client에서 요청한 할 때 값을 받아온다면...

1) DB를 조회하는 Service 만들기

2) Client에서 해당 Service 요청

3) Service response가 왔을 때 UI랑 data랑 바인딩


이런 순으로 구현하면 될 것이다. 하지만, 요청을 미친듯이 한다면? Connection하는데 드는 비용을 계속 감수해야 한다. 그렇다면 어떻게 해결해야 할까?


HTML5 프로토콜에 추가된 WebSocket을 이용하면 된다. WebSocket은 브라우저와 서버 사이의 양방향 연결채널을 구성하는 HTML5 프로토콜이다. WebSocket API를 통해 서버로 메시지를 보내고 요청없이 응답을 받아오는 것이 가능하다.