SocketIO 离开房间功能不工作

Question

我正在使用 SocketIO 开发多个聊天室。并且似乎加入房间功能运行良好，但离开房间功能无效。

我测试了三个不同的ID和加入离开功能测试

每个 Room 链接都有 id 值，例如 <a href="#" onclick="joinChat()"><h5 id="Apple-cliffordfajardo">sangumee</h5></a>

[客户端代码]

var socket = io.connect('IPADDRESS');
let current;

function joinChat() {
    let joinedRoomName = window.event.target.id; // Get clicked id (ROOM NAME)

    $('.msg_history').empty(); // to Remove Previous Chats
    socket.emit('JoinRoom', {
        joinedRoomName,
        leave: current,
    });
    current = joinedRoomName;
    console.log(`CURRENT ROOM : ${current}`);
    console.log(`NewJoined ROOM ${joinedRoomName}`)

    $('#chat').submit(function () {
        //submit only if it's not empty
        if ($('#message').val() != "") {
            var msg = $('#message').val();
            socket.emit('say', {
                msg: msg,
                userId: userId,
                loginedId: loginedId,
                joinedRoomName: joinedRoomName
            });
            //say event means someone transmitted chat
            $('#message').val('');
        }
        return false;
    });
}

$(function () {
    socket.on('mySaying', function (data) {
        if (data.userId != userId) {
            $('.msg_history').append(`<div class="incoming_msg"><div class="incoming_msg_img"><img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"></div><div class="received_msg"><div class="received_withd_msg"><p>${data.msg}</p><span class="time_date"> 11:01 AM    |    June 9</span></div></div></div>`);
        } else {

            $('.msg_history').append(`<div class="outgoing_msg"><div class="sent_msg"><p>${data.msg}</p><span class="time_date"> 11:01 AM    |    June 9</span></div></div>`);
        }
    });

[服务器端代码]

// Socket IO 
io.on('connection', function (socket) {
  // Join Room
  socket.on('JoinRoom', function (data) {
    socket.leave(`${data.leave}`);
    console.log(`Leave ROOM : ${data.leave}`)
    socket.join(`${data.joinedRoomName}`);
    console.log(`NEW JOIN IN ${data.joinedRoomName}`)
  })

  // Send Message
  socket.on('say', function (data) {
    console.log(`${data.userId} : ${data.msg}`);
    //chat message to the others
    //mySaying to the speaker
    io.sockets.to(`${data.joinedRoomName}`).emit('mySaying', data);
    console.log(`Message Send to : ${data.joinedRoomName}`)
    // console.log(`Message Content : ${data.userId} : ${data.message}`);
    db.query(`INSERT INTO chatData (roomName, chatSender, chatMessage) VALUES (?,?,?)`, [data.joinedRoomName, data.userId, data.msg])
  });
})

用户 1 与“房间 1”聊天 -> 有效！ 用户 2 与“房间 1”聊天 -> 有效！ 所以用户 1 和用户 2 互相聊天是有效的。

但是如果用户 2 移动到“房间 2”，则应该离开“房间 1”，但用户 2 似乎仍然与“房间 1”连接。所以用户 2 聊天，它仍然去 ROOM 1

但是，如果用户 1 发送消息，在用户 2 聊天页面中无法收到任何消息，这真的很奇怪。但是如果用户 3 向用户 2 发送消息得到消息但不能发送给用户 3。

我觉得是聊天逻辑问题

Answer 1

其实，这很简单的问题。我只是在外面设置了joinedRoomName变量并移动了提交函数。

var socket = io.connect('IPADDRESS');
let joinedRoomName, current, others;

/* Click Each Room list Function */
function joinChat() {
    joinedRoomName = window.event.target.id; // Get clicked id (ROOM NAME)
    others = document.getElementById(joinedRoomName).innerHTML; // Talk with this person
    $('.msg_history').empty(); // to Remove Previous Chats
    socket.emit('JoinRoom', {
        joinedRoomName,
        leave: current,
    });
    current = joinedRoomName;
    console.log(`CURRENT ROOM : ${current}`);
    console.log(`NewJoined ROOM ${joinedRoomName}`)
}