Currently, I am in the process of developing a trivia game where two users engage in answering questions with the winner being declared at the end. As part of this project, I have integrated socket.io to facilitate the exchange of answers.
However, I have encountered an issue with my server.js file as it is not functioning correctly. It seems that the allUsershaveAnswered function is failing to trigger upon button press. Additionally, an error message
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;
});
// Display a series of questions within the game div
$('#questionForm').submit(function () {
socket.emit('answer' , $('#answeredInput').val());
$('#guessForm').hide();
$('#questionForm').show();
return false;
});
// Triggered 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>The current setup on the server side looks like this:
// Server Setup
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'));
// Provided 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).length;
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"
});
}
});
});Identifying the root cause and resolving it remains my primary concern. Any insights on addressing this issue would be greatly appreciated.