[TIL] WebSocket 공부하기

해달·2021년 12월 9일
0

TIL

목록 보기
60/80
post-custom-banner

socket.io를 공부하려했더니 ! Web socekt이 먼저다 ?]

프로젝트에 1:1 매칭으로 이루어지는 서비스에 채팅 기능을 구현하기위해
실시간 통신이 이루어져야했습니다.
실시간통신이 가능한 socket.io를 사용하게 되면서
socket.io 가 web socket 기반의 라이브러리라는 사실을 알게되었고 추가적으로
공부를 하게 되었습니다.


웹소켓 이란?

웹소켓은 HTML5 의 웹 표준기술로
라이브러리가 아닌 클라이언트와 서버간의 양방향 소통을 위한 통신 프로토콜입니다
웹소켓을 지원하는 브라우저의 경우 웹소켓 프로토콜을 지원합니다.

특징

  • Websocket API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 실시간 통신이 가능합니다.
  • 브라우저별로 지원하는 웹소켓 버전이 다르며 오래된 브라우저의 경우 아예 지원하지 않습니다.
  • http 프로토콜 위에서 핸드쉐이크를 한 후 프로토콜을 변환하여 프레임을 통해 데이터를 전송합니다
    • 크게 오프닝핸드쉐크, 데이터 트랜스풜, 클로징핸드쉐이크 세가지 영역으로 나눌 수 있습니다
  • HTTP Request를 그대로 사용하기 때문에 기존 80(http) , 433(https) 포트를 사용합니다

socket.io와 비슷한듯 다른 내용이였는데 양방향 소통을 위한 기술이라는 사실을 확인할 수 있었다.
에러핸들링이 어려워서 대부분은 js를 이용하여서 구현할 수 있는 socket.io를 사용을 선호한다는 사실을 알 수 있었고,
대신 주식과 같이 데이터 전송이 많은경우에는 빠르고 비용이 적게 드는 표준 웹소켓을 사용한다는 사실이였다.
세세하게 관리가 필요한 경우는 브로드 캐스팅이 가능한 socket.io를 이용하면 될 것같다.

공부를 하게되면서 정말 많은 자료를 읽어보았는데 아직은 기본지식이 부족하여서 읽어도 이해가 안되는 부분이 많았다.
용어또한 내용은 이해가 됐지만 설명하라하기엔 이해도가 부족한거 같다
프로젝트가 마무리되면 추가적으로 공부를 다시 해보아야 할 것 같다


참고자료

너무 많지만 추후에 다시 공부하게 될 때 정독을 위해서,,

(1) https://www.peterkimzz.com/websocket-vs-socket-io/
(2) https://www.educba.com/websocket-vs-socket-io/
(3) https://eun-jeong.tistory.com/30
(4) https://stackoverflow.com/questions/10112178/differences-between-socket-io-and-websockets (옛날글)
(5) https://edu.goorm.io/learn/lecture/557/%ED%95%9C-%EB%88%88%EC%97%90-%EB%81%9D%EB%82%B4%EB%8A%94-node-js/lesson/174379/web-socket%EC%9D%B4%EB%9E%80
(6) https://davidwalsh.name/websocket
(7) https://www.youtube.com/watch?v=MPQHvwPxDUw&t=441s
(8) https://theheydaze.tistory.com/565
(9) https://curryyou.tistory.com/348
(10) https://caileb.tistory.com/185
(11) https://techbless.github.io/2020/01/24/Socket-io%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%96%91%EB%B0%A9%ED%96%A5-%ED%86%B5%EC%8B%A0-%EA%B5%AC%ED%98%84/
(12) http://www.secmem.org/blog/2019/08/17/websocket-socketio/
(13) https://itnext.io/differences-between-websockets-and-socket-io-a9e5fa29d3dc
(14)

post-custom-banner

0개의 댓글