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

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

I tried to make chat messenger using cloud9 in 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 :

My Code:


/*jshint curly:true, debug:true */
var express = require('express'),
    app = express(),
    server = require('http').createServer(app),
    io = require('').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){

    // 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) {
           }else {

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



<!DOCTYPE html>

        <title>A Chat Messenger</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="//">

        <!-- Latest compiled and minified JavaScript -->
        <script src="//"></script>
        <script src=""></script>
        <script src=""></script>


    /*this style tag indicates css for navigation*/

    background: #e5f2fa;
    height:750px ;
    min-width: 150px;

    .row  {
    margin-bottom: 0px;
    min-width: 150px;
    background: #6cabdd;
    min-width: 150px;
    font-family:"Times New Roman", Times, serif;
    margin-left: 400px;
    background: #6cabdd;
    min-width: 150px;


    <style type="text/css">
            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; }

                display: none;

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


            width: 180px;
            border: 1px #ffffff solid;
            margin-left: 0px;


        <!--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>
        <!--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 class="col-xs-3"><input type="submit" class="btn btn-primary"></div>
         <!--end username-->


           <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 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" />


<!--End of Message box-->

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

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

<script src="/"></script>
<script src=""></script>
<script src="https://"></script>


 /*jshint curly:true, debug:true */
        var socket = require('').connect("");
        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.*/

            socket.emit('new user',$nickBox.val(),function(message){
                }else {
                    $nickError.html('Username already in use. Try another name.');

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

            socket.emit('send message', $messageBox.val());

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

Note : Need help to identify and solve probelm.

Be the first one to answer this question.