2022.01.22

한 일

• Polling, Long-Polling, WebSocket 공부
  • Polling, Long-Polling, WebSocket 각각을 사용해 실시간 채팅 구현
• requestAnimationFrame에 대한 토막지식
• socket.io 에서 room에 브로드캐스트 하는 기능 어떻게 구현했는지 살펴보기

배운 것

• Polling
  • 주기적으로 요청해 상태 변경이 있는지 확인하는 방법
  • 불필요한 트래픽이 발생할 수 있음
    • 상태 변경 유무와 관계 없이 주기적으로 요청을 하기 때문
  • 주기를 짧게하면 서버 부담이 커지고 길게하면 실시간성이 떨어짐
• Long-Polling
  • 요청에 대한 응답을 상태 변경이 있을 때 받는 방법
    • 변경이 없다면 변경이 생길때까지 응답 대기함
  • 실시간성이 중요하지만 서버의 상태 변경이 적은 서비스에 적합
  • Polling에 비해 불필요한 트래픽을 덜 유발함
    • 변경이 있을 때만 응답하므로
      • 보통 무한정 대기하지 않고 일정 시간 이후 서버측에서 타임아웃 시켜 재요청 하도록 함
  • 변경 발생시 응답을 받고 즉시 요청을 하므로 요청이 특정 시점에 쏠림
    • 1000명 있는 채팅방에 메시지 하나 날리면 응답 1000개 우르르 받고 바로 요청 1000개 우르르...
  • 변경이 자주 발생하면 Polling보다 더 요청 많이 할 수도 있음
• WebSocket
  • HTTP를 통해 HandShake 하고 나서는 TCP 연결을 유지하고 양방향 실시간 통신 가능
  • Plain Text와 Binary 데이터만 전송 가능하기 때문에 Sub-Protocol 필요
    • 어떻게 데이터를 해석할 것인지
    • HandShake 과정에서 어떤 Sub-Protocol 쓸 것인지(수 있는지) 주고 받음
  • 연결 유지를 위한 비용이 발생
    • 연결 상태를 메모리에 저장하고 있어야 함
    • TCP 포트 하나를 지속 점유
• requestAnimationFrame
  • 화면 변경 없어도 화면 갱신 트리거 됨
  • console.log만 찍어도 Composite Layers 수행되는 것을 확인 가능
  • 용도에 맞게 화면 변경 필요할때(애니메이션)만 쓰자...
• Object.fromEntries()
  • key-value 쌍 리스트를 객체로 바꿔줌

충격.. setTimeout와 requestAnimationFrame에 이런 차이가 있었어!? - YouTube

socket.io-adapter/index.ts at master · socketio/socket.io-adapter (github.com)

GitHub - socketio/socket.io-adapter

Object.fromEntries() - JavaScript | MDN (mozilla.org)

Object.fromEntries() - JavaScript | MDN

느낀 것

• 개념만 알고 있었는데 실제 구현하고 개발자 도구로 통신하는거 보니까 재밋다!
  • 사실 개념도 애매하게 알고 있었다 ㅎ
  • 그래서 면접에서 털림 ㅠ
• socket.io 쓰기 전에 미리 해봤으면 좋았을껄... ㅋㅋ
• 내일 코드랑 같이 좀 더 자세히 정리해야겠다!
• Socket.io의 ROOM 기능을 ws 모듈로 구현하려면 어떻게 해야할까?
  • 각 ROOM에 들어있는 클라이언트 소켓 객체들을 갖고 있는 배열을 값으로하는 딕셔너리 만듦
  • 브로드캐스팅시 해당 ROOM 배열 순회하며 메시지 전송!
  • 요렇게 면접때 말했는데 이러면 클라이언트 많아지면 맨앞과 맨뒤 클라이언트 사이 시간차가 너무 커지지 않을까요? 하셨다.
  • HTTP 2.0처럼 조각조각 프레임단위로 쪼개서 멀티플렉싱 하면?
    • ROOM에 브로드캐스팅 하는건 모두 같은 사이즈 데이터 보내는건데 의미가 있나?
    • 순서에 따른 갭은 줄겠지만 대기시간 총합은 오히려 늘어나는게 아닌가?
    • 앞에서 뭔가 큰게 막고 있는 상황이라면 좋겠지만 이 경우엔 아닌거 같음...
    • 으악 모르겠다!