Websocket vs Ajax

부트캠프를 시작하기 전 사이드 프로젝트로 주식 포트폴리오 웹앱을 만드는 작업을 진행하고 있었다. 이 때 사용했던 기술들은 websocket 과 ajax 였는데, 두 가지를 각각 왜 사용해야하는지에 대한 이유에 대해서 다시한번 생각해보고 정리해보려고 한다.

Why Websocket?

주식 가격을 클라이언트에게 수시로 전달해주는 기능을 구현하려고 investing.com 에서 investpy api 모듈을 통해 주식 가격을 5초에 한번 받아오는 기능을 구현하려고 했었다. 처음엔 Ajax 통신으로 받아오려고 했었지만 그렇게 되면 단기간에 너무 많은 요청으로 인해서 서버의 부하와 브라우저 속도가 저하될 수도 있다는 문제가 있었다.

예를들어 유저가 10만명인데 10만명이 5초마다 10만번의 요청을 한다고 생각해보자 ... 너무 많은 요청 때문에 브라우저의 속도가 느려지게 되서 편의성이 떨어질 것이다.(근데 그렇게 많은 요청이 있을 것 같진 않다. 그저 소망일뿐)

또한 서버에서 데이터를 보내주는 시간이 폴링 주기보다 길다면 중첩되어 실행된 Ajax 통신은 또다시 지연을 가중시키고, 그렇게 느려진 와중에 또다시 Ajax 통신이 시작되고, 또다시 지연이 가중되는 악순환이 벌어질 것이다.

그런데 이를 획기적으로 해결할 수 있는 방법이 있었다.

바로 Websocket 통신을 이용하는 것이였다. 이 방법은 통신 시작 시 클라이언트와 서버 간 한번의 handshaking 으로 소켓을 열어놓고, 그 소켓에서 통신을 하는 것이다.

이렇게 하면 클라이언트가 요청을 하지 않아도 웹소켓을 열어놓고만 있으면 서버에서 일방적으로 데이터의 push 가 가능하다는 점이다. 그래서 investpy api 를 통해 서버에서 5초마다 주식의 실시간 가격을 가져오면 바로 클라이언트로 push 를 해줄 수 있다.

이렇게 하면 클라이언트는 5초마다 요청하는 일 없이 서버에서 보내주는 데이터를 받기만 하면 되기 때문에 속도면에서 ajax 보다 유리하다.

when to use Ajax and Websocket

핵심부터 말하면, 얼마나 잦은 통신을 하느냐에 있다.
investing.com 을 포함한 많은 주식 관련 사이트에 가보면 우리가 페이지에는 가만히 있는데 가격정보를 빠른 주기로 계속 받아온다. 그렇다면 요청없이도 업데이트를 받을 수 있는 websocket 통신을 쓰는 것이 유리할 것이다.

하지만 만약 그것보다 주기가 길다고 가정해보자. 예를들어 1분에 한번씩 데이터를 받아와야 한다면, 괜히 websocket 을 써서 websocket connection 을 유지하기 위해 ping 만 날리는 것 보다는 ajax 통신을 쓰는 것이 나을것이다.

• 네이버 문자중계

1. Ajax :
   HTTP 통신간격을 충분히 두어도 되는 서비스는 ajax 를 사용하면 된다. 스포츠 경기 문자중계의 경우, 10~20초에 한 번 정도만 업데이트 해주어도 비교적 만족스러운 서비스의 질을 유지할 수 있다. 이 정도의 시간간격이라면 서버가 감당해야 하는 접속량도 줄어들고, 일시적으로 응답이 지연되더라도 위험한 상황에 이를 가능성도 줄어들 것이다.

2. Websocket :
   데이터를 받는 주기가 긴데 계속 ping 을 날려서 연결을 유지하고 있을 필요가 없기 때문에 websocket 을 쓸 필요가 없다.

• 주식관련 사이트 or 트래픽이 많은 채팅 사이트

1. Ajax :
   실시간으로 데이터를 받아야하는데 1, 2초 마다 서버에 데이터를 요청하면 서버에 너무 많은 부하가 걸려버린다. 또 데이터를 넘겨주는 시간이 대기시간보다 길어져버리면 중첩되어 실행되는 ajax 때문에 지연이 가중될 수도 있어서 이를 따로 처리해주어야 한다.

2. Websocket :
   한번의 handshaking 으로 웹소켓 통신을 열어서 서버 측에서 클라이언트로 데이터를 push 하면 되기 때문에 속도가 매우 빠르다.

server load vs user convenience

Ajax 를 사용했을 때와 Websocket 을 사용했을 때 서버 부하에 대해서도 생각해 보아야 한다.

여기에 대해서는 아직 많이 공부하고 경험해야 할 것이 산더미지만, 그래도 간단하게 내가 배운 지식을 설명하면 먼저

• Ajax 는 한번 통신하고 연결을 끊지만(Ajax 의 long polling 방식도 역시 대기시간을 길게 늘이는 거지 한번 통신하면 연결은 끊어진다.)

(데이터 받을 때 까지 대기 -> 데이터를 받으면 연결 종료 -> 다시 연결 생성 -> 대기 ... 반복)

• websocket 은 계속 연결을 유지하기 때문에 file descriptor 를 잡고있다. 그렇기 때문에 서버 리소스를 많이 차지한다.

예를들어 유저가 10만명일 때 Ajax 로는 서버 1대로도 처리가 가능한 것을 websocket 으로는 서버 3 ~ 5대를 사용해야 처리가 가능하다는 뜻이다.

따라서 websocket 이 속도면에서는 좋지만 매번 쓸 필요는 없다. 경우에 따라서 Ajax 를 쓰는 것이 효율이 더 좋을 수도 있다는 것이다.

Speed vs Performance vs Cost

ajax 든 websocket 이든 간 우리가 어떤 기술을 사용할 때는
속도 vs 성능 vs 비용 세가지를 항상 고려해야한다.

• 얼마나 빠른가
• 얼마나 공을 들여야하는가
• 얼마나 돈이드는가

속도가 빠르고 성능이 좋으면 가격이 비싸지고
성능이 좋고 가격이 싸면 속도가 느려지고
속도가 빠르고 가격이 비싸면 성능이 나빠지니까

뭐든지 trade-off 를 잘 생각해서 설계를 해야한다.