如何在Cloud9中将node.js连接到服务器以创建聊天信使?

时间:2015-11-24 19:56:33

标签: jquery node.js cloud9-ide

我尝试使用socket.io和node.js在Cloud9中创建聊天信使。不幸的是,我没有这样做。我需要建议。在这里,运行以下代码后,将显示HTML设计(不包括Bootstrap3),但服务器连接和node.js代码不起作用。 N.B:相同的代码显示了Webstorm,node.js和socket.io的所需输出。此外,我可以在" localhost:8000"。

中聊天
var express=require('express'),
    app=express(),
    server=require('http').createServer(app),
    io=require('socket.io').listen(server);
    server.listen(process.env.PORT || 8000, process.env.IP || '192.168.1.105')
    //server.listen(15454 || '192.168.1.105');
   // 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文件:

<html>
  <head>
    <title>Chat</title>
    <!-- Bootstrap Link -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <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>
  </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">
          <!--chatwrap uses grid one for display the name of users and other is for chat history and chat box-->
          <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>
          <!-- Show chat history and textfield to send message-->
          <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>-->
      <!--</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://ide.c9.io/moytri/checkchat/socket.io/socket.io.js"></script>
    <script>
      $(function() {
        var socket = socket.io.connect("https://ide.c9.io/moytri/checkchat");
        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);
        });
        $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>

0 个答案:

没有答案