[WebSocket]Express 서버에 WS 합치기, 프론트와 데이터 공유하기

WS는 WebSocket을 사용하기 위한 npm 패키지로, 노드에서 핵심적이다!!

그런데 WebSocket은 http와 다른 프로토콜이므로, 

1. npm i ws

2. express를 이용해 http 서버를 만든 후 해당 서버를 WebSocket 서버에 넣어주면 끝~~

const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
server.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

 

 

ws가 http와 다른 점이 있다면 아무래도 서버로부터 정보를 얻기 위해 매번 request를 넣을 필요가 없다는 것이다.

그러므로 문법도 http와 약간 다르다.

app.get('/*', (req, res) => res.redirect('/'));

이게 http에서 요청하고 응답받는 방식이라면, WebSocket은 이벤트를 처리하는 함수와 비슷한 문법을 사용한다.

 

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

이렇게!

이렇게 보내면 프론트단에서 받아야겠지?

const socket = new WebSocket(`ws://${window.location.host}`);
socket.addEventListener('message', (message) => {
  console.log('Just got this: ', message, 'from the server');
});

프론트에서는 이런 식으로 소켓을 정의해서 받으면 된다.