ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 웹소켓에 대한 이해
    IT 지식 2021. 3. 14. 14:59
    728x90

    주니어 개발자로서 그동안 서버와 클라이언트 간의 통신은 http를 통해서만 이루어진다고 생각했었습니다. 하지만, 지금 제가 맡은 업무 중에서는 웹소켓을 통해 통신하는 방법도 있었습니다. 웹소켓은 주로 실시간 통신이 필요한 서비스를 개발할때 활용되는 방식입니다. 인터넷 자료를 찾아보시면, 채팅, 게임, 주식 등의 사례에서 웹소켓을 많이 활용하고 있다는 것을 알 수 있습니다. 오늘은 이러한 웹 소켓이 무엇인지에 대해 간략하게 이해하는 시간을 가져보도록 하겠습니다.

     

    1. 웹 소켓의 등장 이유

     

    초기 웹은 단순히 정보전달을 위한 문서를 보여주는 기능이 전부였습니다. http는 클라이언트의 요청에 따라 필요한 문서를 보여주기에 가장 적합하면서도 단순한 프로토콜이였죠. 하지만 인터넷과 기술이 발전하면서, 사람들은 웹에서 문서 그 이상의  기능을 원하기 시작했습니다. 그 옛날 플래시 게임부터 시작해서 채팅이나 기타 등등의 많은 기능들을 개발자에게 요구하기 시작했습니다. 하지만 http 프로토콜은 클라이언트에 요청에 따른 반응만 할 수 있었을 뿐, 능동적으로 무언가 클라이언트에게 해주기엔 어려운 부분이 있었습니다. 또한 http는 매 요청마다 연결을 맺고 끊는 과정을 반복해야 했기에 통신의 효율성이라는 측면에서도 부족한 부분이 많았습니다.

     

    이러한 문제를 해결하고자 http5부터 웹소켓이 등장하게 되었습니다. 웹 소켓은 실시간 양방향 통신을 지원하며, 한번 연결이 되면 클라이언트와 서버 모두 자유롭게 데이터를 보낼 수 있다는 특징이 있습니다. 웹소켓 이전 http가 편지를 주고 받는 느낌이라면, 웹소켓은 전화를 연결해서 서로 자유롭게 이야기하는 느낌이라고 할 수 있습니다. 이런 방식으로 개편되다 보니, 통신의 효율성 또한 많이 개선되었습니다.

     

    2. 웹소켓 프로토콜

     

    http를 이용할 때, http를 이용하는 것처럼, 웹소켓을 이용할 때의 프로토콜은 ws를 활용합니다. 또한 http의 보안 이슈를 해결하기 위해 https를 활용하는 것처럼, 웹소켓에서도 wss를 통해 보안이 강화된 프로토콜을 사용할 수 있습니다. 웹소켓은 http를 통히 연결을 수립하는데, 연결에 사용하는 방식은 핸드쉐이크 입니다. 

    위 그림은 웹소켓 핸드쉐이크를 통한 통신을 보여주는 그림입니다. 위 그림에서 알 수 있듯 핸드쉐이크는 한 번의 http요청과 응답으로 이루어집니다. 핸드쉐이크가 끝나면 http 프로토콜을 웹소켓 프로토콜로 변환하여 통신하는 구조입니다. 

     

    웹소켓을 연결하기 위해 주고 받는 웹소켓 핸드쉐이크 요청은 다음과 같습니다.

     

    클라이언트 요청
    
    GET /chat HTTP/1.1
    Host: server.example.com
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
    Sec-WebSocket-Protocol: chat, superchat
    Sec-WebSocket-Version: 13
    Origin: http://example.com
    
    // 출처: https://ko.wikipedia.org/wiki/%EC%9B%B9%EC%86%8C%EC%BC%93#%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C_%ED%95%B8%EB%93%9C%EC%85%B0%EC%9D%B4%ED%81%AC

     

    서버 응답:
    
    HTTP/1.1 101 Switching Protocols
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
    Sec-WebSocket-Protocol: chat
    
    //출처: https://ko.wikipedia.org/wiki/%EC%9B%B9%EC%86%8C%EC%BC%93#%ED%94%84%EB%A1%9C%ED%86%A0%EC%BD%9C_%ED%95%B8%EB%93%9C%EC%85%B0%EC%9D%B4%ED%81%AC

     

    3. 마무리

     

    오늘은 웹소켓에 대해 아주 간략하게 소개해 드리는 시간을 가져보았습니다. 아직은 이 웹소켓을 제대로 활용한 코드를 작성하지 못하고 있지만, 후에 실시간 통신이 필요한 업무나 서비스를 개발하게 될 때, 이 웹소켓에 대한 이해가 많은 도움이 되지 않을까 싶습니다. 다른 사례들, 다른 코드들을 보면서 웹소켓에 대한 코드들과 그들이 어떻게 활용되고 있는지를 더 익혀가면서 실력을 쌓아나가야 하겠습니다.

     

     

     

    728x90

    댓글

Designed by Tistory.