![](/img/trans.png)
[英]Socket io CORS error Can't Connect Client To Nodejs Server Through Socket.io
[英]Can't communicate my data between nodejs server and client with 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 + '/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>
在我的客戶端(index.html)上,我創建了一個具有名稱和選擇屬性(岩石,紙張或剪刀)的播放器對象。 當玩家單擊按鈕時,其更改選擇值,然后將玩家對象發送到服務器。
在服務器端,我從每個客戶端獲取值,將其添加到我的gameServer對象中,然后將其發送給所有客戶端,然后客戶端將應用游戲邏輯來確定誰輸誰贏。
當我與用戶連接時,我在服務器上收到一條日志消息,但在瀏覽器上卻收到了此消息。 “無法發布/”。 我不知道為什么得到這個,在我的服務器上我的gameServer屬性為空,我也不明白為什么我從客戶端發出的數據沒有保存在我的服務器中。
你有什么主意嗎?
當我與用戶連接時,我在服務器上收到一條日志消息,但在瀏覽器上卻收到了此消息。 “無法發布/”。 我不知道為什么我得到這個
錯誤"Cannot POST /"
來自表單中的提交按鈕。 在表單中按下提交按鈕時,默認行為是將表單發布到操作URL。 由於這不是您想要的,因此有幾種方法可以解決此問題。
首先,如果您無意過帳表單,則可以完全刪除<form>
標記並將按鈕更改為常規的<button>
元素。 然后,將不會有僅因為按下按鈕的默認帖子。
您還可以保持HTML不變,僅阻止默認的發布行為。 您必須避免在這三個點擊處理程序中的每個操作中出現默認行為,如下所示:
$('#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()
。 .on()
創建事件處理程序。 這些事件處理程序將在將來用戶單擊按鈕時的某個時間調用。 同時,其余代碼將繼續運行。
同樣,對p.getDataFromServer()
調用僅安裝事件處理程序,以偵聽將來可能從服務器發送的數據。 在那個時間點它實際上沒有任何數據。
看起來您需要一些關於事件驅動系統如何工作的入門知識。 您設置了事件處理程序,然后有時在將來調用其中一個事件處理程序時,隨后在事件處理程序回調中執行操作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.