Socket IO 发送两次消息并再次获取答案

【问题标题】：Socket IO sends message twice and get it againSocket IO 发送两次消息并再次获取
【发布时间】：2019-02-19 18:43:55
【问题描述】：

我在使用 SocketIO Chat 时遇到了两个问题。似乎聊天工作正常，但它发送了两次（或更多）聊天。

用户 1 屏幕截图

如果 User1 发送消息，它会显示为这样。当我输入内容时，它会显示我输入的内容。

另一个问题来自 User2。如果 User 2 Typed 键入内容，则返回两次。我测试了 User3 并且它返回了第三次。我不知道为什么它会这样工作。

用户 2 屏幕截图

[服务器端代码]

router.get(`/:userId/admin/contact`, function (req, res, next) {
  let userId = req.params.userId;
  // console.log(io);
  console.log(Object.keys(io.sockets.adapter.rooms));
  let contactArray = Object.keys(io.sockets.adapter.rooms);
  // Socket.io
  io.sockets.on('connection', function (socket) {
    // Join Room
    socket.join(`sangumee-Quarterican-KJ`);
    console.log(`JOIN : sangumee-Quarterican-KJ`)

    socket.on('send:message', function (data) {
      io.sockets.to('sangumee-Quarterican-KJ').emit('send:message', data.message);
      console.log(data.message);
    });
  });
  res.render('mypage/contact', {
    userId: userId,
    contactArray: contactArray
  })
});

[客户端代码]

var socket = io.connect('http://IPADDRESS:3001');
$('#chat').on('submit', function (e) { //2
    var msg = $('#message').val();
    if (!msg) return;
    socket.emit('send:message', {
        message: msg
    });
    e.preventDefault();
    $('#message').val('')
    $('.msg_history').append(`<div class="outgoing_msg"><div class="sent_msg"><p>${msg}</p><span class="time_date"> 11:01 AM    |    June 9</span></div></div>`);
});
// Receive a message
socket.on('send:message', function (data) {
    $('.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}</p><span class="time_date"> 11:01 AM    |    June 9</span></div></div></div>`);
});

【问题讨论】：

标签： javascript node.js socket.io

【解决方案1】：

socket io 在所有应用程序中广播消息，因此您也会收到您的消息。

因此，当您发送带有发送者 ID 和接收者 ID 的消息时。

socket.emit('send:message', { 消息：味精， sender_id: '你的用户名' });

当您收到邮件时，您必须检查发件人 ID，如果发件人 ID 不匹配，则与您自己的 ID 匹配，否则请留下邮件。

socket.on('send:message', function (data) { if(data.sender_id!='您的用户 ID'){ $('.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}</p> <span class="time_date"> 11:01 AM | June 9</span> </div> </div> </div>); } });

【讨论】：

感谢您的帮助！！使用此解决方案解决的问题

【解决方案2】：

我建议你，在服务器或客户端更改你的发射名称。例如在服务器中

socket.on('send:message', function (data) {
      io.sockets.to('sangumee-Quarterican-KJ').emit('receive:message', data.message);
      console.log(data.message);
    });

在客户端：

socket.on('receive:message', function (data) {
    $('.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}</p><span class="time_date"> 11:01 AM    |    June 9</span></div></div></div>`);
});

【讨论】：