Section 4
강의내용
- 실시간 채팅 및 각종 Front-end 기술배우기
- Socket.io란?
└ 웹 클라이언트와 서버간 실시간으로 양방향 통신을 해주는 node.js모듈
└ tcp 기반의 일종의 프로토콜
■ WebSocket
HTML5 웹 표준 기술
매우 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용함
이벤트를 단순히 듣고, 보내는 것만 가능함
■ Socket.io
표준 기술이 아니며, 라이브러리임
소켓 연결 실패 시 fallback을 통해 다른 방식으로 알아서 해당 클라이언트와 연결을 시도함
방 개념을 이용해 일부 클라이언트에게만 데이터를 전송하는 브로드캐스팅이 가능함
-
Polling
클라이언트에서 주기적으로 서버에 데이터를 요청하는 것.
주기적으로 데이터를 보내지만 과도한 요청시 문제가 될 수 있음. -
long-polling
클라이언트에서 요청을 보내면 서버에서는 이벤트가 발생했을 때 응답을 보낸다.
polling 방식보다 불필요한 요청이 덜 발생하게 되지만,
long-polling 방식에서도 클라이언트가 서버 응답을 무한정 기다리지는 않는다. 일정 시간이 지나면 새로운 요청을 보내는 방식이다. -
web sockets
클라이언트가 요청을 최초 한 번만 보낸다
재요청을 보내지 않아서 오버헤드가 적고 효율적일 수 있지만
필요 이상으로 연결을 오래 유지할 경우 서버 CPU에 부담이 되는 등의 단점이 발생할 수 있다
// 해당 이벤트를 받고 콜백함수를 실행
socket.on('받을 이벤트 명', (msg) => {
})
// 이벤트 명을 지정하고 메세지를 보낸다.
socket.emit('전송할 이벤트 명', msg)
// disconnect 소켓 연결 종료함수소켓을 사용할때는 on / off로 이벤트 리스너를 정리해준다.
const socket = io.connect(${url}/ws-${workspace},
transport = ['websocket']
);
>> 폴링하지 않고 websocket만 쓸때 transport option을 준다.■ 날짜 관련 js library
1) moment
url : https://momentjs.com/
2) dayjs
url : https://day.js.org/
3) date-fns (lodash같은 형태)
url : https://date-fns.org/
참고 : https://jsikim1.tistory.com/197
■ metion 관련 js library
1) react mentions
url : https://www.npmjs.com/package/react-mentions
option에 따라 멘션기능 활용할 수 있다.
[tip] javascript 함수
1) reverse => 기존배열의 순서를 변경할 수 있는 함수
ex) data.reverse()
단 불변성(immutation)이 유지되지 못하는 문제로 새로운 배열을 만들어 사용한다.
[].concat(...data).reverse()
[...data].reverse()
2) 객체를 반복문 돌때
object.entries. map
■ forwardRef
https://ko.reactjs.org/docs/forwarding-refs.html
