일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 환경설정
- useEffect
- Custom Hook
- eslint
- useMemo
- Hook
- python
- Permutations
- pjax
- React.memo
- VanillaJS
- webpack
- VanillJS
- useState
- BFS
- 그리디
- seo
- useCallback
- venv
- 완전탐색
- 코딩테스트
- 프로그래머스
- react
- web
- await
- prettier
- 비동기
- canvas
- react internals
- 코테
- Today
- Total
Amada Coding Club
[WebSocket] 웹소켓에 대해 알아보자 본문
그분과 함께하는 차빼주세요나 이번 졸업 프로젝트나 기능에 채팅 기능이 들어간다.
그래서 채팅 기능을 연습하려고 리액트 채팅 구현을 찾아보니 웹소켓을 이용해서 채팅 기능을 구현한다고 나와있었다.
웹소켓이란 무엇일까?
https://choseongho93.tistory.com/266
이분의 내용을 참고했다.
우리가 인터넷에서 HTTP를 이용해서 서버에 데이터를 가지고 오기 위해선 요청을 통해 데이터를 받아야 했다.
일반적인 상황에선 상관 없겠지만, 실시간으로 데이터를 업데이트 해야 하는 상황에서는 계속 서버에 데이터를 요청해야 하기 때문에 번거롭고 자원 낭비가 발생할 수 있다. 이 문제를 해결하기 위해 웹소켓이 탄생했다.
웹소켓은 HTML5 버전에 출시된 기술로 HTTP와 같은 프로토콜의 일종이다.
Transport Protocol의 일종으로 서버와 클라이언트 간의 양방향 소통을 효율적으로 지원하는 구조이다.
웹소켓을 통해 브라우저는 서버가 직접 보내는 데이터를 받아들일 수 있고 사용자가 다른 웹사이트로 이동하거나 새로고침 하지 않더라도(요청을 하지 않더라도) 최신 데이터를 받을 수 있게 도와준다.
즉, 채팅, 게임과 같이 실시간 양방향 소통이 이루어지는 환경을 효과적으로 구현할 수 있다.
웹소켓은 어떻게 작동할까?
우선 서버와 클라이언트간의 웹소켓 연결은 HTTP를 통해 이루어진다
웹소켓 연결이 잘 이루어졌다면 일정 시간이 지나 HTTP연결은 자동으로 끊어지고 서버와 클라이언트 간의 웹소켓(TCP기반)연결이 이루어진다.
웹소켓은 아주 간단한 기능만을 제공해주기 때문에 대부분 socket.io와 같은 오픈 소스 라이브러리를 많이 사용하고
메시지 포맷도 STOMP와 같은 프로토콜을 통해 이용한다
다음에 socket.io를 이용한 간단한 리액트 채팅방 구현을 해보겠다.
문제점은?
문제점으론 구현이 복잡해지고 트래픽에 과부하가 일어나고 HTML5이기 때문에 오래된 브라우저에선 지원하지 않는다는 단점이 있다. 그런데 실시간을 구현하는데 구현이 복잡해지고 과부하 문제는 필연적이라고 생각한다.
'Front-End > React' 카테고리의 다른 글
[React Hook] 리액트 Hook 총정리(3) - useEffect (0) | 2023.01.20 |
---|---|
[React Hook] 리액트 Hook 총정리(2) - useState (0) | 2023.01.20 |
[React Hook] 리액트 Hook 총정리(1) - Hook이란? (0) | 2023.01.17 |
[React-Dropzone] TypeScript 사용시 acceptedFiles 에서 발생하는 오류 관련 및 해결 (0) | 2023.01.08 |
리액트 오류 (0) | 2022.11.18 |