[노드 2팀] #12. 웹 소켓으로 실시간 데이터 전송하기

24-25/Node.js 2

by sksmsyena 2025. 1. 17. 10:00

728x90

🌟키워드: 웹 소켓, WS 프로토콜, Socket.IO, 미들웨어, 컨트롤러

1. 웹 소켓 이해하기

1. 웹 소켓
- 양방향 데이터 전송을 위한 기술이다.
- WS 프로토콜을 사용한다.

※ 서버센트 이벤트(Server Sent Events): Event Source 객체를 사용해 처음에 한 번만 연결하면 서버가 클라이언트에 지속적으로 데이터를 보낸다. 즉, 서버에서 클라이언트로 데이터를 보내는 단반향 통신

2. ws 모듈로 웹 소켓 사용하기

위와 같은 디렉터리 구조로 프로젝트와 파일을 작성한다.
- 패키지를 설치하고 .env, app.js, routes/index.js, package.json 파일을 작성한다.
- 그 후 ws 모듈을 설치해 노드에 웹 소켓을 구현한다. (npm i ws@8)
- 웹 소켓을 익스프레스 서버에 연결한다.
- socket.js 파일을 작성하고 ws 모듈을 불러와 익스프레스 서버를 웹 소켓 서버와 연결한다.

- 연결 후 웹 소켓 서버(wss)에 이벤트 리스너를 붙인다. (웹 소켓은 이벤트 기반으로 작동)
- 익스프레스 서버와 연결한 후, 웹 소켓 객체(ws)에 이벤트 리스너 세 개를 연결한다.

//socket.js
const WebSocket = require('ws');

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

  wss.on('connection', (ws, req) => { // 웹소켓 연결 시
    const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress;
    console.log('새로운 클라이언트 접속', 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);
    });

    ws.interval = setInterval(() => { // 3초마다 클라이언트로 메시지 전송
      if (ws.readyState === ws.OPEN) {
        ws.send('서버에서 클라이언트로 메시지를 보냅니다.');
      }
    }, 3000);
  });
};

- readyState 상태 4가지: CONNECTING(연결 중), OPEN(열림), CLOSING(닫는 중), CLOSED(닫힘)
- OPEN일 때 에러 없이 ws.send 메서드로 하나의 클라이언트에 메시지를 보낸다.
- CLOSED 이벤트에서 setInterval을 clearInterval로 정리해야한다. (이 부분이 없다면 메모리 누수가 발생함)

- 웹 소켓은 양방향 통신이기 때문에 html 파일을 작성해야 한다.

//views/index.js
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>GIF 채팅방</title>
</head>
<body>
<div>F12를 눌러 console 탭과 network 탭을 확인하세요.</div>
<script>
  const webSocket = new WebSocket("ws://localhost:8005");
  webSocket.onopen = function () {
    console.log('서버와 웹소켓 연결 성공!');
  };
  webSocket.onmessage = function (event) {
    console.log(event.data);
    webSocket.send('클라이언트에서 서버로 답장을 보냅니다');
  };
</script>
</body>
</html>

- WebSocket 생성자에 연결할 서버 주소를 넣고 webSocket 객체를 생성한다. (클라이언트도 이벤트 기반으로 동작)
- 개발자 도구(F12)를 켜 Network 탭에 들어가면 웹 소켓을 알 수 있다.

3. Socket.IO 사용하기

구현하려는 서비스가 복잡해진다면 ws 패키지가 아닌 Socket.IO를 사용하는 것이 편하다. (편의 긴응이 많이 추가되어 있음)
- Socket.IO 설치
$ npm i socket.io@4

//socket.js
const SocketIO = require('socket.io');

module.exports = (server) => {
  const io = SocketIO(server, { path: '/socket.io' });

  io.on('connection', (socket) => { // 웹소켓 연결 시
    const req = socket.request;
    const ip = req.headers['x-forwarded-for'] || req.socket.remoteAddress;
    console.log('새로운 클라이언트 접속!', ip, socket.id, req.ip);
    socket.on('disconnect', () => { // 연결 종료 시
      console.log('클라이언트 접속 해제', ip, socket.id);
      clearInterval(socket.interval);
    });
    socket.on('error', (error) => { // 에러 시
      console.error(error);
    });
    socket.on('reply', (data) => { // 클라이언트로부터 메시지
      console.log(data);
    });
    socket.interval = setInterval(() => { // 3초마다 클라이언트로 메시지 전송
      socket.emit('news', 'Hello Socket.IO');
    }, 3000);
  });
};

- socket.io 패키지를 불러와서 익스프레스 서버와 연결한다.
- 연결 후 이벤트 리스너를 붙인다. (connection 이벤트는 클라이언트가 접속했을 때 발생하고, 콜백으로 소켓 객체를 제공)
- socket에도 이벤트 리스너를 붙인다. (disconnect는 클라이언트가 연결을 끊었을 때 발생하고, error는 통신 과정 중에 에러가 나왔을 때 발생함)
※ ws모듈과 다른점: 이벤트 명을 사용한다. (reply라는 이벤트명으로 클라이언트에서 데이터를 보낼 때 서버에서 받는 부분)

//views/index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>GIF 채팅방</title>
</head>
<body>
<div>F12를 눌러 console 탭과 network 탭을 확인하세요.</div>
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io.connect('http://localhost:8005', {
    path: '/socket.io',
    transports: ['websocket'],
  });
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('reply', 'Hello Node.JS');
  });
</script>
</body>
</html>

-> Socket.IO에 맞게 클라이언트 부분도 바꿔준다.
- /socket.io/socket.io.js는 Socket.IO에서 클라이언트로 제공하는 스크립트이다. (실제 파일이 아님)
->이 스크립트를 통해 서버와 유사한 API로 웹 소켓 통신이 가능하다.
※ ws모듈과 다른점: ws 프로토콜이 아니라 http 프로토콜을 사용하는 점이 다르다.

-> Socket.IO는 먼저 폴링 방식으로 서버와 연결한다. (HTTP 프로토콜 사용)
※ 웹 소켓을 지원하는 브라우저는 웹 소켓 방식으로, 지원하지 않는 브라우저는 폴링 방식으로 사용 가능하다.

4. 실시간 GIF 채팅방 만들기

- 사람들이 익명으로 생성한고 자유롭게 참여하며 GIF 파일을 올릴 수 있는 채팅방 만들기.
- 몽고디비와 몽고디비 ODM인 몽구스를 사용한다. ($ npm i mongoose multer color-hash@2)
- 채팅방 스키마, 채팅 스키마를 작성한다.

//schemas/index.js
const mongoose = require('mongoose');

const { MONGO_ID, MONGO_PASSWORD, NODE_ENV } = process.env;
const MONGO_URL = `mongodb://${MONGO_ID}:${MONGO_PASSWORD}@localhost:27017/admin`;

const connect = () => {
  if (NODE_ENV !== 'production') {
    mongoose.set('debug', true);
  }
  mongoose.connect(MONGO_URL, {
    dbName: 'gifchat',
    useNewUrlParser: true,
  }).then(() => {
    console.log("몽고디비 연결 성공");
  }).catch((err) => {
    console.error("몽고디비 연결 에러", err);
  });
};

mongoose.connection.on('error', (error) => {
  console.error('몽고디비 연결 에러', error);
});
mongoose.connection.on('disconnected', () => {
  console.error('몽고디비 연결이 끊겼습니다. 연결을 재시도합니다.');
  connect();
});

module.exports = connect;

-> 몽고디비와 연결하는 코드를 작성한다.

//app.js
...
dotenv.config();
const webSocket = require('./socket');
const indexRouter = require('./routes');
const connect = require('./schemas');

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

-> 서버를 실행할 때 몽고디비에 바로 접속할 수 있도록 서버와 몽구를 연결한다.
- 그 후 화면의 레이아웃을 담당하는 파일 들을 html로 작성하고 main.css도 추가해준다.

- 채팅 메시지는 내 메시지(mine), 시스템 메시지(system), 남의 메시지(other)로 구분한다.
- 스크립트 부분은 socket.io 연결 부분, socket.io 이벤트 리스너, 폼 전송 부분으로 구분된다.

//app.js
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(process.env.COOKIE_SECRET));
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
}));

app.use((req, res, next) => {
  if (!req.session.color) {
    const colorHash = new ColorHash();
    req.session.color = colorHash.hex(req.sessionID);
    console.log(req.session.color, req.sessionID);
  }
  next();
});

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'), '번 포트에서 대기중');
});

webSocket(server, app);

-> 세션 아이디(req.sessionID)를 사용하고, 자신과 남을 구별하기 위해 color-hash 패키지를 사용한다.

//socket.js
const SocketIO = require('socket.io');

module.exports = (server, app) => {
  const io = SocketIO(server, { path: '/socket.io' });
  app.set('io', io);                                      ---1
  const room = io.of('/room');                           ----2
  const chat = io.of('/chat');

  room.on('connection', (socket) => {					 ----3
    console.log('room 네임스페이스에 접속');
    socket.on('disconnect', () => {
      console.log('room 네임스페이스 접속 해제');
    });
  });

  chat.on('connection', (socket) => {					----4
    console.log('chat 네임스페이스에 접속');

    socket.on('join', (data) => { // data는 브라우저에서 보낸 방 아이디
      socket.join(data); // 네임스페이스 아래 존재하는 방에 접속
    });

    socket.on('disconnect', () => {
      console.log('chat 네임스페이스 접속 해제');
    });
  });
};

-> 서버의 socket.js에 웹 소켓 이벤트를 연결한다.
-> app.set('io',io)로 라우터에서 io 객체를 쓸 수 있게 저장해 둔다. req.app.get('io')로 접근이 가능하다.
-> Socket.IO에 네임스페이스를 부여하는 of 메서드를 사용한다. (같은 네임스페이스끼리만 데이터를 전달하게 함)
-> /room 네임스페이스에 이벤트 리스너를 붙여준다. io와 마찬가지로 네임스페이스 연결 시 발생하는 connection과 해제 시 발생하는 disconnect 이벤트가 있다.(3)
-> /chat 네임스페이스에 붙인 이벤트 리스너는 Socket.IO에서 제공하는 이벤트가 아니라 사용자가 직접 만든 이벤트이다.(4)

- Socket.IO에는 네임스페이스보다 더 세부적인 개념인 '방(room)'이 있다.
- 같은 방에 들어 있는 소켓끼리만 데이터를 주고받을 수 있다.
ex) socket.emit('join', 방아이디)를 호출하면 socket.js의 join 이벤트에서 data 매개변수로 방 아이디를 전달받아 방에 접속할 것이다. 연결이 끊기면 (disconnect 이벤트) 자동으로 방에서 나간다.

//controllers/index.js
const Room = require('../schemas/room');
const Chat = require('../schemas/chat');

exports.renderMain = async (req, res, next) => {
  try {
    const rooms = await Room.find({});
    res.render('main', { rooms, title: 'GIF 채팅방' });
  } catch (error) {
    console.error(error);
    next(error);
  }
};

exports.renderRoom = (req, res) => {				---1
  res.render('room', { title: 'GIF 채팅방 생성' });
};

exports.createRoom = async (req, res, next) => {
  try {
    const newRoom = await Room.create({
      title: req.body.title,
      max: req.body.max,
      owner: req.session.color,
      password: req.body.password,
    });
    const io = req.app.get('io');
    io.of('/room').emit('newRoom', newRoom);
    if (req.body.password) { // 비밀번호가 있는 방이면
      res.redirect(`/room/${newRoom._id}?password=${req.body.password}`);
    } else {
      res.redirect(`/room/${newRoom._id}`);
    }
  } catch (error) {
    console.error(error);
    next(error);
  }
};

exports.enterRoom = async (req, res, next) => {				---2
  try {
    const room = await Room.findOne({ _id: req.params.id });
    if (!room) {
      return res.redirect('/?error=존재하지 않는 방입니다.');
    }
    if (room.password && room.password !== req.query.password) {
      return res.redirect('/?error=비밀번호가 틀렸습니다.');
    }
    const io = req.app.get('io');
    const { rooms } = io.of('/chat').adapter;
    console.log(rooms, rooms.get(req.params.id), rooms.get(req.params.id));
    if (room.max <= rooms.get(req.params.id)?.size) {
      return res.redirect('/?error=허용 인원이 초과하였습니다.');
    }
    return res.render('chat', {
      room,
      title: room.title,
      chats: [],
      user: req.session.color,
    });
  } catch (error) {
    console.error(error);
    return next(error);
  }
};

exports.removeRoom = async (req, res, next) => {			---3
  try {
    await Room.deleteOne({ _id: req.params.id });
    await Chat.deleteMany({ room: req.params.id });
    res.send('ok');
  } catch (error) {
    console.error(error);
    next(error);
  }
};

- 컨트롤러에서는 몽고디비와 웹 소켓 모두에 접근할 수 있다.
-> createRoom 컨트롤러는 채팅방을 만드는 컨트롤러이다. (1)
-> enterRoom 컨트롤러는 채팅방에 접속해 채팅방 화면을 렌더링하는 컨트롤러이다. 렌더링 전에 방이 존재하는지, 비밀방일 경우에는 비밀번호가 맞는지, 허용 인원을 초과하지는 않았는지 검사한다. (2)
-> removeRoom 컨트롤러는 채팅방을 삭제하는 컨트롤러이다. 채팅방과 채팅 내역을 함께 삭제한다. (3)

※ gif-chat 서버를 시작하기 전에 몽고디비를 먼저 실행해야 한다.
- http://localhost:8005 에 접속하면 실행되는 화면

5. 미들웨어와 소켓 연결하기

- 사용자의 이름을 채팅방에 표시하고, '~님이 입장하셨습니다' 같은 메시지를 보내기

//app.js
...
connect();

const sessionMiddleware = session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  cookie: {
    httpOnly: true,
    secure: false,
  },
});
...
app.use(cookieParser(process.env.COOKIE_SECRET));
app.use(sessionMiddleware);
...

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

webSocket(server, app, sessionMiddleware);

-> app.js와 socket.js 간에 express-session 미들웨어를 공유하기 위해 변수로 분리한다.

//socket.js
const SocketIO = require('socket.io');
const { removeRoom } = require('./services');

module.exports = (server, app, sessionMiddleware) => {
  const io = SocketIO(server, { path: '/socket.io' });
  app.set('io', io);
  const room = io.of('/room');
  const chat = io.of('/chat');

  const wrap = middleware => (socket, next) => middleware(socket.request, {}, next); --1
  chat.use(wrap(sessionMiddleware));

  room.on('connection', (socket) => {
    console.log('room 네임스페이스에 접속');
    socket.on('disconnect', () => {
      console.log('room 네임스페이스 접속 해제');
    });
  });

  chat.on('connection', (socket) => {				---2
    console.log('chat 네임스페이스에 접속');

    socket.on('join', (data) => {
      socket.join(data);
      socket.to(data).emit('join', {
        user: 'system',
        chat: `${socket.request.session.color}님이 입장하셨습니다.`,
      });
    });

    socket.on('disconnect', async () => {				---3
      console.log('chat 네임스페이스 접속 해제');
      const { referer } = socket.request.headers; // 브라우저 주소가 들어있음
      const roomId = new URL(referer).pathname.split('/').at(-1);
      const currentRoom = chat.adapter.rooms.get(roomId);
      const userCount = currentRoom?.size || 0;
      if (userCount === 0) { // 유저가 0명이면 방 삭제
        await removeRoom(roomId); // 컨트롤러 대신 서비스를 사용
        room.emit('removeRoom', roomId);
        console.log('방 제거 요청 성공');
      } else {
        socket.to(roomId).emit('exit', {
          user: 'system',
          chat: `${socket.request.session.color}님이 퇴장하셨습니다.`,
        });
      }
    });
  });
};

-> chat.use 메서드에 미들웨어를 장착할 수 있다. 이 미들웨어는 chat 네임스페이스에 웹 소켓이 연결될 때마다 실행된다.
wrap 함수는 미들웨어에 익스프레스처럼 req, res, next를 제공해주는 함수이다. (1)
-> socket.to (방 아이디) 메서드로 특정 방에 데이터를 보낼 수 있다. 방에 참여할 때 방에 누군가 입장했다는 시스템 메시지를 보낸다. (2)
-> 접속 해제 시에는 현재 방의 사람 수에 따라 동작이 달라진다. socket.request.headers.referer에 브라우저 주소가 들어 있고, 여기서 URL 객체를 사용해 방 아이디를 추출해낼 수 있다.(3)
※ 방을 제거할 때 removeRoom이 컨트롤러가 아니라 서비스이다. req, res, next가 없기 때문에 컨트롤러가 아니라 서비스를 사용한다.

//services/index.js
const Room = require('../schemas/room');
const Chat = require('../schemas/chat');

exports.removeRoom = async (roomId) => {
  try {
    await Room.deleteOne({ _id: roomId });
    await Chat.deleteMany({ room: roomId });
  } catch (error) {
    throw error;
  }
};

-> removeRoom 서비스는 다음과 같이 생성한다.

//controllers/index.js
const Room = require('../schemas/room');
const Chat = require('../schemas/chat');
const { removeRoom: removeRoomService } = require('../services'); 
...
exports.removeRoom = async (req, res, next) => {
  try {
    await removeRoomService(req.params.id);
    res.send('ok');
  } catch (error) {
    console.error(error);
    next(error);
  }
};

-> removeRoom 컨트롤러는 removeRoom 서비스를 가져와 사용한다.
-> removeRoom 서비스를 호출하는 데는 roomd(방 아이디)만 필요하다.

6. 채팅 구현하기

- 프런트에서는 서버에서 보내는 채팅 데이터를 받을 소켓 이벤트 리스너가 필요하기 때문에 chat.html 파일에 추가해준다.

//views/chat.html
...
    socket.on('join', function (data) {
      const div = document.createElement('div');
      div.classList.add('system');
      const chat = document.createElement('div');
      chat.textContent = data.chat;
      div.appendChild(chat);
      document.querySelector('#chat-list').appendChild(div);
    });
    socket.on('exit', function (data) {
      const div = document.createElement('div');
      div.classList.add('system');
      const chat = document.createElement('div');
      chat.textContent = data.chat;
      div.appendChild(chat);
      document.querySelector('#chat-list').appendChild(div);
    });
    socket.on('chat', function (data) {
      const div = document.createElement('div');
      if (data.user === '{{user}}') {
        div.classList.add('mine');
      } else {
        div.classList.add('other');
      }
      const name = document.createElement('div');
      name.textContent = data.user;
      div.appendChild(name);
      if (data.chat) {
        const chat = document.createElement('div');
        chat.textContent = data.chat;
        div.appendChild(chat);
      } else {
        const gif = document.createElement('img');
        gif.src = '/gif/' + data.gif;
        div.appendChild(gif);
      }
      div.style.color = data.user;
      document.querySelector('#chat-list').appendChild(div);
    });
    document.querySelector('#chat-form').addEventListener('submit', function (e) {
      e.preventDefault();
      if (e.target.chat.value) {
        axios.post('/room/{{room._id}}/chat', {
          chat: this.chat.value,
        })
          .then(() => {
            e.target.chat.value = '';
          })
          .catch((err) => {
            console.error(err);
          });
      }
    });
  </script>
{% endblock %}

-> socket에 chat 이벤트 리스너를 추가한다. (chat 이벤트는 채팅 메시지가 웹 소켓으로 전송될 때 호출됨)
-> 채팅 메시지 발송자(data.user)에 따라 내 메시지(mine 클래스)인지 남의 메시지(other 클래스) 인지 확인한 후 그에 맞게 렌더링 한다.

//controllers/index.js
...
exports.enterRoom = async (req, res, next) => {
  try {
    const room = await Room.findOne({ _id: req.params.id });
    if (!room) {
      return res.redirect('/?error=존재하지 않는 방입니다.');
    }
    if (room.password && room.password !== req.query.password) {
      return res.redirect('/?error=비밀번호가 틀렸습니다.');
    }
    const io = req.app.get('io');
    const { rooms } = io.of('/chat').adapter;
    console.log(rooms, rooms.get(req.params.id), rooms.get(req.params.id));
    if (room.max <= rooms.get(req.params.id)?.size) {
      return res.redirect('/?error=허용 인원이 초과하였습니다.');
    }
    const chats = await Chat.find({ room: room._id }).sort('createdAt');
    return res.render('chat', {
      room,
      title: room.title,
      chats,
      user: req.session.color,
    });
  } catch (error) {
    console.error(error);
    return next(error);
  }
};

exports.removeRoom = async (req, res, next) => {
  try {
    await removeRoomService(req.params.id);
    res.send('ok');
  } catch (error) {
    console.error(error);
    next(error);
  }
};

exports.sendChat = async (req, res, next) => {
  try {
    const chat = await Chat.create({
      room: req.params.id,
      user: req.session.color,
      chat: req.body.chat,
    });
    req.app.get('io').of('/chat').to(req.params.id).emit('chat', chat);
    res.send('ok');
  } catch (error) {
    console.error(error);
    next(error);
  }
}

//routes/index.js
const express = require('express');
const {
  renderMain, renderRoom, createRoom, enterRoom, removeRoom, sendChat,
} = require('../controllers');

const router = express.Router();

...

router.delete('/room/:id', removeRoom);

router.post('/room/:id/chat', sendChat);

module.exports = router;

-> enterRoom 컨트롤러에서 방 접속 시 기존 채팅 내역을 불러오도록 수정한다.
-> 방에 접속할 때는 DB로부터 채팅 내역을 가져오고, 접속 후에는 웹 소켓으로 새로운 채팅 메시지를 받는다.

- 채팅을 할 때마다 채팅 내용이 POST /room/:id/chat 라우터로 전송되고, 라우터에서 다시 웹 소켓으로 메시지를 보낸다.
※ 책 602p 웹 소켓만으로 채팅 구현하기, 기타 Socket.IO API 참고

7. 프로젝트 마무리하기

- GIF 이미지 전송 구현하기

//views/chat.html
...
    document.querySelector('#chat-form').addEventListener('submit', function (e) {
      ...
    });
    document.querySelector('#gif').addEventListener('change', function (e) {
      console.log(e.target.files);
      const formData = new FormData();
      formData.append('gif', e.target.files[0]);
      axios.post('/room/{{room._id}}/gif', formData)
        .then(() => {
          e.target.file = null;
        })
        .catch((err) => {
          console.error(err);
        });
    });
  </script>

-> 프런트 화면에서 이미지를 선택해 업로드하는 이벤트 리스너를 추가한다.

//routes/index.js
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const {
  renderMain, renderRoom, createRoom, enterRoom, removeRoom, sendChat, sendGif,
} = require('../controllers');

...

router.post('/room/:id/chat', sendChat);

try {
  fs.readdirSync('uploads');
} catch (err) {
  console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.');
  fs.mkdirSync('uploads');
}
const upload = multer({
  storage: multer.diskStorage({
    destination(req, file, done) {
      done(null, 'uploads/');
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname);
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  limits: { fileSize: 5 * 1024 * 1024 },
});
router.post('/room/:id/gif', upload.single('gif'), sendGif);

module.exports = router;

-> POST /room/{{room._id}}/gif 주소에 상응하는 라우터를 작성한다.

//controllers/index.js
...
exports.sendGif = async (req, res, next) => {
  try {
    const chat = await Chat.create({
      room: req.params.id,
      user: req.session.color,
      gif: req.file.filename,
    });
    req.app.get('io').of('/chat').to(req.params.id).emit('chat', chat);
    res.send('ok');
  } catch (error) {
    console.error(error);
    next(error);
  }
};

-> uploads 폴더에 사진을 저장하고, 파일명에 타임스탬프를 붙이고, 용량을 5MB로 제한한다.
-> 파일이 업로드된 후에는 내용을 데이터 베이스에 저장하고, 방 안에 있는 모든 소켓에게 채팅 데이터를 보낸다.

//app.js
...
app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/gif', express.static(path.join(__dirname, 'uploads')));
app.use(express.json());
...

-> 이미지를 제공할 uploads 폴더를 express.static 미들웨어로 연결한다.

핵심 정리

웹 소켓과 HTTP는 같은 포트를 사용할 수 있으므로 따로 포트를 설정할 필요 없다.
웹 소켓은 양방향 통신이므로 서버뿐만 아니라 프론트엔드 쪽 스크립트도 사용해야 한다.
Socket.IO를 사용하면 웹 소켓을 지원하지 않는 브라우저에서까지 실시간 통신을 구현할 수 있다.
Socket.IO 네임스페이스와 방 구분을 통해 실시간 데이터를 필요한 사용자에게만 보낼 수 있다.
app.set('io', io)로 소켓 객체를 익스프레스와 연결하고, req.app.get('io')로 라우터에서 소켓 객체를 가져오는 방식
소켓 통신과 함께 데이터베이스 조작이 필요한 경우, 소켓만으로 해결하기보다는 HTTP 라우터를 거치는 것이 좋다.

Quiz

1. 웹 소켓과 ( )는 같은 포트를 사용할 수 있으므로 따로 포트를 설정하지 않아도 된다.
2. 웹 소켓은 ( )통신이다.
3. 구현하려는 서비스가 복잡해진다면 ws 패키지가 아닌 ( )를 사용하는 것이 편하다.
4. 웹 소켓을 지원하지 않는 브라우저는 ( )으로 사용 가능하다.

5. Socket.IO에는 네임스페이스보다 더 세부적인 개념인 ( )이 있다.

6. 컨트롤러에서는 ( )와 웹 소켓 모두에 접근할 수 있다.
7. 프런트에서는 서버에서 보내는 채팅 데이터를 받을 ( )가 필요하기

8. removeRoom 컨트롤러는 removeRoom 서비스를 가져와 사용한다. 빈칸에 들어갈 코드를 작성하시오.

//controllers/index.js
const Room = require('../schemas/room');
const Chat = require('../schemas/chat');
const { removeRoom: removeRoomService } = require('../services'); 
...
exports.removeRoom = async (req, res, next) => {
  try {
    (1)
    (2)
  } catch (error) {
    console.error(error);
    next(error);
  }
};

9. 이미지를 제공할 uploads 폴더를 express.static 미들웨어로 연결해야 한다. 빈칸에 들어갈 코드를 작성하시오.

//app.js
...
app.use(express.static(path.join(__dirname, 'public')));
(1)
app.use(express.json());
...

Answer

1. HTTP
2. 양방향
3. Socket.IO
4. 폴링 방식
5. 방(room)
6. 몽고디비
7. 소켓 이벤트 리스너
8.

//controllers/index.js
const Room = require('../schemas/room');
const Chat = require('../schemas/chat');
const { removeRoom: removeRoomService } = require('../services'); 
...
exports.removeRoom = async (req, res, next) => {
  try {
    await removeRoomService(req.params.id);		---(1)
    res.send('ok');					---(2)
  } catch (error) {
    console.error(error);
    next(error);
  }
};

9.

//app.js
...
app.use(express.static(path.join(__dirname, 'public')));
app.use('/gif', express.static(path.join(__dirname, 'uploads')));		---(1)
app.use(express.json());
...

출처) 조현정, 「Node.js 교과서 개정 3판」, 길벗(2022), 10장

Corner node.js 2팀

Editor : Igumi

728x90

'24-25 > Node.js 2' 카테고리의 다른 글

[노드 2팀] #12. 웹 소켓으로 실시간 데이터 전송하기 (1)	2025.01.17
[노드 2팀] #11. 웹 API 서버 만들기 (1)	2025.01.10
[노드 2팀] #10. 익스프레스로 SNS 서비스 만들기 (0)	2025.01.03
[노드 2팀] #9. 몽고디비 (3)	2024.12.27
[노드 2팀] #8. MySQL (3)	2024.11.29

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문