3
\$\begingroup\$

I am new to Node.js and Socket.io. I implemented a realtime chat service that has a chatroom feature. When the actual product is launched, there will be at least 200 concurrent users with 50 groups of 4 people. I would appreciate any advice on its performance and any recommendations.

Server (remote server)

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

app.use(express.static(__dirname + '/'));

//setup IO 
io.on('connection', function(socket){
    console.log("A user is connected");
    var notice = {'content' : 'Hello World'};
    socket.emit("notice", notice);
    //listen for reply
    socket.on("reply",function(data){
        //extract group id, make sure the msg is sent to the particular group
        var groupid = data.group;
        var groupname = groupid + "chat";
        socket.emit(groupname, data);
        console.log("got msg");
        //save the data into mongo db 
    });

    socket.on('disconnect', function(){
        console.log("A user is disconnected");
    });
});

//Open server
http.listen(3000, function(){
    console.log('listening on *:3000');
});

Client

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>WebSockets Demo</title>
</head>
<body>
  <div id="page-wrapper">
    <h1>WebSockets Test</h1>
            <p>Entry</p>
            <input id="entry" type="text">
            <input id="button" type="submit" value="Enter">
        <div id="msg">
        </div>
  </div>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
  <script>
      $(function(){
          var groupid = 2; //this groupid will change in the actual app. Right now is hardcoded. At tun time, this roupid is passed from php. 
      var socket = io("http://104.236.19.119:3000");
          socket.on('connect',function(){
            window.alert("You are connected.");
      });

          $('#button').on('click',function(){
              var entry = $("#entry").val();
          var reply_msg = {"content" : entry, "group":groupid};
              socket.emit('reply',reply_msg);
              $("#entry").val("");
          });
      var groupname = groupid + "chat";
      //got the msg and append to chat window 
      socket.on( groupname , function(data){
          var new_msg = $("<p>" + data.content + "</p>");
        $('#msg').append(new_msg);
      });
      });
  </script>
</body>
</html>
Improve this question
\$\endgroup\$

1 Answer 1

Reset to default
2
\$\begingroup\$

Your client JavaScript indentation is very, very messed up. I can hardly understand what's going on.

Some lines are missing an indentation, and some have an extra indentation, or even an extra space (which is extra very messed up, because you are leaving the alignment of a tab/indentation).

Everything inside the very first function should be indented one tab. Everything inside the socket.on's second parameter should be indented another tab. Everything inside $(#button).on's first parameter should be indented another tab.

Here is your tab code cleaned up:

$(function(){
    var groupid = 2; //this groupid will change in the actual app. Right now is hardcoded. At tun time, this roupid is passed from php. 
    var socket = io("http://104.236.19.119:3000");
    socket.on('connect',function(){
        window.alert("You are connected.");
    });

    $('#button').on('click',function(){
        var entry = $("#entry").val();
        var reply_msg = {"content" : entry, "group":groupid};
        socket.emit('reply',reply_msg);
        $("#entry").val("");
    });
    var groupname = groupid + "chat";
    //got the msg and append to chat window 
    socket.on( groupname , function(data){
        var new_msg = $("<p>" + data.content + "</p>");
        $('#msg').append(new_msg);
    });
})

This code is much, much easier to read.

$('#button').on('click',function(){
    var entry = $("#entry").val();
    var reply_msg = {"content" : entry, "group":groupid};
    socket.emit('reply',reply_msg); // <--
    $("#entry").val("");
});

You have a potential error here: in this function, you attempt to send a signal to the server that you are connected to. However, if the client had not yet connected to the server, socket.emit will fail.

To fix this, create a variable called isConnected and set it to false. Then, when the first socket.on fires you can set this variable to true. That way, you can setup an if statement in the code above so that you don't try to reply to the server without first connecting to the server.

Here is what I mean:

var isConnected = false;
socket.on('connect',function(){
    window.alert("You are connected.");
    isConnected = true;
});

$('#button').on('click',function(){
    if(isConnected) {
        var entry = $("#entry").val();
        var reply_msg = {"content" : entry, "group":groupid};
        socket.emit('reply',reply_msg);
        $("#entry").val("");
    } else {
        alert("You are not connected yet.");
    }
});
Improve this answer
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.