BaGyun
빠균's 개발노트
BaGyun
전체 방문자
오늘
어제
  • 분류 전체보기 (71)
    • Today I Learned (44)
      • 오류 (8)
      • JavaScript (15)
      • TypeScript (9)
      • NodeJS (0)
      • NestJS (0)
      • Database (3)
      • ORM (1)
      • 알고리즘 (2)
      • 개인공부 (4)
      • Deploy (0)
      • Git (1)
    • 개인프로젝트 (4)
    • 알고리즘 (14)
      • 프로그래머스 (14)
    • 면접질문 (5)
    • 회고 (3)

인기 글

반응형

블로그 메뉴

  • 홈
  • 태그
  • 방명록
hELLO · Designed By 정상우.
BaGyun

빠균's 개발노트

[개인프로젝트] WebSocket 실시간 채팅창 구현
개인프로젝트

[개인프로젝트] WebSocket 실시간 채팅창 구현

2022. 7. 9. 16:01

만들게 된 계기?

프로젝트 진행하면서 실시간 알람을 구현하려했으나, 실패했었다.

실패의 원인을 분석하기 위해 WebSocket에 대해 공부를 하면서 실시간 채팅창을 만들어봤다.

 

HTTP?

웹소켓을 이해하기 위해 http를 먼저 이해해야한다.

단방향 통신

인터넷 데이터 교환(업로드, 다운로드, 이미지, 문서 등등)을 http덕분에 소통할 수 있는 것 이다.

 

1.브라우저는 서버에게 http request(요청)을 보낸다.

2.브라우저의 요청을 확인한 서버는 http response를 돌려 보내준다.

위와 같은 과정이 끝나게되면 브라우저-서버간의 통신은 끝나게 된다.

이러한 특징을 단방향 통신이라한다.

 

여기서 핵심은 서버가 브라우저에게 데이터를 보낼 수 있는건,

브라우저가 요청을 했을 때 뿐이다. 무조건 1번의 과정이 있어야한다

 

만약 http를 이용하여 실시간 채팅을 구현하기 위해선 새로운 메시지가 왔는지

새로고침을 지속적 해달라는 요청을 보내야 하는 것!

 

그래서 생겨난게 Websocket이다.

Websocket?

웹 소켓 프로토콜은 http와 달리

Request-Respone의 형식이 아닌 Open-Close의 형식이다.

 

양방향 통신

이처럼, OPEN인 상태에선 브라우저, 서버가 둘다 메시지를 보내고 받을 수 있다.

그래서 서버는 요청을 기다릴 필요 없이 원하는 때에 보내줄 수 있다.

이러한 특징을 양방향 통신이라한다.

 

웹 소켓은 위와 같은 특징을 이용하여 대화창, 주식어플, 게임 등등을 만들 수 있다.

 

실패했던 원인?

프로젝트 진행할 땐, 급하게 공부한다고 놓친부분이 많았던거 같다.

그 때 당시 내가 생각했던건,

웹소켓에 서버의 엔드포인트를 넣어 엔드포인트가 실행 시 알람을 만들어줘!

라는 방식으로 접근을 하려했으나,

엔드포인트를 잡는 방식이 아닌 직접적인 양방향 통신으로 만들어야 한다는 것을 놓쳤던거 같다.

 

 

GitHub - BaGyun0107/Socket

Contribute to BaGyun0107/Socket development by creating an account on GitHub.

github.com

 

 

'개인프로젝트' 카테고리의 다른 글

[개인프로젝트] Nostanding 팀프로젝트 typescript로 리빌딩 - 6~8일차  (0) 2022.08.23
[개인프로젝트] Nostanding 팀프로젝트 typescript로 리빌딩 - 2~5일차  (0) 2022.08.18
[개인프로젝트] Nostanding 팀프로젝트 typescript로 리빌딩 - 1일차  (0) 2022.08.05
    '개인프로젝트' 카테고리의 다른 글
    • [개인프로젝트] Nostanding 팀프로젝트 typescript로 리빌딩 - 6~8일차
    • [개인프로젝트] Nostanding 팀프로젝트 typescript로 리빌딩 - 2~5일차
    • [개인프로젝트] Nostanding 팀프로젝트 typescript로 리빌딩 - 1일차
    BaGyun
    BaGyun

    티스토리툴바