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

 

🌟12장 키워드🌟

웹 소켓

socket.io

ws

양방향

단방향

 

 

 

12.1 웹 소켓 이해하기

 

웹 소켓:

• HTML5에 새로 추가된 스펙
• 실시간 양방향 데이터 전송 가능
• WS 프로토콜 사용
• 사용조건은 서버와 브라우저가 WS프로토콜을 지원할 것(노드 같은 것과 최신의 브라우저는 ws혹은 Socket.IO 같은 패키지로 웹 소켓 사용 가능)
• 최초 연결 이후 쭉 연결된 상태이므로 업데이트 유무 확인 요청 보낼 필요 없음(폴링의 단점 해결)
• HTTP 프로토콜과 포트 공유 가능하므로 다른 포트에 연결할 필요 없음
• 서버센트이벤트의 작업 가능

 

 

폴링:

• 웹 소켓이 나오기 이전의 기술
• 주기적으로 서버에 새로운 업데이트가 있는지 확인해야 하는 단점
• 단방향 통신
• 클라이언트 -> 서버 O
• 서버 -> 클라이언트 X

 

서버센트 이벤트 SSE:

• EventSource 라는 객체 이용
• 최초 연결 이후 지속적으로 연결
• 양방향 통신이 필요 없는 작업에 사용(차트 가져오기, 새 게시물 가져오기 등)
• 단방향 통신
• 클라이언트 -> 서버 X
• 서버 -> 클라이언트 O

 

 

Socket.IO

• 웹 소켓 관리를 돕는 라이브러리
• 웹 소켓을 지원하지 않는 IE9 같은 브라우저에서 알아서 웹 소켓 대신 폴링 방식으로 바꿔줌

 

 

12.2 ws모듈로 웹 소켓 사용하기

 

gif-chat이라는 새로운 프로젝트 생성, 아래의 json파일 생성 후

npm i 로 패키지 설치, env, app.js, index.js 파일 생성

 

// .env

COOKIE_SECRET=gifchat

 

// 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 indexRouter = require('./routes');

const app = express();
app.set('port', process.env.PORT || 8005);
app.set('view engine', 'html');
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(process.env.COOKIE_SECRET));
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  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');
});

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

 

 

// routes.index.js

const express = require('express');

const router = express.Router();

router.get('/', (req, res) => {
  res.render('index');
});

module.exports = router;

 

 

npm i ws@8 로 ws모듈 설치, app.js 파일 수정해서 웹 소켓을 익스프레스 서버에 연결

 

// 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', 'html');
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(process.env.COOKIE_SECRET));
app.use(session({
  resave: false,
  saveUninitialized: false,
  secret: process.env.COOKIE_SECRET,
  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'), '번 포트에서 대기중');
});

webSocket(server);		// 추가

 

 

 

웹 소켓 로직을 socket.js파일에 작성

// 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);
  });
};

 

 

ws에 연결된 이벤트리스너 3개

• messing
• error
• close: 클라이언트와 연결 끊어짐

setIneterval을 clearInterval로 바꿔야 메모리 누수 막음

 

 

 

웹 소켓의 상태:

• connecting
• open: 에러 없이 메시지 보낼 수 있음
• closing
• closed

 

 

이후 index.html과 error.html 생성

// index.html


<!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>

 

// error.html

<h1>{{message}}</h1>
<h2>{{error.status}}</h2>
<pre>{{error.stack}}</pre>

 

 

npm start 로 실행하고 http://localhoset:8005 접속

 

 

 

터미널을 통해서 3초 간격으로 내용이 나오는 것을 확인할 수 있다.

 

 

 

12.3 Socket.IO 사용하기

 

WS모듈이 Socket.IO가 하는 일을 못하는 일을 못하진 않지만, 

보다 복잡한 일을 작업을 하기에 Socket.IO가 편의기능이 많이 추가되어 더 적합하다.

 

npm i socket.io@4 명령어를 통해서 소켓을 설치한다.

 

그리고 socket.js파일을 연결한다.

//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);
  });
};

 

emit 메서드:

3초마다 클라이언트 한 명에게 메시지를 보내는 부분. 이벤트 이름, 데이터 두 가지 인수를 보낸다.

 

아래는 index.html 파일은 아래다.

// 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>

 

 

 

 

12.4 실시간 GIF 채팅방 만들기

 

몽고디비랑 몽고 디비 ODM인 몽구스를 이용해 gif를 포함하도록 추가해 수정 및 보완한다.

 

 

npm i mongoose multer color-hash@2  명령어를 통해서

이미지 업로드에 필요한 multer 와 랜덤 색상을 구현할 color-hash 모듈을 설치한다.

 

 채팅방 스키마는 아래와 같다.

// room.js

const mongoose = require('mongoose');

const { Schema } = mongoose;
const roomSchema = new Schema({
  title: {		// 방 제목
    type: String,
    required: true,
  },
  max: {		// 인원 수
    type: Number,
    required: true,
    default: 10,	// 기본 인원
    min: 2,			// 최대 인원
  },
  owner: {		// 방장	
    type: String,
    required: true,
  },
  password: String,		// 문자열
  createdAt: {		// 생성 시간
    type: Date,
    default: Date.now,
  },
});

module.exports = mongoose.model('Room', roomSchema);

 

그리고 채팅 스키마는 아래와 같다.

 

// chart.js

const mongoose = require('mongoose');

const { Schema } = mongoose;
const { Types: { ObjectId } } = Schema;
const chatSchema = new Schema({
  room: {
    type: ObjectId,
    required: true,
    ref: 'Room',
  },
  user: {
    type: String,
    required: true,
  },
  chat: String,
  gif: String,
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

module.exports = mongoose.model('Chat', chatSchema);

 

 

아래는 몽고디비를 연결하는 코드이다.

 

// 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;

 

그리고 환경변수는 아래와 같은데, 각자 맞춰서 비밀번호를 설정하면 된다

// .env

COOKIE_SECRET=gifchat
MONGO_ID=root
MONGO_PASSWORD=iamhungry

 

 

서버와 몽구스를 연결하는  app.js이다. 

 

// 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');
const ColorHash = require('color-hash').default;

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();

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);

 

 

화면의 레이아웃에 대한 파일과 에러가 나올 경우를 대비한 파일, css 파일 등에 대한 내용은 아래와 같다.

// views.layout

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
  <link rel="stylesheet" href="/main.css">
</head>
<body>
{% block content %}
{% endblock %}
{% block script %}
{% endblock %}
</body>
</html>

 

// views/error.html

{% extends 'layout.html' %}

{% block content %}
  <h1>{{message}}</h1>
  <h2>{{error.status}}</h2>
  <pre>{{error.stack}}</pre>
{% endblock %}

 

// public/ main.css

* { box-sizing: border-box; }
.mine { text-align: right; }
.system { text-align: center; }
.mine img, .other img {
  max-width: 300px;
  display: inline-block;
  border: 1px solid silver;
  border-radius: 5px;
  padding: 2px 5px;
}
.mine div:first-child, .other div:first-child { font-size: 12px; }
.mine div:last-child, .other div:last-child {
  display: inline-block;
  border: 1px solid silver;
  border-radius: 5px;
  padding: 2px 5px;
  max-width: 300px;
}
#exit-btn { position: absolute; top: 20px; right: 20px; }
#chat-list { height: 500px; overflow: auto; padding: 5px; }
#chat-form { text-align: right; }
label[for='gif'], #chat, #chat-form [type='submit'] {
  display: inline-block;
  height: 30px;
  vertical-align: top;
}
label[for='gif'] { cursor: pointer; padding: 5px; }
#gif { display: none; }
table, table th, table td {
  text-align: center;
  border: 1px solid silver;
  border-collapse: collapse;
}

 

 

// views/main.html

{% extends 'layout.html' %}

{% block content %}
<h1>GIF 채팅방</h1>
<fieldset>
  <legend>채팅방 목록</legend>
  <table>
    <thead>
    <tr>
      <th>방 제목</th>
      <th>종류</th>
      <th>허용 인원</th>
      <th>방장</th>
    </tr>
    </thead>
    <tbody>
    {% for room in rooms %}
      <tr data-id="{{room._id}}">
        <td>{{room.title}}</td>
        <td>{{'비밀방' if room.password else '공개방'}}</td>
        <td>{{room.max}}</td>
        <td style="color: {{room.owner}}">{{room.owner}}</td>
        <td>
          <button
            data-password="{{'true' if room.password else 'false'}}"
            data-id="{{room._id}}"
            class="join-btn"
          >입장
          </button>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
  <div class="error-message">{{error}}</div>
  <a href="/room">채팅방 생성</a>
</fieldset>
<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io.connect('http://localhost:8005/room', { // 네임스페이스
    path: '/socket.io',
  });

  socket.on('newRoom', function (data) { // 새 방 이벤트 시 새 방 생성
    const tr = document.createElement('tr');
    let td = document.createElement('td');
    td.textContent = data.title;
    tr.appendChild(td);
    td = document.createElement('td');
    td.textContent = data.password ? '비밀방' : '공개방';
    tr.appendChild(td);
    td = document.createElement('td');
    td.textContent = data.max;
    tr.appendChild(td);
    td = document.createElement('td');
    td.style.color = data.owner;
    td.textContent = data.owner;
    tr.appendChild(td);
    td = document.createElement('td');
    const button = document.createElement('button');
    button.textContent = '입장';
    button.dataset.password = data.password ? 'true' : 'false';
    button.dataset.id = data._id; // 버튼에 방 아이디 저장
    button.addEventListener('click', addBtnEvent);
    td.appendChild(button);
    tr.appendChild(td);
    tr.dataset.id = data._id; // tr에 방 아이디 저장
    document.querySelector('table tbody').appendChild(tr); // 화면에 추가
  });

  socket.on('removeRoom', function (data) { // 방 제거 이벤트 시 id가 일치하는 방 제거
    document.querySelectorAll('tbody tr').forEach(function (tr) {
      if (tr.dataset.id === data) {
        tr.parentNode.removeChild(tr);
      }
    });
  });

  function addBtnEvent(e) { // 방 입장 클릭 시
    if (e.target.dataset.password === 'true') { // 비밀방이면
      const password = prompt('비밀번호를 입력하세요');
      location.href = '/room/' + e.target.dataset.id + '?password=' + password;
    } else {
      location.href = '/room/' + e.target.dataset.id;
    }
  }

  document.querySelectorAll('.join-btn').forEach(function (btn) {
    btn.addEventListener('click', addBtnEvent);
  });
</script>
{% endblock %}

{% block script %}
<script>
  window.onload = () => {
    if (new URL(location.href).searchParams.get('error')) {
      alert(new URL(location.href).searchParams.get('error'));
    }
  };
</script>
{% endblock %}

 

// views/room.html

{% extends 'layout.html' %}

{% block content %}
  <fieldset>
    <legend>채팅방 생성</legend>
    <form action="/room" method="post">
      <div>
        <input type="text" name="title" placeholder="방 제목">
      </div>
      <div>
        <input type="number" name="max" placeholder="수용 인원(최소 2명)" min="2" value="10">
      </div>
      <div>
        <input type="password" name="password" placeholder="비밀번호(없으면 공개방)">
      </div>
      <div>
        <button type="submit">생성</button>
      </div>
    </form>
  </fieldset>
{% endblock %}

 

 

// views/chat.html

{% extends 'layout.html' %}

{% block content %}
  <h1>{{title}}</h1>
  <a href="/" id="exit-btn">방 나가기</a>
  <fieldset>
    <legend>채팅 내용</legend>
    <div id="chat-list">
      {% for chat in chats %}
        {% if chat.user === user %}
          <div class="mine" style="color: {{chat.user}}">
            <div>{{chat.user}}</div>
            {% if chat.gif %}}
              <img src="/gif/{{chat.gif}}">
            {% else %}
              <div>{{chat.chat}}</div>
            {% endif %}
          </div>
        {% elif chat.user === 'system' %}
          <div class="system">
            <div>{{chat.chat}}</div>
          </div>
        {% else %}
          <div class="other" style="color: {{chat.user}}">
            <div>{{chat.user}}</div>
            {% if chat.gif %}
              <img src="/gif/{{chat.gif}}">
            {% else %}
              <div>{{chat.chat}}</div>
            {% endif %}
          </div>
        {% endif %}
      {% endfor %}
    </div>
  </fieldset>
  <form action="/chat" id="chat-form" method="post" enctype="multipart/form-data">
    <label for="gif">GIF 올리기</label>
    <input type="file" id="gif" name="gif" accept="image/gif">
    <input type="text" id="chat" name="chat">
    <button type="submit">전송</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io.connect('http://localhost:8005/chat', {
      path: '/socket.io',
    });
    socket.emit('join', new URL(location).pathname.split('/').at(-1));
    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);
    });
  </script>
{% endblock %}

 

 

이후 소켓에 대한 코드를 작성한다.

app.set('io', io)로 라우터에서 io 객체를 사용할 수 있게 저장해 둔다.

이후 rep.app.get('io')로 접근이 가능하다.

 

of메서드는 Socket.IO에 네임 스페이스를 부여하는 메서드로 기본적으로 접근하는 곳이 아닌 다른 네임스페이스를 만들어 접속할 수 있게 만든다. 

네임스페이스는 서로 같은 곳끼리만 데이터를 전달한다.

현재는 /room, /chat 두 가지이다.

 

/room 네임스페이스에 이벤트 리스너를 붙인 코드가 위와 같다. 

connection 이벤트는 네임스페이스 연결 시 발생한다. 

disconnect 이벤트는 연결 해제 시 발생한다.

 

/chat 네임스페이스에 붙인 이벤트 리스너고 connection과 disconnect는 사용자가 직접 만든 이벤트이다.

 

room 방:

socket.io에 이는 네임스페이스보다 더 세부적인 개념이다. 

같은 네임스페스 안에서도 같은 방에 들어 있는 소켓끼리만 데이터를 주고받을 수 있다.

socket.emit('join', 방아이디)  이를 통해서 join이벤트에서 data 매개 변수로 방 아이디를 전달받아 방에 접속할 수 있다. 

 

 

아래는 index.js파일로, 라우터와 컨트롤러를 만든다.

// rountes/index.js

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

const router = express.Router();

router.get('/', renderMain);

router.get('/room', renderRoom);

router.post('/room', createRoom);

router.get('/room/:id', enterRoom);

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

module.exports = router;

 

 

그리고 몽고디비와 웹 소켓 모두 접근 가능한 컨트롤러를 작성한다.

createToom 컨트롤러는 채팅방을 만드는 것이고, GET / 라우터에 접속한 모든 클라이언트가 새로 생성된 채팅방에 대한 데이터를 받을 수 있다. 

 

enterToom 컨트롤러는 채팅방에 접속해 채팅방 화면을 렌더링 하는 컨트롤러이다.  

if 문으로 비밀방의 여부, 랜더링 이전에 방의 존재 여부, 허용 인원 초과 여부를 확인한다. 

 

removeRoom 컨트롤러는 채팅방을 삭제하는 것으로, 방과 내역을 모두 삭제한다. 

 

// 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) => {
  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) => {
  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) => {
  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);
  }
};

 

 

프로젝트 실행에 앞서서 몽고디비를 먼저 실행해야 한다. 

이후 서버 실행 후 브라우저를 두 개 띄우면 두 명이 접속한 듯한 모습을 볼 수 있다.

 

 

 

 

12.5 미들웨어와 소켓 연결하기

 

방에서 입장할 때와 퇴장할 때 누가 입장하고 누가 퇴장했는지 알리는 시스템 알림을 만든다.

그리고 채팅방 접속자 수가 0명일 때 방을 제거하는 코드도 같이 넣는다.

 

이에 대한 app.js와 socket.js는 아래와 같다.

 

 

// 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');
const ColorHash = require('color-hash').default;

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();

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

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, sessionMiddleware);

 

 

// socket.io

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);
  chat.use(wrap(sessionMiddleware));

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

  chat.on('connection', (socket) => {
    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 () => {
      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}님이 퇴장하셨습니다.`,
        });
      }
    });
  });
};

 

 

 

remove 서비스를 생성하는 데에 있어서 아래의 index코드를 작성하고, removeRoom 서비스를 컨트롤하는 index는 아래와 같다.

 

// service/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;
  }
};

 

// controllers/index.js

const Room = require('../schemas/room');
const Chat = require('../schemas/chat');
const { removeRoom: removeRoomService } = require('../services'); 

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) => {
  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) => {
  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) => {
  try {
    await removeRoomService(req.params.id);
    res.send('ok');
  } catch (error) {
    console.error(error);
    next(error);
  }
};

 

 

 

이후 교재를 통해서 채팅을 하는 방법도 확인할 수 있다.

 

 

 

---

Node.js #2 

Editor : 라마