CODEWITHSUNDEEP
javascriptnode.jssocket.io
Nik Hendricks
Nik Hendricks

Reputation: 294

socket io starts posting things twice after a while on my primitive chatroom

I am trying to make a chatroom in node.js and socket.io and it is only in begining stages right now (because i am just learning these languages) but the apending the text in a text box to a div works but after a couple of mesages it does it double for the other user here is my client code on index.html

    var username = "";
    var socket = io();

    $('form').submit(function(e) {
        e.preventDefault();

            //gets the value from the message text feild and sets it as the    message var
        var message = {
            text : $('#chat-box-div-txtinpt').val()
        }
        if (message.text.trim().length !== 0) {
          socket.emit('chat-message', message);
                //append the message to the chatlog-display-div
                jQuery("#chatlog-display-div").append('<div>'+username+message.text+'</div><hr>');
        }
        //clear the value of the txtinput after you focus it.
        $('#chat-box-div-txtinpt').focus().val('');

            socket.on('chat-message', function (message) {
               jQuery("#chatlog-display-div").append('<div>'+username+message.text+'</div><hr>');
            });
    });

and here is my server code

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
res.sendfile('index.html');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});

 io.on('connection', function (socket) {

 console.log('a user connected');
 socket.on('disconnect', function () {
 console.log('user disconected');
  });

  socket.on('chat-message', function (message) {
  console.log('message : ' + message.text);
 //excludes "socket" from getting the emit
 socket.broadcast.emit("chat-message",message);
 });
 });

here is the site that its on so you can see open up 2 windows and keep mesageing

Upvotes: 0

Views: 312

Answers (1)

Stian
Stian

Reputation: 695

As I mentioned in my comment, your problem is in how you structured your client code.

Each time submit() event triggers, you register a new listener for the socket.on('chat-message') event, which means you will run that code the same number of times as you have sent a message before that.

In addition, you will never see any messages if you haven't sent a message already.

Since it's such a quick fix, here's some code that should work: (not testet)

    $('form').submit(function(e) {
    e.preventDefault();

        //gets the value from the message text feild and sets it as the    message var
    var message = {
        text : $('#chat-box-div-txtinpt').val()
    }
    if (message.text.trim().length !== 0) {
      socket.emit('chat-message', message);
            //append the message to the chatlog-display-div
            jQuery("#chatlog-display-div").append('<div>'+username+message.text+'</div><hr>');
    }
});
//clear the value of the txtinput after you focus it.
$('#chat-box-div-txtinpt').focus().val('');

socket.on('chat-message', function (message) {
   jQuery("#chatlog-display-div").append('<div>'+username+message.text+'</div><hr>');
});

Upvotes: 1

Related Questions