CODEWITHSUNDEEP
javascriptnode.jssocket.io
writingdeveloper
writingdeveloper

Reputation: 1076

Socket IO sends message twice and get it again

I have two problems with SocketIO Chat. It seems that chat works fine but It sends twice(or more) chats.

User1 Screenshot enter image description here

If User1 sends message it show like that. When I entered something it shows what I typed.

And the another problem is from User2. If User 2 Typed type something, it returned twice. And I tested User3 and it returned third times.. I don't know why it work like this.

User 2 Screenshot enter image description here

[Server Side Code]

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
  })
});

[Client Side Code]

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>`);
});

Upvotes: 0

Views: 4581

Answers (2)

Kingslayer
Kingslayer

Reputation: 36

socket io broadcasts message throughout all application so you receive your message also.

so when you send a message send with sender id and receiver id.

socket.emit('send:message', {
        message: msg,
        sender_id: 'YOUR USER ID'
});

Whenever you are receiving the message you have to check sender id and match with your own id if sender id does not match append the message otherwise leave it.

socket.on('send:message', function (data) {
if(data.sender_id!='YOUR USER 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> `);}
});

Upvotes: 2

saman.firouzi
saman.firouzi

Reputation: 466

I suggest to you, change your emit name on server or client. for example in server

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

and on client:

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>`);
});

Upvotes: 1

Related Questions