Fatal编程技术网
  • javascript/
  • 访问映射时超出Javascript最大调用堆栈大小错误

访问映射时超出Javascript最大调用堆栈大小错误

javascript node.js express socket.io

访问映射时超出Javascript最大调用堆栈大小错误,javascript,node.js,express,socket.io,Javascript,Node.js,Express,Socket.io,我正在使用socket.io进行一个项目。当我单击一个按钮时，我应该被添加到存储在地图中的特定服务器。当我单击按钮时，调用被发送到服务器，但随后我得到一个最大调用堆栈大小超出错误。我把范围缩小到我的sendToServer函数 客户端js文件 var socket; let id; let state = "MENU"; var menu, serverlist, game; let servers; var isMobile; var dispX, dispY; var touch = f

我正在使用socket.io进行一个项目。当我单击一个按钮时，我应该被添加到存储在地图中的特定服务器。当我单击按钮时，调用被发送到服务器，但随后我得到一个最大调用堆栈大小超出错误。我把范围缩小到我的
sendToServer
函数

客户端js文件

var socket;
let id;
let state = "MENU";
var menu, serverlist, game;
let servers;
var isMobile;

var dispX, dispY;

var touch = false;

function setup() {
  declare();
  createCanvas(dispX, dispY);
  menu = new Menu();
  game = new Game();
  serverlist = new List();
  console.log("Hello World!");
  socket = io.connect("https://hidy.glitch.me:443");
  socket.emit("start", "Hello Server!");
  id = socket.emit('getid');

  socket.on("get", function(data) {
    if (state == "SERVERLIST") {
      servers = new Map(Object.entries(data));
      serverlist.loopServers();
    }
  });

  socket.on("heartbeat", function(data) {
    console.log(data);
  });
}

function draw() {
  if (state == "GAME") {
    game.show();
  } else if (state == "SERVERLIST") {
    serverlist.show();
  } else {
    menu.show();
  }
  updateTouch();
}

function mouseClicked() {
  if (state == "MENU") {
    menu.evalClick();
  }
  if (state == "SERVERLIST") {
    serverlist.evalClick();
  }
}

function touchStarted(){
  touch = true;
  if (isMobile) {
    if (state == "MENU") {
      menu.evalClick();
    }
    if (state == "SERVERLIST") {
      serverlist.evalClick();
    }
  }
}

function updateTouch() {
  if (touch == true) {

  }
}

function touchEnded() {
  touch = false;
}

function emitToServer(func, msg) {
  socket.emit(func, msg);
}

function emitKeyValue(key, value) {
  socket.emit('create', key, value);
}

function sendToServer(sid) {
  console.log('s');
  socket.emit('addtoserver', sid, socket);
  console.log('h');
}

function declare() {
  isMobile = (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
  if (!isMobile) {
    dispX = displayWidth / 2;
    dispY = displayHeight / 2;
  } else {
    dispX = displayHeight;
    dispY = displayWidth - 109;
  }
}

function wait(ms){
   var start = new Date().getTime();
   var end = start;
   while(end < start + ms) {
     end = new Date().getTime();
  }
}
addToServer函数

    socket.on('addtoserver', function(sid, socket) {
      console.log('Adding socket to ' + servers.get(sid)); // I don't even get this message printed to console
      servers.get(sid).addClient(socket);
    });
错误为的完整类：

class List {

  constructor() {
    this.back = new Button(50, 25, 100, 50, "Menu", 30, 100, 200, 50, 170, 123, 195);
    this.clear = new Button(width - 50, 25, 100, 50, "Clear", 30, 100, 200, 50, 170, 123, 195);
    this.add = new Button(width / 2, 25, 200, 50, "Create Game", 30, 100, 200, 50, 170, 123, 195);
    this.list = [];
    this.loopServers();
    this.array = new ARList(width / 2, 100, 100, 25, this.list, 20, 30, 100, 200, 50, 170, 123, 195);
  }

  show() {
    background(83, 28, 179);
    this.back.show();
    this.clear.show();
    this.add.show();
    this.array.show();
  }

  loopServers() {
    this.list = [];
    if (servers != null) {
      this.list = Array.from(servers.keys());
      this.array = new ARList(width / 2, 100, 200, 25, this.list, 20, 30, 100, 200, 50, 170, 123, 195);
    }
  }

  evalClick() {
    if (this.back.clicked()) {
      state = "MENU";
    }
    if (this.clear.clicked()) {
      emitToServer('clear');
      this.loopServers();
    }
    if (this.add.clicked()) {
      var sid = Math.random().toString(36).substr(2, 5);
      emitToServer('create', sid);
      sendToServer(sid);
      game = emitToServer('getserver', sid);
      state = "GAME";
    }
    if (this.array.clicked() != null) {
      sendToServer(this.array.clicked().getText());
    }
  }

}
HTML文件：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
    <script src="https://cdn.JsDelivr.net/gh/bmoren/p5.collide2D/p5.collide2d.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body bgcolor="gray">
    <script src="client.js"></script>
    <script src="/menu.js"></script>
    <script src="/game.js"></script>
    <script src="/server.js"></script>
    <script src="/list.js"></script>
    <script src="/button.js"></script>
    <script src="/label.js"></script>
    <script src="/arlist.js"></script>
  </body>
</html>
要澄清的是，错误是在客户端还是在服务器上？这是因为您的代码在客户端上进行无限递归-side@JatinParmar-您可以在发布的代码中看到吗？@Bravo no，但在javascript中，这种错误是由于recursion@JatinParmar无限递归在哪里？按钮点击只触发一次，所以我不知道怎么会有无限递归。 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
    <script src="https://cdn.JsDelivr.net/gh/bmoren/p5.collide2D/p5.collide2d.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body bgcolor="gray">
    <script src="client.js"></script>
    <script src="/menu.js"></script>
    <script src="/game.js"></script>
    <script src="/server.js"></script>
    <script src="/list.js"></script>
    <script src="/button.js"></script>
    <script src="/label.js"></script>
    <script src="/arlist.js"></script>
  </body>
</html>

// Using express: http://expressjs.com/
var express = require('express');
const GameServer = require('./gameserver');

// Create the app
var app = express();
var servers = new Map();

// Set up the server
// process.env.PORT is related to deploying on heroku
var server = app.listen(process.env.PORT || window.location, listen);

// This call back just tells us that the server has started
function listen() {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Example app listening at http://' + host + ':' + port);
}

// You need to add the folders that you want to access to here
app.use(express.static('public'));
app.use(express.static('public/game'));
app.use(express.static('public/menu'));
app.use(express.static('public/serverlist'));
app.use(express.static('public/server'));
app.use(express.static('utils'));

// WebSocket Portion
// WebSockets work with the HTTP server
var io = require('socket.io')(server);

  // The heartbeat is sent to all clients every X seconds
  // We can use the heartbeat as a way to sync data among users
  // We will need 2 heartbeats, the first one from the client to the server with their data packet (we will need a way of shortening the data to a small packet to avoid loss-of-data)
  //                            the second one from the server to all clients with the data packets (we will need some way of parsing the received data)
  setInterval(heartbeat, 1000);
  setInterval(serv, 50);

  function heartbeat() {
    io.sockets.emit('heartbeat', 'Hello');
  }

  function serv() {
    io.sockets.emit('get', Array.from(servers.entries()).reduce((main, [key, value]) => ({...main, [key]: value}), {}));
  }

// Sends the user to index.html on connect
app.get("/", function(request, response) {
  response.sendFile(__dirname + "/views/view.html");
});

// Register a callback function to run when we have an individual connection
// This is run for each individual user that connects
io.sockets.on('connection',
  // We are given a websocket object in our function
  function(socket) {

    console.log("We have a new client: " + socket.id);

    socket.on('getid', function() { return socket.id });

    socket.on('start',
      function(data) {
        console.log('Received data ' + data)
      }
    );

    socket.on('update',
      function(data) {
        console.log('Updating ' + data);
      }
    );

    socket.on('create', function(id) {
      console.log('3');
      console.log("Creating server " + id);
      servers.set(id, new GameServer(id));
      console.log('d');
    });

    socket.on('getserver', function(id) {
      console.log('2');
      return servers.get(id);
    });

    socket.on('addtoserver', function(sid, socket) {
      console.log('1');
      console.log('Adding socket to ' + servers.get(sid));
      servers.get(sid).addClient(socket);
    });

    socket.on('clear', function() {
      servers = new Map();
    });

    socket.on('disconnect', function() {
      console.log("Client has disconnected");
    });
  }
);