Javascript 无法使用socket.io在nodejs服务器和客户端之间通信我的数据
我从socket.io和node js开始。 我想做一个多人玩的石头剪刀游戏。 这是我的server.jsJavascript 无法使用socket.io在nodejs服务器和客户端之间通信我的数据,javascript,node.js,socket.io,Javascript,Node.js,Socket.io,我从socket.io和node js开始。 我想做一个多人玩的石头剪刀游戏。 这是我的server.js var app = require('express')(), server = require('http').createServer(app) io = require('socket.io').listen(server), fs = require('fs'); app.get('/', function (req, res) { res.sendfile(__dirname
var app = require('express')(),
server = require('http').createServer(app)
io = require('socket.io').listen(server),
fs = require('fs');
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
function GameServer(){
this.p1 = ""
this.p2 = "";
this.choice1 = "";
this.choice2 = "";
this.countPlayer = 0;
}
GameServer.prototype = {
addPlayer: function(player){
if(this.countPlayer < 1)
this.p1 = player.name;
else
this.p2 = player.name;
},
addChoice: function(player){
if(this.p1 == player.name)
this.choice1 = player.choice;
else if(this.p2 == player.name)
this.choice2 = player.choice;
},
getData: function(data){
//var gameData = {};
if(this.p1 =="")
this.p1 = data.p1;
else if(this.p1 !="" && this.p2=="")
this.p2 = data.p2;
if(this.choice1 =="")
this.choice1 = data.choice1;
else if(this.choice1 !="" && this.choice2=="")
this.choice2 = data.choice2;
}
}
var game = new GameServer();
/* Connection events */
io.on('connection', function(client) {
client.on('ClientInfoGame', function(player){
console.log('User '+player.name+' connected');
console.log('he chose '+player.choice);
game.getData(player);
});
console.log("on passe au emit")
client.emit('ServerInfoGame', {p1:game.p1,p2:game.p2,choice1:game.choice1,choice2:game.choice})
});
server.listen(8888);
这是我的index.html和javascript代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Super Chat temps réel !</title>
<style>
#zone_chat strong {
color: white;
background-color: black;
padding: 2px;
}
</style>
</head>
<body>
<h1>JANKEN GAME</h1>
<form action="/" method="post">
<input type="submit" id="r" value="Rock" />
<input type="submit" id="p" value="Paper" />
<input type="submit" id="s" value="Sissor" />
</form>
<h2 class="result"> Make a choice</h2>
<section id="zone_chat">
</section>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
function player(nom,choix,socket){
this.name=nom;
this.choice = choix;
this.opponentChoice=""
this.socket=socket
}
player.prototype.sendDataToServer = function() {
//we send data from client to server
//var data = this;
this.socket.emit("ClientInfoGame",{name:this.name,choice:this.choice});
};
player.prototype.getDataFromServer = function() {
//we get data from server
this.socket.on("ServerInfoGame",function(dataFromServer){
var data = dataFromServer;
if(data.p1 == this.name)
this.opponentChoice = data.choice2;
else if (data.p2 == this.name)
this.opponentChoice = data.choice1;
})
};
player.prototype.winnerIs = function() {
console.log("opponnent choice ..."+ this.opponentChoice)
if(this.choice == "Rock" && this.opponentChoice == "Rock" || this.choice == "Paper" && this.opponentChoice == "Paper" || this.choice == "Sissor" && this.opponentChoice == "Sissor" )
return "Draaaaww , try again";
else if(this.choice == "Rock" && this.opponentChoice == "Sissor" || this.choice == "Paper" && this.opponentChoice == "Rock" || this.choice == "Sissor" && this.opponentChoice == "Paper" )
return " YOU WIIIIIINNN ";
else if(this.opponentChoice == "Rock" && this.choice == "Sissor" || this.opponentChoice == "Paper" && this.choice == "Rock" || this.opponentChoice == "Sissor" && this.choice == "Paper" )
return " YOU LOOOOOOSE ";
};
function end(p){
$('h1.result').empty();
$('h1.result').text(p.winnerIs()).html();
}
var choice = "";
$('#r').on('click', function(){choice = "Rock"; p.choice = choice;})
$('#p').on('click', function(){choice = "Paper"; p.choice = choice;})
$('#s').on('click', function(){choice = "Sissor"; p.choice = choice;})
var pseudo = prompt('What's your name?');
// Connexion à socket.io
var socket = io.connect('http://localhost:8888');
var p = new player(pseudo,choice,socket);
//document.title = pseudo + ' - ' + document.title;
// socket.emit('choice', choice)
//socket.emit("infoPlayer",p)
p.sendDataToServer();
p.getDataFromServer();
end(p);
</script>
</body>
在我的client-side index.html上,我创建了一个具有名称和选项属性rock、paper或scissor的player对象。
当一个玩家点击一个按钮时,它会改变选择值,然后向服务器发送一个玩家对象
在我的服务器端,我从每个客户端获取值,将其添加到gameServer对象并发送给所有客户端,然后客户端将应用游戏逻辑来确定谁赢谁输
当我与一个用户连接时,我在服务器上收到一条日志消息,但我在浏览器上收到了这条消息。无法发布/。
我不知道为什么我得到这个,在我的服务器上,我的gameServer属性是空的,我不明白为什么我从客户端发出的数据没有保存在我的服务器上
你知道吗
当我与一个用户连接时,我在服务器上收到一条日志消息,但我在浏览器上收到了这条消息。无法发布/。我不知道我为什么会得到这个
该错误无法发布/来自表单中的提交按钮。在表单中按下提交按钮时,默认行为是将表单发布到操作URL。因为这不是你想要的,你有几种方法来解决这个问题
首先,如果您不打算发布表单,那么您可以完全删除标记并将按钮更改为常规元素。然后,仅仅因为按下了按钮,就不会有默认的post
您还可以保持HTML不变,只需防止默认的post行为。您必须防止三个单击处理程序中的每一个都出现如下默认行为:
$('#r').on('click', function(e){
// prevent default post of form
e.preventDefault();
choice = "Rock";
p.choice = choice;
});
我不明白为什么我从客户端发出的数据没有保存在我的服务器中
我看不出您实际上正在向服务器发送任何数据。您的电话是:
p.sendDataToServer();
将p.choice发送到您的服务器。但是,此函数调用发生在将任何值设置为choice或p.choice之前。这些值仅在用户单击按钮后设置。同时,在单击这些按钮之前,您已经调用了p.sendDataToServer。在上创建事件处理程序。将来,当用户单击按钮时,将调用这些事件处理程序。同时,代码的其余部分将继续运行
类似地,对p.getDataFromServer的调用只安装事件处理程序,以侦听将来可能从服务器发送的数据。在那个时间点,它实际上并没有得到任何数据
看起来您需要了解事件驱动系统的工作原理。设置事件处理程序,然后,有时在将来调用其中一个事件处理程序时,在事件处理程序回调中执行操作。谢谢您的回答。你说得对,我甚至都不习惯处理。我会做更多的研究