[WebSocket] Nomad Coders 줌 클론코딩 #1.5

Connect WebSocket

HTTP vs WebSocket

http

• request / response 구조.
• request를 해야지만 response를 받을 수 있음.
• 서버가 먼저 response를 보낼 순 없음.
• 서버는 유저를 기억할 수 없음.
• request로 쿠키를 보내야 유저가 누구인 지 알 수 있음.
• stateless
  

WebSocket

• 유저가 request를 하면 서버가 accept 또는 deny 할 수 있음.
• 한 번 accept되면(connection 된 상태) 서버가 유저에게 메세지를 보낼 수도 있고 유저도 서버에게 메세지를 보낼 수 있음.
• 서버는 request를 기다리지 않음.
• 한 번 연결되면 서버는 유저를 기억함.
• 서로에게 직접 접근이 가능
• 브라우저와 backend 사이 / backend와 backend 사이에서 발생 할 수 있음.
• bi-directional(양뱡향) 연결

WebSocket 설치

npm i ws

명령어로 설치한다.
express는 http를 다루기 때문에 ws과는 다른 protocol이다.
같은 서버에 ws 기능을 합쳐야하는데, Node.js에 내장되어있는 http package를 사용해서 합칠 수 있다.

WebSocket 서버와 http 서버 합치기

import http from "http";

import WebSocket from "ws";

const server = http.createServer(app);

http서버에 access

const wss = new WebSocket.Server({ server });

http서버 위에 WebSocket 서버 만들기

localhost가 동일한 포트에서 http, ws request 두 개를 다 처리할 수 있다.

FrontEnd와 BackEnd 연결하기

frontend에서 backend로 연결하는 방법은 아래 코드를 사용하는 것임.

👉참고

const socket = new WebSocket("ws://localhost:3003");

이렇게 하면 작동하기는 함.
하지만 나중에 핸드폰에서 보면 작동안함.
당연히 폰은 localhost:3003이 존재하지 않기 때문.
브라우저가 스스로 주소를 가져오도록 해야 함.

window.location 사용

const  socket  =  new  WebSocket(`ws://${window.location.host}`);

이렇게 연결해주고 server.js에서 아래 코드를 입력해서 실행시키면 콘솔에서 WebSocket을 확인할 수 있다.

wss.on("connection", (socket) => {
  console.log(socket);
});

.on(“event”, function)

js의 function과 eventListener처럼 WebSocket도 listen할 수 있는 특정한 event명이 있다. close, connection, error, header, listening 이벤트가 있다. connection은 누군가 우리와 연결됐다는 것이다. 이 method의 설명을 보면 callback으로 socket을 받는다고 한다.

wss.on("connection", (socket) => {
  socket.send("hello!");
});

server.js에서 익명함수로 메세지 보냄.

app.js에서 받음.

🚫오류🚫

콘솔에 “hello from the browser!”가 출력되어야 하는데 이상한 숫자들이 나옴.

🆗해결🆗

toString("utf-8") 으로 해결