为什么这个 socket.io 服务器不响应我的客户端程序？答案

【问题标题】：Why this socket.io server doesn't response to my client program?为什么这个 socket.io 服务器不响应我的客户端程序？
【发布时间】：2017-06-13 13:27:18
【问题描述】：

我正在尝试创建一个问答游戏，其中 2 位用户回答一个问题，然后在最后宣布获胜者。我正在使用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"
      });
    }
  });
});

可能是什么原因，如何解决？

【问题讨论】：

你的404具体说的是什么，能再详细点吗？您在客户端的哪个位置发出guess？你试过用socket.broadcast.emit(...)代替io.emit(...)

标签： javascript jquery html css socket.io

【解决方案1】：

这里有一个错字：

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，那么您对该资源的路由处理显然不正确。

【讨论】：

@KobinaTettehDadzie - 这回答了你的问题吗？