인프런 커뮤니티 질문&답변

//채팅창에 현재 참여자 수나 목록표시하기구현한chat.html코드와 socket.j코드입니다. 그런데 chat: ${socket.request.session.color} 이부분이 undefined으로 계속 나옵니다. console.log에 찍어보면 socket.request.session에 color만 빼고 나오네요.

{% extends 'layout.html' %}

{% block content %}
  <h1>{{title}}</h1>
  <a href="/" id="exit-btn">방 나가기</a>
  <fieldset>
  <legend>채팅 내용</legend>
  <div style="display: flex; gap: 20px;">
    <!-- 채팅 목록 -->
    <div id="chat-list" style="flex: 3;">
      {% 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>

    <!-- 참여자 목록 -->
    <div style="flex: 1;">
      <h3>참여자</h3>
      <ul id="user-list"></ul>
    </div>
  </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="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io.connect('http://localhost:8005/chat', {
      path: '/socket.io',
       transports: ['websocket'] 
    });
    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);

        if (data.userList) {
    const ul = document.querySelector('#user-list'); // 참여자 목록이 들어갈 ul
    ul.innerHTML = ''; // 기존 목록 초기화
    data.userList.forEach(function (user) {
      const li = document.createElement('li');
      li.textContent = user;
      ul.appendChild(li);  
    });
  }

      
    });
    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);
          });
      }
    });
    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>
{% endblock %}

  const SocketIO = require('socket.io');const { removeRoom } = require('./services'); module.exports = (server, app, sessionMiddleware) => {  const io = SocketIO(server, { path: '/socket.io',transports: ['websocket']  });  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 네임스페이스에 접속');      console.log(socket.request.session);    socket.on('join', (roomId) => {      socket.join(roomId);        const room = socket.adapter.rooms.get(roomId); // Set        const userList = room ? Array.from(room) : [];    // 시스템 메시지 + 사용자 목록 전송    socket.to(roomId).emit('join', {      user: 'system',      chat: `${socket.request.session.color}님이 입장하셨습니다.`,      userList,    });  });     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}님이 퇴장하셨습니다.`,        });      }    });  });}