2017-06-13 59 views
0

我想创建一个琐事游戏,其中2个用户回答问题,然后在最后宣布获胜者。我正在使用socket.io接收答案。为什么这个socket.io服务器不响应我的客户端程序?

我的问题是我的server.js无法正常工作。看起来按下按钮时功能allUsershaveAnswered没有响应。我也收到一个错误Failed to load resource: the server responded with a status of 404 (Not Found)。我在寻找寻找困难问题的所在

$(function(){ 
 
    var socket =io(); 
 

 
    $('#userIdForm').submit(function() { 
 
    console.log($('#userIdForm').val()); 
 
    socket.emit('new user', $('#userIdInput').val()); 
 
    $(gameDiv).show(); 
 
    $(logInDiv).hide(); 
 
    return false; 
 

 
    }); 
 

 
    // in game div a series of question are displayed 
 
    $('#questionForm').submit(function() { 
 
    socket.emit('answer' , $('#answeredInput').val()); 
 
    $('#guessForm').hide(); 
 
    $('#questionForm').show(); 
 
    return false; 
 
}); 
 
// this is called when all users have answered the question 
 

 
socket.on('allUsersHaveAnswered', function (msg) { 
 
    $('#resultsDiv').append("The answer was:" + msg.answer + "<br>Winner:"+ msg.winner); 
 
    $('#waitingDiv').hide(); 
 
    $('#resultsDiv').show(); 
 
}); 
 
});
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    font: 13px Helvetica, Arial; 
 
} 
 

 
form { 
 
    background: #000; 
 
    padding: 3px; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
} 
 

 
form input { 
 
    border: 0; 
 
    padding: 10px; 
 
    width: 90%; 
 
    margin-right: .5%; 
 
} 
 

 
form button { 
 
    width: 9%; 
 
    background: rgb(130, 224, 255); 
 
    border: none; 
 
    padding: 10px; 
 
} 
 

 
#messages { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#messages li { 
 
    padding: 5px 10px; 
 
} 
 

 
#messages li:nth-child(odd) { 
 
    background: #eee; 
 
}
<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>Socket.IO chat</title> 
 
    <link rel="stylesheet" href="master.css"> 
 
    </head> 
 
    <body> 
 
    <div id="logInDiv"> 
 
     <h1>Create an Username</h1> 
 
     <form id="userIdForm" action=""> 
 
     <input id="userIdInput" autocomplete="off" /><button>Send</button> 
 
     </form> 
 
    </div> 
 
    <div id="gameDiv" hidden> 
 
     <h1 id="info">Answer the General Knowlegde Question</h1> 
 
     <h2 id="info2">Once the other player has answered, you will find out who won!</h2> 
 
     <p>Who won the English Premeier League this year?</p> 
 
     <form id="questionForm" action=""> 
 
     <input id="answeredInput" autocomplete="off" /><button>Send</button> 
 
     </form> 
 
     <div id='waitingDiv' hidden> 
 
     <p>Waiting for answers</p> 
 
     </div> 
 
     <div id='resultsDiv' hidden> 
 
     </div> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
    <script src="./socket.io/socket.io.js"></script> 
 
    <script src="/main.js"></script> 
 

 
    </body> 
 
</html>

这是在服务器上运行:

// server 
 
var express = require('express'); 
 
var app = express(); 
 
var server = require('http').createServer(app); 
 
var io = require('socket.io')(server); 
 
var port = process.env.PORT || 3000; 
 

 
server.listen(port, function() { 
 
    console.log('Server listening at port %d', port); 
 
}); 
 

 
//Routing 
 
app.use(express.static(__dirname + '/public')); 
 

 
// this is the answer 
 

 
var answer = "chelsea"; 
 

 
var guessedanswers = {}; 
 

 
io.on("connection", function(socket) { 
 
    socket.on('new user', function(id) { 
 
    socket.userId = id; 
 
    }); 
 
    socket.on('guess', function(guess) { 
 
    guesses[socket.userId] = parseInt(guess); 
 
    var numAnswers = Object.keys(guessedanswers).lenght; 
 
    console.log("we've gotten: " + numAnswers + " guesses"); 
 
    if (numAnswers >= 2) { 
 
     var winner = ""; 
 
     for (var userId in guessedanswers) { 
 
     var guess = guesses[userId]; 
 
     if (guess == answer) { 
 
      winner = userId; 
 
     } 
 
     } 
 

 
     io.emit('allUsersHaveAnswered', { 
 
     winner: winner, 
 
     answer: "chelsea" 
 
     }); 
 
    } 
 
    }); 
 
});

可能是什么原因,怎么要解决这个问题?

+0

你的404具体说什么,你可以更详细吗?你的客户端在哪里发出“猜测”?你是否尝试过用'socket.broadcast.emit(...)'来代替'io.emit(...)' – urbz

回答

0

您在这里有一个错字:

Object.keys(guessedanswers).lenght 
中应该是什么 .length

Object.keys(guessedanswers).length 

这可能意味着你永远不会得到numAnswers正确的价值,所以你永远不会进入

if (numAnswers >= 2)条件和因此从不做io.emit('allUsersHaveAnswers,...)``。


有关错误'Failed to load resource: the server responded with a status of 404 (Not Found)',你就必须确切地告诉我们它是无法找到其资源。如果它是main.js,那么你对该资源的路由处理显然是不正确的。

+0

@KobinaTettehDadzie - 这是否回答你的问题? – jfriend00

相关问题