我尝试使用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>