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

HTTP vs WebSocket

1. HTTP

• stateless: 백엔드가 유저를 기억하지 못한다. -> 유저와 백엔드 사이에 아무런 연결이 없다. -> 요청과 응답 과정 뒤에 백엔드는 유저를 잊어버림
• 실시간으로 일어나지 않음

2. 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초 뒤에 서버에 메세지를 보낸다.

백엔드: server.js

• connection 이벤트가 발생하면 socket에서 누가 연결했는지 알 수 있음
• socket이 connection을 close 시키면 Disconneted~~
  close: 브라우저의 탭을 닫거나, 컴퓨터가 잠자기 모드에 들어가면!
• message 받은 메세지를 콘솔에 찍어주고,
• send 브라우저에 전송 'hello`

서버 간 익명 채팅

• 사파리가 메세지를 서버에게 보내고, 서버는 메세지를 크롬에게 보낸다.

프론트엔드: app.js

백엔드: server.js

home.pug

결과

닉네임 채팅

• 메세지에 타입과 메세지로 나눠서 저장
• 프로그래밍 언어에 의존하면 안된다.
  ex) 백엔드로 javascript object를 보내는 것은 좋지 않다. 왜냐하면 연결하고 싶은 프론트엔드와 백엔드 서버가 자바스크립트 서버가 아니고, 자바 또는 go서버일 수도있음
• 자바스크립트 object와 string

socket.on("message", (message) => {
    const parsed = JSON.parse(message);
    console.log(parsed, message.toString());
    sockets.forEach((aSocket) => aSocket.send(message.toString()));
  });

app.js

server.js

home.pug