[클론코딩/Zoom] 03 실시간 채팅

[gyun님]

[클론코딩/Zoom] 03 실시간 채팅

HTTP vs WebSocket
HTTP
stateless: 백엔드가 유저를 기억하지 못한다. -> 유저와 백엔드 사이에 아무런 연결이 없다. -> 요청과 응답 과정 뒤에 백엔드는 유저를 잊어버림
실시간으로 일어나지 않음
WebSocket
브라우저가 웹소켓 요청을 보내면 서버가 받거나 거절
핸드쉐이크가 성립되면 연결 완료
연결되어 있기 때문에 서버는 유저가 누구인지 기억할 수 있음
서버가 유저에게 메세지 보낼 수 있음, request를 기다릴필요없음
Node JS로 웹 소켓 서버 만들기
ws: 웹 소켓 프로토콜을 실행하는 패키지
https://www.npmjs.com/package/ws
ws 서버는 만들지 않고, express서버를 놓고 함께 합친다.
현재는 express 방식이고 ws 지원 안

함
http서버 , websocket서버 둘 다 작동 가능, 2개가 같은 포트(3000)에 있길 원하기 때문에 이와 같이 작성 -> 필수 x
`Listening on http://localhost:3000`
`Listening on ws://localhost:3000`
// http서버 위에 websocket 서버를 만들 수 있도록
const server = http.createServer(app);
const wss = new WebSocket.Server({server})


웹 소켓 이벤트 다루기 = 프론트와 백엔드 메세지 주고받기 = 양방향 연결 만들기
https://developer.mozilla.org/ko/docs/Web/API/WebSocket/WebSocket

양방향 연결
브라우저의 연결이 끊기면 서버에 이벤트를 발생시키고
서버가 오프라인 되면 브라우저에게 알려줌
프론트엔드: app.js

setTimeout 10초 뒤에 서버에 메세지를 보낸다.

[클론코딩/Zoom] 03 실시간 채팅

[gyun님]

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default &

https://velog.io/@sugenius77/%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9Zoom-03