moytri
By:
moytri

How to create chat messenger in node.js and socket.io using cloud9 IDE

November 25, 2015 3.7k views
Git Node.js MongoDB Ubuntu

I tried to make chat messenger using cloud9 in socket.io and node.js. I am unable to make connection to client and pass message.
Note : Using Webstorm IDE, I can make successful chat with client through same code (including http.port address) . My code it included here.

GitHub Link : https://github.com/Moytri/checkchat

My Code:

(index.js)

/*jshint curly:true, debug:true */
var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('socket.io').listen(server);

    server.listen(process.env.PORT, process.env.IP);


    // server.listen(8000);

    //requesting localhost to connect to index.html
    app.get('/', function(req, res){
        res.sendFile(__dirname+'/index.html');
    });


    // usernames which are currently connected to the chat
    var nicknames=[];

    io.sockets.on('connection', function(socket){
        socket.on('new user',function(message,callback)
        {
            // if the newly entered username already exists in array return false,othersise push it into the array
           if(nicknames.indexOf(message)!=-1) {
               callback(false);
           }else {
               callback(true);
               socket.nickname=message;
               nicknames.push(socket.nickname);
               io.sockets.emit('usernames',nicknames);
               updateNicknames();
           }
        });

       function updateNicknames(){
            io.sockets.emit('usernames', nicknames);
        }

        socket.on('send message', function(message){
            io.sockets.emit('new message', {msg: message, nick: socket.nickname});
        });

        socket.on('disconnect', function(message){
            if(!socket.nickname) return;
            nicknames.splice(nicknames.indexOf(socket.nickname), 1);
            updateNicknames();
        });

    });

(index.html)

<!DOCTYPE html>
<html>
    <head>

        <title>A Chat Messenger</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

        <!-- Latest compiled and minified JavaScript -->
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <style>

    /*this style tag indicates css for navigation*/

    .container{
    background: #e5f2fa;
    height:750px ;
    min-width: 150px;
    }

    .row  {
    margin-bottom: 0px;
    min-width: 150px;
    }
    .navbar{
    background: #6cabdd;
    min-width: 150px;
    }
    h3{
    font-family:"Times New Roman", Times, serif;
    font-size:24px;
    margin-left: 400px;
    background: #6cabdd;
    color:white;
    min-width: 150px;
    text-align:center;

    }

    </style>
    <style type="text/css">
     .col-xs-9{
            margin-left: 300px;
        }
        /* enable absolute positioning */
        .inner-addon {
            position: relative;
        }

        /* style icon */
        .inner-addon .glyphicon {
            position: absolute;
            padding: 10px;
            pointer-events: none;
        }

        /* align icon */
        .left-addon .glyphicon  { left:  0px;}
        .right-addon .glyphicon { right: 0px;}

        /* add padding  */
        .left-addon input  { padding-left:  30px; }
        .right-addon input { padding-right: 30px; }

         #contentWrap{
                display: none;
            }

        #chatWrap{
            margin-top: 20px;
            margin-left: 120px;
            margin-right: 120px;
            border: 1px #ffffff solid;

        }
        #chat{
            height:600px;
        }

        .col-lg-6,.col-lg-3,.panel{
            height:600px;
        }
        .col-lg-3,.panel{
            width: 180px;
            border: 1px #ffffff solid;
            margin-left: 0px;
        }

    </style>
    </head>


    <body>
        <!--container holds everything-->
        <div class="container">

    <!--Start Navbar-->
      <div class="row">
        <div class="col-lg-12">
        <nav role="navigation" class="navbar navbar-default">
                <div class="navbar-header">
                    <h3>Fifteen Minutes Chat Messanger</h3>
                </div>
        </nav>
        </div>
        </div>
        <!--end Navbar-->

      <!--Form to enter UserName-->
        <div class="row">

        <div class="col-xs-9" id="nickWrap" >
               <p id="nickError"></p>
               <form id="setNick">
                 <div class="col-xs-6">
                 <div class="inner-addon left-addon">
                       <i class="glyphicon glyphicon-user"></i>
                       <input id="nickname" class="form-control" placeholder="Username"/>
                       </div>
                 </div>

                <div class="col-xs-3"><input type="submit" class="btn btn-primary"></div>
                </form>
         </div>
          </div>
         <!--end username-->

        <!--Message-->

           <div id="contentWrap">
                <div id="chatWrap">
                    <div class="row">

                    <div class="col-lg-3">
                        <div class="panel panel-default">
                        <div class="panel-heading"><center>Username</center></div>
                        <div class="panel-body" id="users"></div>
                    </div>
                    </div>
                        <div class="col-lg-6" style="width:700px">
                        <div id="chat"></div>
                        <form id="send-message">
                            <input id="message" size="80" autocomplete="off" placeholder="Write Message" style="height: 30px">
                            <input type="submit" class="btn btn-default btn" />
                        </form>
                    </div>

                    </div>
                </div>

         </div>
<!--End of Message box-->

 </div>  <!--End of container-->

 <!--node.js and Jquery code-->

<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://https://checkchat-moytri.c9users.io/socket.io/socket.io.js"></script>


<script>

 /*jshint curly:true, debug:true */
    $(function(){
        var socket = require('socket.io').connect("https://checkchat-moytri.c9users.io:8080");
        var $nickForm=$('#setNick');
        var $nickError=$('#nickError');
        var $nickBox=$('#nickname');
        var $users = $('#users');
        var $messageForm=$('#send-message');
        var $messageBox=$('#message');
        var $chat=$('#chat');
        var i;

         /* Here we are checking the validity of username.To do so a callback function is created.
            If the username is valid then we will display the chat box, otherwise an error message is shown.
             Here a callback comes in.Nickname is sent from server and pass it to our function socket.emit.
            Afterwards changes have made depending on the value of that data.*/

        $nickForm.submit(function(e){
            e.preventDefault();
            socket.emit('new user',$nickBox.val(),function(message){
                if(message){
                    $('#nickWrap').hide();
                    $('#contentWrap').show();
                }else {
                    $nickError.html('Username already in use. Try another name.');
                }
                });
                    $nickBox.val('');
            });

            //List of users
        socket.on('usernames', function(message){
            var html = '';
            for(i=0; i < message.length; i++){
                html+= message[i] + '<br/>'
                }
            $users.html(html);
            //$showName.append(html);
        });


        $messageForm.submit(function(e){
            e.preventDefault();
            socket.emit('send message', $messageBox.val());
            $messageBox.val('');
        });

        socket.on('new message', function(message){
            $chat.append('<span class="glyphicon glyphicon-user"></span>'+"   "+'<b>' + message.nick +  ' : </b>'+ message.msg + "<br/>");
        });
     });
    </script>
    </body>
</html>

Note : Need help to identify and solve probelm.

Be the first one to answer this question.