[SOCKET] 📚 WS 웹소켓 사용해보기

...

WS (Web Socket)

[WEB] 🌐 웹 소켓 (Socket) 역사부터 정리

웹 개발을 처음 배우기 시작했다면 서버와 클라이언트의 통신은 모두 HTTP 프로토콜만 이용해서 이루어진다고 생각할 수 있습니다. 하지만 웹 개발을 하면서 채팅, 게임, 주식 차트 등의 실시

inpa.tistory.com

웹 소켓은 실시간 양방향 데이터 전송을 위한 기술로서, ws 프로토콜 사용하여 통신한다.
최신 브라우저는 대부분 웹 소켓을 지원하며, 노드는 ws나 Socket.IO같은 패키지를 통해 웹 소켓 사용 가능하다.

웹 소켓 이전에는 폴링이라는 방식을 사용했었다.
HTTP가 클라이언트에서 서버로만 요청이 가기 때문에 주기적으로 서버에 요청을 보내 업데이트가 있는지 확인했었다.

하지만 이렇게 할 경우 서버에 부담이 되기 때문에, Server Sent Event라는 기술이 나왔는데

따로 클라이언트에서 요청 없이, 서버가 주체적으로 클라이언트에게 데이터를 전송할 수 있게 하는 기술이다.

하지만 이 기술은, 마치 라디오 처럼 클라이언트는 데이터를 서버로 보낼수는 없고 받기만 할 수 있기 때문에 채팅방 같은 양방향 통신을 구현하기에는 한계가 있었다.

[NODE] 📚 Server Sent Events 💯 정리 (+사용법)

SSE - Server Sent Events 란? SSE는 서버의 데이터를 실시간으로, 지속적으로 Streaming 하는 기술 이다. SSE는 웹 표준으로써 IE를 제외한 모든 브라우저에서 지원되며, IE역시 polyfill을 통해 지원이 가능하.

inpa.tistory.com

반면, 웹 소켓은 이벤트 방식으로 동작하여 연결도 한 번만 맺으면 되고, HTTP와 포트 공유도 가능하며, 성능도 매우 좋아 서버와 통신할 상황이 생긴다면 모두 이 기술을 사용하는 편이다.

웹소켓(WS) 프로젝트 구조

package.json

{
   "name": "nodechat",
   "version": "0.0.1",
   "description": "웹소켓 채팅방",
   "main": "app.js",
   "scripts": {
     "start": "nodemon app"
   },
   "author": "Inpa",
   "license": "ISC",
   "dependencies": {
     "cookie-parser": "^1.4.4",
     "dotenv": "^10.0.0",
     "express": "^4.17.1",
     "express-session": "^1.17.0",
     "morgan": "^1.9.1",
     "nunjucks": "^3.2.0",
     "ws": "^8.2.3"
   },
   "devDependencies": {
     "nodemon": "^2.0.2"
   }
 }

$ npm install

app.js

const express = require('express');
const path = require('path');
const morgan = require('morgan');
const cookieParser = require('cookie-parser');
const session = require('express-session');
const nunjucks = require('nunjucks');
const dotenv = require('dotenv');

dotenv.config();
const webSocket = require('./socket');
const indexRouter = require('./routes');

const app = express();
app.set('port', process.env.PORT || 8005);
app.set('view engine', 'njk');
nunjucks.configure('views', {
   express: app,
   watch: true,
});

app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser("123123"));
app.use(
   session({
      resave: false,
      saveUninitialized: false,
      secret: "123123",
      cookie: {
         httpOnly: true,
         secure: false,
      },
   }),
);

app.use('/', indexRouter);

app.use((req, res, next) => {
   const error = new Error(`${req.method} ${req.url} 라우터가 없습니다.`);
   error.status = 404;
   next(error);
});

app.use((err, req, res, next) => {
   res.locals.message = err.message;
   res.locals.error = process.env.NODE_ENV !== 'production' ? err : {};
   res.status(err.status || 500);
   res.render('error');
});

const server = app.listen(app.get('port'), () => {
   console.log(app.get('port'), '번 포트에서 대기중');
 });
 
 //? express 서버와 웹소켓 서버를 연결 시킨다.
 webSocket(server);

socket.js

const WebSocket = require('ws');

module.exports = server => {
   //? express 서버와 웹소켓 서버를 연결 시킨다.
   // 변수이름은 wss(web socket server)
   const wss = new WebSocket.Server({ server }); 

   //* 프론트에서 new WebSocket("ws://localhost:8005") 보냈을때, 웹소켓 연결 실행
   wss.on('connection', (ws, req) => {
      //* ip 파악
      // req.headers['x-forwarded-for'] : 프록시 서버를 경유할때 ip가 변조될수 있다. 이를 감지하고 본ip파악해줄 수 있다.
      const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
      console.log('새로운 클라이언트 접속 ip : ', ip);

      //* 클라이언트로부터 온 메시지
      ws.on('message', message => {
         console.log(message.toString());
      });

      //* 에러 시
      ws.on('error', error => {
         console.error(error);
      });

      //* 연결 종료 시 (유저가 채팅방을 나간다거나)
      ws.on('close', () => {
         console.log('클라이언트 접속 해제', ip);
         clearInterval(ws.interval); // 연결 끊기면 setInterval 중지
      });

      // 3초마다 클라이언트로 메시지 전송
      ws.interval = setInterval(() => {
         //! 웹소켓은 비동기이기 때문에 삑 날 수 있어, 웹소켓이 클라이언트랑 연결이 되었는지 검사하는 안전 장치
         if (ws.readyState !== ws.OPEN) {
            return;
         }

         ws.send('서버에서 클라이언트로 메시지를 보냅니다.');
      }, 3000);
   });
};

index.njk

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>노드 채팅방</title>
   </head>
   <body>
      <div>F12를 눌러 console 탭과 network 탭을 확인하세요.</div>

      <script>
         // websocket으로 서버와 http 포트 연결. http포트와 공유해서 통신할 수 있음
         // wesocket객체는 기본적으로 브라우저에서 지원
         const webSocket = new WebSocket("ws://localhost:8005");

         // 서버에서 wss.on('connection' 이 성공적으로 되면, 이벤트 실행
         webSocket.onopen = function () {
            console.log('서버와 웹소켓 연결 성공!');
         };

         // 사실상 .onmessage 와 .send 로 메세지 통신을 하게 되는 것이다
         webSocket.onmessage = function (event) {
            console.log(event.data);
            webSocket.send('클라이언트에서 서버로 답장을 보냅니다'); // 서버로부터 메세지 받으면 바로 서버로 메세지 보냄
         };
      </script>
   </body>
</html>