Ошибка идентификатора Socket.io, неправильный идентификатор - PullRequest
Новая
       10

Ошибка идентификатора Socket.io, неправильный идентификатор

1 голос
/ 28 апреля 2020

позвольте начать с того, что я не программист, и я только выучил nodeJS, Jquery, AJAX, Socket.IO два дня go. Как, я не знал о них вообще.

Я пытаюсь создать систему, похожую на джекбокс, и дошла до создания комнат и добавления игроков. Но что-то не так с socket.id, он всегда возвращает один и тот же идентификатор для каждого игрока, которого я добавляю. это код, который сталкивается с проблемой (Примечание: создание комнаты вызывается единицей, и это, кажется, работает отлично, потому что коды комнаты и идентификатор хранятся точно так, как они должны): 

var rooms = [];


//Check if socket is connected
io.on('connection',function(socket){
    console.log('made socket connection:'+socket.id);


      //if submit button is pressed on the login form
      app.post('/button', urlencodedParser, function(req, res){
      //check if a roomcode exists with the entered roomcode
      var found = rooms.some(el => el.roomcode === req.body.room);
      //if it exists
      if (found){
        //find the index in the room array of that room
        var targetindex = rooms.findIndex(element => element.roomcode === req.body.room);
        //send a message to that room in unity that you want to join
        io.to(rooms[targetindex].gamesocketid).emit('joinroom', {player: req.body.player, room: req.body.room, socket: socket.id});
        //add the player to the players array of that room
        rooms[targetindex].players.push({nickname: req.body.player, id: socket.id});
        //log the addition of the player to the console
        console.log('player ' + req.body.player + ' joined room ' + req.body.room + ' with socket ID ' + socket.id);
        //Log the room itself to the console
        console.log(rooms[targetindex]);
        //send a response with the data. to tell you successfully added the player to ajax
        res.json(rooms[targetindex]);
      } else {
        console.log('room not found');
      }
    });



    socket.on('createroom',function(data){
      JSON.stringify(data);
      console.log('Game with socket id ' + socket.id + ' created a room with room code ' + data.roomcode );
      var players = [];
      rooms.push({roomcode: data.roomcode, gamesocketid: socket.id, players: players});
      console.log(rooms);
      //console.log('room code ' + RoomJSON.roomcode);
    });

    socket.on('destroyroom',function(data){
      JSON.stringify(data);
      console.log('Destroy a room with room code ' + data.roomcode );
      rooms = rooms.filter(function(value){
        return value.roomcode !== data.roomcode;
      });
    });


});

Я Я уверен, что я, вероятно, делаю то, что запрещено. Я подумал, что это может быть связано с попыткой запустить app.post из io.on ('connection', если это тот случай, когда я теряюсь в том, как его решить. Мне нужен socket.id плеера хранится в моем массиве, поэтому позже я могу использовать эти идентификаторы для отправки важных игровых данных.

Мой журнал консоли (обратите внимание, что в этом журнале все идентификаторы одинаковы, но это не всегда так): 

    PS D:\nodejs\Projects\ZoomFriends> nodemon app
[nodemon] 2.0.3
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
made socket connection:Fe9o3x5-_e1osj5sAAAA
Game with socket id Fe9o3x5-_e1osj5sAAAA created a room with room code JBYK
[
  {
    roomcode: 'JBYK',
    gamesocketid: 'Fe9o3x5-_e1osj5sAAAA',
    players: []

  }
]
made socket connection:6sjC6WMGyky2G5-sAAAB
Fe9o3x5-_e1osj5sAAAA
player Sebastiaan Phone joined room JBYK with socket ID Fe9o3x5-_e1osj5sAAAA
{
  roomcode: 'JBYK',
  gamesocketid: 'Fe9o3x5-_e1osj5sAAAA',
  players: [ { nickname: 'Sebastiaan Phone', id: 'Fe9o3x5-_e1osj5sAAAA' } ]
}
made socket connection:sZFzMaIow5TVCf4dAAAC
Fe9o3x5-_e1osj5sAAAA
player Sebastiaan Browser joined room JBYK with socket ID Fe9o3x5-_e1osj5sAAAA
{
  roomcode: 'JBYK',
  gamesocketid: 'Fe9o3x5-_e1osj5sAAAA',
  players: [
    { nickname: 'Sebastiaan Phone', id: 'Fe9o3x5-_e1osj5sAAAA' },
    { nickname: 'Sebastiaan Browser', id: 'Fe9o3x5-_e1osj5sAAAA' }
  ]
}

Ради завершенности я добавлю другие стороны: приложение. js: 

//Set up express
var express = require('express');

//Set up socket.io
var socket = require('socket.io')//({transports: ['websocket'],});

//create an express app to talk to
var app = express();

//Include the controller
var zoomFriendsController = require('./controllers/zoomFriendsController');

//set up view-template engine
app.set('view engine', 'ejs');

//allow static files
app.use(express.static('./public'));

//listen to a port and start the server
var server = app.listen(4000);
console.log('listening to port 4000');

// Socket Setup
var io = socket(server);

//fire the controller
zoomFriendsController(app,io);

rooms.e js

<!DOCTYPE html>
<html>
  <head>
    <title>Todo List</title>
    <script
      src="https://code.jquery.com/jquery-3.5.0.min.js"
      integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
      crossorigin="anonymous"></script>
    <link href="/assets/styles.css" rel="stylesheet" type="text/css" />
    <script src="/assets/zoomFriendsAjax.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.js"></script>
  </head>
  <body>
    <script src="/assets/sockets.js"></script>
    <h2>Welcome To ZoomFriends</h2>

    <div id="pagecontent">
      <div id="serverform">
        <form>
          <label for="servercode"><strong>Server Code:</strong></label>
          <input type="text" id="servercodeinput" name="servercode" placeholder="Insert your server code here..." required>
          <label for="nickname"><strong>Your Nickname</strong></label>
          <input type="text" id="nickname" name="nickname" placeholder="Insert your nickname here..." required>
          <button type=submit>join room</button>
        </form>
      </div>
      <div id="connpage">
        <h2>Connected to server</h2>
        <button id=startgame>Start Game if all players have joined!</button>
      </div>
      <div id="gamepage">
        <h2>Game is Started</h2>
      </div>
    </div>
  </body>
</html>

zoomFriends Ajax. js

$(document).ready(function(){


  $('#serverform').on('submit', function(){

      var player = $('input[type="text"]#nickname');
      var room = $('input[type="text"]#servercodeinput');
      var joindata = {player: player.val(), room: room.val().toUpperCase()};

      $.ajax({
        type: 'POST',
        url: '/button',
        data: joindata,
        success: function(data){
          //do something with the data via front-end framework
          //location.reload();
          //alert('button pressed');

          serverconnected();

        }
      });




      return false;

  });

  $('#startgame').on('click', function(){
    //alert('button pressed');
    var started = true;

    $.ajax({
      type: 'POST',
      url: '/start',
      data: started,
      success: function(data){
        //do something with the data via front-end framework
        //location.reload();
        gamestarted();

      }
    });

    return false;
  });

  function serverconnected(){
    $('#connpage').show();
    $('#serverform').hide();
  }

  function gamestarted(){
    alert('gamestarted function happening');
    $('#gamepage').show();
    $('#connpage').hide();
  }

  function nosuchroom(){
    alert('Wrong Room Name');
  }

});

стилей. css

body{
    background: #0d1521;
    font-family: tahoma;
    color: #989898;
    text-align: center;
}

#todo-table{
    position: relative;
    width: 95%;
    background: #090d13;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

#todo-table form:after{
    margin: 0;
    content: '';
    display: block;
    clear: both;
}

#connpage{
    display: none;
}

#gamepage{
    display: none;
}
#servercodeinput{
    text-transform: uppercase;
}

input::placeholder {
  font-style: italic;
}

input[type="text"]{
    width: 100%;
    padding: 20px;
    background:#181c22;
    border: 0;
    float: left;
    font-size: 20px;
    color: #989898;
    text-align: center;
}

label{
    width: 100%;
    padding: 20px;
    background:#23282e;
    border: 0;
    float: left;
    font-size: 20px;
    color: #989898;
    text-align: center;
}

button{
    padding: 20px;
    width: 100%;
    float: left;
    background: #23282e;
    border: 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-size: 80px;
}

ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    font-family: arial;
    font-size: 20px;
    cursor: pointer;
    letter-spacing: 1px;
}

li:hover{
    text-decoration: line-through;
    background: rgba(0,0,0,0.2);
}

h1{
    background: url(/assets/logo.png) no-repeat center;
    margin-bottom: 0;
    text-indent: -10000px;
    text-align: center;
}

сокетов. js

//make connection
var socket = io.connect('95.97.158.61:4000');

и, наконец, полный ZoomFriendsController. js: 

var bodyParser = require('body-parser');
var mongoose = require('mongoose');

//Connect to database
mongoose.connect('mongodb+srv://SebastiaanVW:Test1234@todo-m1zp6.mongodb.net/test?retryWrites=true&w=majority', { useNewUrlParser: true , useUnifiedTopology: true })

//Create a schema - this is a blueprint
var roomSchema = new mongoose.Schema({
  room: String
  //players: Array
});

//create a model
var Rooms = mongoose.model('Room', roomSchema)

var urlencodedParser = bodyParser.urlencoded({extended: false});

//Start Functions
module.exports = function(app,io){

var rooms = [];
var myroomindex = -1;

//Check if socket is connected
io.on('connection',function(socket){
    console.log('made socket connection:'+socket.id);


      //if submit button is pressed on the login form
      app.post('/button', urlencodedParser, function(req, res){
      console.log(socket.id);
      //put the player data in message variable
      //var message = req.body.player;
      //check if a roomcode exists with the entered roomcode
      var found = rooms.some(el => el.roomcode === req.body.room);
      //if it exists
      if (found){
        //find the index in the room array of that room
        var targetindex = rooms.findIndex(element => element.roomcode === req.body.room);
        //send a message to that room in unity that you want to join
        io.to(rooms[targetindex].gamesocketid).emit('joinroom', {player: req.body.player, room: req.body.room, socket: socket.id});
        //add the player to the players array of that room
        rooms[targetindex].players.push({nickname: req.body.player, id: socket.id});
        //log the addition of the player to the console
        console.log('player ' + req.body.player + ' joined room ' + req.body.room + ' with socket ID ' + socket.id);
        //Log the room itself to the console
        console.log(rooms[targetindex]);
        //send a response with the data. to tell you successfully added the player to ajax
        res.json(rooms[targetindex]);
      } else {
        console.log('room not found');
        res.json(rooms[targetindex]);
      }
    });

    //if submit is pressed on the startgame button
    app.post('/start', urlencodedParser, function(req, res){
        console.log('game started');
        var goingwell = true;
        io.to(rooms[myroomindex].gamesocketid).emit('gamestarted',{started: true});
        rooms[myroomindex].players.forEach(function(item,i){
          var tempsocket = rooms[myroomindex].players[i].socket
          console.log(tempsocket);
          io.to(tempsocket).emit('gamestarted',{started: true});
        });
        res.json(goingwell);
    });

    socket.on('createroom',function(data){
      JSON.stringify(data);
      console.log('Game with socket id ' + socket.id + ' created a room with room code ' + data.roomcode );
      var players = [];
      rooms.push({roomcode: data.roomcode, gamesocketid: socket.id, players: players});
      console.log(rooms);
      //console.log('room code ' + RoomJSON.roomcode);
    });

    socket.on('destroyroom',function(data){
      JSON.stringify(data);
      console.log('Destroy a room with room code ' + data.roomcode );
      rooms = rooms.filter(function(value){
        return value.roomcode !== data.roomcode;
      });
    });

    socket.on('gamestarted',function(data){
        //res.render('gamestarted');
        console.log('recieved gamestarted');
    });
});



app.get('/', function(req, res){
  res.render('rooms');
});

};

Я знаю, что там есть много вещей, которыми я еще не пользуюсь, а также некоторые вещи, которые не будут работать, например, значение myroomindex. Но сейчас мне нужно решить проблема с сокетом. В основном все мои игроки получают одинаковый идентификатор сокета в моем массиве. Спасибо за просмотр!

1 Ответ

1 голос
/ 28 апреля 2020

Вы не можете поместить app.post('/button', ...) внутрь io.on('connection', ...). Не могу спроектировать это таким образом. Это означает, что каждый раз, когда вы получаете новое соединение с socket.io, вы добавляете дополнительный дубликат обработчика app.post(). Затем, в любое время, когда этот маршрут будет достигнут, они ВСЕ будут бороться за маршрут, и победит только первый, который был установлен, и, таким образом, он всегда будет использовать первый когда-либо подключенный socket.id независимо от того, какой клиент отправит запрос POST.

Вы должны помнить, что app.xxx() регистрирует маршруты для ВСЕХ пользователей, и они постоянны для жизни вашего сервера. Они не только для пользователя, который только что подключился к socket.io.

Вместо этого вам нужно переместить app.post() за пределы io.on('connection, ...), и вот несколько вариантов:

  1. Отправьте socket.id от клиента с данными POST (не особенно желательно, потому что они могут быть подделаны).
  2. Получите его из socket.io cook ie (если можете).
  3. Сохраните его в кулинарии ie при подключении к разъему socket.io, и вы сможете получить его от этого повара ie, когда получите app.post()
  4. Не используйте Форма сообщения. Просто отправьте данные в сообщении socket.io, и тогда вы уже будете знать, какой это сокет.

Мой любимый, вероятно, # 4.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...