Web Socket 채팅방 만들기_3

Web Socket 채팅방 만들기_3

---

2023.01.09 - [JavaScript] - Web Socket 채팅방 만들기_1

2023.01.10 - [JavaScript] - Web Socket 채팅방 만들기_2

---

socket.io이용 채팅방 프로젝트

 

📌 package.json

npm i mongoose multer color-hash@2

---

새로운 방 생성

 

📄 /views/main.html

  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); // 화면에 추가
  });

 

📄 controllers/index.js

exports.createRoom = async (req, res, next) => {
    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);
}

---

방 들어가기

소켓 갯수(어댑터 갯수) = 채팅방 이용자 수

 

📄 controllers/index.js

exports.enterRoom = async (req, res, next) => {
    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,
    });
}

max 인원 수 보다 적으면 채팅방 들어갈 수 있음.

 

 

채팅방 만들기

 

mongoo DB 채팅방 생성