socket.io 실시간 채팅기능 관련 질문

[진의정]

선생님 강의 듣고 socket.io 부분을 메인으로 프로젝트를 만들어보고 있는데

1. 클라이언트가 서버의 특정 room에 join 요청
2. 클라이언트가 room에 데이터를 전송하기 위해서 서버에게 요청
3. 서버에서 수신하고 특정 room에 데이터 전송
4. 클라이언트가 특정 room에 전송한 정보를 수신

이러한 4단계를 순차적으로 개발해 봤습니다.
3번까지는 console.log를 이용해서 의도대로 작동 하는데
4번이 잘 되지 않습니다.
정말 아무리 생각해도 검색해도 모르겠어서.
개인 프로젝트인데도 불구하고 도움을 구합니다.

server.js
 io.on('connection', (socket) => {
            socket.on('ask-join', async (data) => {
                socket.join(data);
                console.log('classList에서 접속시 room에 참여함', data)
            });
            socket.on('inputValue', async (data) => {
                io.to(data.room).emit('chat', data.msg);
                
                console.log('class의 room으로 메시지를 전달함',data.room, data.msg)
            });
          })


room에 참여하는 코드
<div class="class-item">
        "
          onclick="joinRoom('<%= classInfo[i]._id %>')"><%= classInfo[i].className %>
    </div>
<script src="https://cdn.jsdelivr.net/npm/socket.io@4.7.2/client-dist/socket.io.min.js"></script>
  <script>
    const socket = io();
    function joinRoom(roomName){
      socket.emit('ask-join', roomName);
    } 
  </script>


채팅이 일어나는 ejs파일의 채팅관련 코드
<form class="chat-form" action="/chat" method="POST">
                <input display='none' type="hidden" name="classId" value="<%= classInfo._id %>">
                <input id="chatInput" data-className="<%= classInfo._id %>" name="chatting" type="text" class="chat-input" placeholder="메시지 입력">
                <button onclick="getInputValue()" type="submit">전송</button>
</form>

<script>
    
    const displayMessage = (msg) => {
        const chatMessages = document.querySelector('.chat-messages');
        const messageElement = document.createElement('div');
        messageElement.innerText = msg;
        chatMessages.appendChild(messageElement);
    }
    const getInputValue = () =>{
        const classId = document.getElementById('chatInput').getAttribute('data-className');
        let inputValue = document.getElementById('chatInput').value;

        displayMessage(inputValue);

        socket.emit('inputValue', {msg : inputValue , room : classId});
    }
    const socket = io()
    socket.on('chat', (data) =>{
        displayMessage(data);
    })
    </script>

[codingapple]

 socket.on('inputValue',  안의 console.log는 잘 실행되나 확인해봅시다

[진의정]

네 문제없이 잘 동작합니다.
각 구간별로 console.log로 값이 잘 도착하나 확인해봤는데
서버에서 클라이언트로 io.to().emit() 해주고나서 
클라이언트에서 socket.on()에서 수신을 못하는것 같은데 해결방법을 모르겠습니다.
일반모드 시크릿모드 두개 켜서
서로다른 아이디로 로그인 시키고
같은 페이지에서 join시키고
채팅을 전송하면, 각자 본인의 채팅만 올라오고 다른사람의 채팅은 올라오지 않는것을 보아
서버에서 room으로 보내는걸 socket.on() 하는걸 제대로 하지 못하는게 맞는것 같은데

제가 클래스 참여자들을 제대로 room에 join 시키지 못하고 있는 걸까요..?

그나마 의심가는 부분이
1. 사용자가 room에 제대로 join 되지 않았다.
2. 클라이언트가 서버에서 데이터를 수신하지 못하고있다.

이거 둘중 하나같은데.. 아무리 살펴봐도 코드에 잘못된 부분을 찾질 못하겠습니다.

[codingapple]

socket.on('chat', (data) =>{
        displayMessage(data); 여기 data가 출력이 안되면 룸번호가 이상할수도요
})
룸 조인시킬때랑 socket.emit('inputValue', {msg : inputValue , room : classId}); 할 때 룸번호 동일한지 이상한 공백없는지 확인해봅시다

[진의정]

JOIN을 실제 채팅이 발생하는곳이 아니라
채팅하는 곳으로 이동하는 버튼을 눌렀을때 발생시켜서 그랬던것 같습니다.
채팅하는곳에서 JOIN 시키니깐 잘되네요..

JOIN을 한번 하면, 계속 JOIN한 ROOM에 연결되어 있는줄 알았습니다.. 답변 감사합니다.

[글쓴이]

글