2017-02-23 6 views
0

Я начинаю с socket.io и узла js. Я пытаюсь создать многопользовательскую игру «Ножницы для каменной бумаги». Вот мой server.jsНе удается передать мои данные между сервером nodejs и клиентом с socket.io

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 с моим яваскриптом кодом

<!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 и отправляю его всем клиентам, тогда клиент будет применять логику игры, чтобы определить, кто победит или проиграет.

Когда я подключаюсь к пользователю, я получил сообщение журнала на своем сервере, но я получил это сообщение в своем браузере. Msgstr "Невозможно POST /". Я не знаю, почему я получил это, и на моем сервере мои атрибуты gameServer пустые, и я не понимаю, почему данные, которые я испускаю от клиента, не сохраняются на моем сервере.

У вас есть идея?

ответ

1

Когда я подключаюсь к пользователю, я получил сообщение журнала на своем сервере, но я получил это сообщение в своем браузере. Msgstr "Невозможно POST /". Я не знаю, почему я получил это

Ошибка "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. Эти значения устанавливаются LATER, когда пользователь нажимает кнопку. Между тем, вы уже вызвали p.sendDataToServer(), прежде чем какая-либо из этих кнопок была когда-либо нажата. .on() создает обработчики событий. Эти обработчики событий будут называться в будущем, когда пользователь нажимает кнопку. Между тем, остальная часть вашего кода продолжает работать.

Аналогично, ваш вызов p.getDataFromServer() просто устанавливает обработчики событий для прослушивания будущих данных, которые могут быть отправлены с сервера. На данный момент он не получает никаких данных.

Похоже, вам понадобится немного учебника о том, как работает система, управляемая событиями. Вы настраиваете обработчики событий, а затем, иногда в будущем, когда вызывается один из этих обработчиков событий, вы затем выполняете действие в обратном вызове обработчика события.

+0

Благодарим вас за ответ. Вы правы, я не привык даже к обработке. Я сделаю больше исследований по этому поводу. :) – user3525616

Смежные вопросы