私が実際に取り組んでいるこのチャット アプリケーション (Node および Socket.IO の新機能) は、サーバーにすべてのクライアントにメッセージをブロードキャストさせることができないという事実を除いて、うまく機能しています。一貫性のない変数を確認しました (そして、遊んでいる間にいくつか作成した可能性があります。申し訳ありません;P) が、機能していませんか? コンソールエラーなどを受け取っていないため、混乱しており、デバッグが非常に困難です。コールバックが望ましくない方法でネストする方法に初めて遭遇したのではないでしょうか?
とにかく、ここにいくつかのコードがあります：
App.js:
// Require dependencies
var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server);
// Listen for connections
io.sockets.on('connection', function(client) {
console.log("Someone is connecting...");
client.on('join', function(name) {
client.set('nickname', name);
console.log(name+" has connected!");
client.broadcast.emit('connected', name + " has connected");
});
// Receive messages from the client and broadcast them to everyone
client.on('messages', function(data) {
client.get('nickname', function(err, name) {
client.broadcast.emit("chat", name + ": " + data);
});
});
});
// Without this line, the CSS will not work
app.use('/public', express.static(__dirname + '/public'));
// Route index.html to the root path
app.get('/', function(request, response) {
response.sendfile(__dirname + "/index.html");
});
// Listen for GET requests to the server
server.listen(3000);
console.log("Listening on port 3000");
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Chatapp</title>
<link rel="stylesheet" type="text/css" href="public/default.css"></link>
</head>
<body>
<h1 class="title">Chatapp</h1>
<div id="wrapper">
<div id="online">
</div>
<div id="body">
<div id="status"></div>
<div id="chat">
</div>
</div>
<div id="input">
<form id="chatform">
<input type="text" id="message"></input>
<input type="submit" id="send" value="Send!"></input>
</form>
</div>
<div class="clear"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
// Wait until DOM is ready
$(document).ready(function() {
// Establish a connection to the server
var server = io.connect('http://localhost:3000');
// On submit, send the chat form message to the server, prevent default redirect and reset the chat form
$('#chatform').submit(function(e) {
e.preventDefault();
var message = $('#message').val();
server.emit('messages', message);
$('#chatform')[0].reset();
});
server.on('connect', function(data) {
nickname = prompt('What is your nickname?');
$('#status').html('Connected to Chatapp as ' +nickname);
server.emit('join', nickname);
});
server.on('connected', function(data) {
$('<p>'+data+'</p>').appendTo('#chat');
});
// Listen for messages broadcasted to every client by the server - this does not work for some reason.
server.on('chat', function(data) {
$(data).appendTo('#chat');
});
});
</script>
</body>
</html>
/public/default.css:
body {
margin: 0;
padding: 0;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
#wrapper {
margin: 0 auto;
width: 940px;
height: 500px;
padding: 0;
border: 1px solid #000;
}
#online {
float: left;
width: 188px;
height: 480px;
padding: 10px;
border-right: 1px solid #000;
background: #3d3d3d;
color: #eee;
box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #fff;
}
#body {
float: left;
width: 731px;
height: 439px;
padding: 0;
border-bottom: 1px solid #000;
}
#status {
color: #eee;
height: 30px;
border-bottom: 1px solid #000;
background: #3d3d3d;
padding-left: 10px;
line-height: 30px;
box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #fff;
}
#chat {
background: #c4f2eb;
height: 388px;
padding: 10px;
box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #fff;
}
#input {
float: left;
height: 60px;
width: 731px;
}
.clear {
clear: both;
}
h1.title {
text-align: center;
}
input#message {
float: left;
margin: 0;
width: 640px;
height: 58px;
border: none;
font-size: 28px;
padding-left: 10px;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3);
}
input#message:focus {
border: none;
outline: none;
box-shadow: inset 1px 1px 3px #55ba57, inset -1px -1px 3px #55ba57;
}
input#send {
float: left;
background: #55ba57;
color: #fff;
border: none;
height: 60px;
margin: 0;
width: 81px;
border-left: 1px solid #000;
box-shadow: inset 1px 1px 0px #fff, inset -1px -1px 0px #fff;
}
input#send:hover {
background: #489949;
cursor: pointer;
}
input#send:active {
background: #1e7520;
}