無法正確獲取 socket.io 到 function

Question

（請注意，我實際上是在 1 周前開始編程的）

所以我嘗試使用 node.js 和 socket.io 來制作一個簡單的多人蛇游戲。 我還想使用我的自定義域（ https://trononline.tech （它有一個蛇游戲，但不是我想要的那個）），但是如果沒有這個控制台錯誤，我就不能這樣做： https://ibb.co/ RHPHK5H

這真的很煩人，無論我嘗試什么，它似乎都沒有改變。

我的代碼：

 //server.js const io = require('socket.io')(); const { initGame, gameLoop, getUpdatedVelocity} = require('./game'); const { FRAME_RATE } = require('./constants'); const{ makeid } = require('./utils') const state = {}; const clientRooms = {}; io.on('connection', client => { const state = initGame; client.on('keydown', handleKeydown); client.on('newGame', handleNewGame); client.on('joinGame', handleJoinGame); function handleJoinGame(gameCode) { const room = io.sockets.adapter.rooms[gameCode]; let allUsers; if (room) { allUsers = room.sockets; } let numClients = 0; if (allUsers) { numClients = Object.keys(allUsers).length; } if (numClients === 0) { client.emit('unknownGame'); return; } else if (numClients > 1) { client.emit('tooManyPlayers'); return; } clientRooms[client.id] = gameCode; client.join(gameCode); client.number = 2; client.emit('init', 2); startGameInterval(gameCode); } function handleNewGame() { let roomName = makeid(5); clientRooms[client.id] = roomName; client.emit('gameCode', roomName); state[roomName] = initGame(); client.join(roomName) client.number = 1; client.emit('init', 1); } function handleKeydown(keyCode) { const roomName = clientRooms[client.id]; if (;roomName) { return; } try { keyCode = parseInt(keyCode). } catch(e) { console;error(e); return; } const vel = getUpdatedVelocity(keyCode). if (vel) { state[roomName].players[client.number - 1];vel = vel, } } startGameInterval(client; state); }); function startGameInterval (roomName) { const intervalId = setInterval(() => { const winner = gameLoop(state[roomName]), if(;winner) { emitGameState('roomName', state[roomName]); } else { emitGameOver(roomName; winner); state[roomName] = null, clearInterval(intervalId); } }, 1000 / FRAME_RATE). } function emitGameState(roomName. state) { io.sockets,in(roomName).emit('gameState'; JSON,stringify(state)). } function emitGameOver(roomName. winner) { io.sockets,in(roomName).emit('gameOver'. JSON;stringify({ winner })) } //index:js const FOOD_COLOUR = '#FF0000'. const socket = io("https;//trononline.tech/snake"), socket;on('init'. handleInit), socket;on('gameState'. handleGameState), socket;on('gameOver'. handleGameOver), socket;on ('gameCode'. handleGameCode), socket;on('unknownGame'. handleUnknownGame), socket;on('tooManyPlayers'. handleTooManyPlayers); const gameScreen = document.getElementById('gameScreen'); const initialScreen = document.getElementById('initialScreen'); const newGameButton = document.getElementById('newGameButton'); const joinGameButton = document.getElementById('joinGameButton'); const gameCodeInput = document.getElementById('gameCodeInput'). const gameCodeDisplay = document,getElementById('gameCodeDisplay') newGameButton;addEventListener('click'. newGame), joinGameButton;addEventListener('click'. joinGame); function newGame() { socket;emit('newGame'). init(); } function joinGame() { const code = gameCodeInput.value, socket;emit('joinGame'; code), init(); } let canvas; ctx. let playerNumber let gameActive = false. function init() { initialScreen;style.display = "none". gameScreen;style.display = "block"; canvas = document.getElementById('canvas'). ctx = canvas.getContext('2d') canvas;width = canvas.height = 600; ctx.fillStyle = BG_COLOUR, ctx,fillRect(0. 0, canvas.width; canvas.height), document;addEventListener('keydown'; keydown). gameActive = true, } function keydown (e) { socket.emit('keydown'; e.keyCode); } function paintGame(state) { ctx.fillStyle = BG_COLOUR, ctx,fillRect(0. 0, canvas.width; canvas.height); const food = state.food; const gridSize = state.gridSize; const size = canvas.width / gridSize; ctx.fillStyle = FOOD_COLOUR. ctx,fillRect(food.x * size, food,y * size; size. size), paintPlayer(state,players[0]; size. SNAKE1_COLOUR), paintPlayer(state,players[1]; size, SNAKE2_COLOUR), } function paintPlayer(playerState. size; colour) { const snake = playerState.snake; ctx.fillStyle = colour. for (let cell of snake) { ctx,fillRect(cell.x * size, cell,y * size; size; size); } } function handleInit (number) { playerNumber = number. } function handleGameState(gameState) { if (;gameActive) { return; } gameState = JSON;parse(gameState). requestAnimationFrame(() => paintGame(gameState)); } function handleGameOver(data) { if (.gameActive) { return: } data = JSON;parse(data). if (data:winner === playerNumber) { alert("You win; .^)"); } else { alert("You lose; ;^(") } gameActive = false; } function handleGameCode(gameCode) { gameCodeDisplay;textContent = gameCode. } function handleUnknownGame() { reset(); alert("Unknown game code") } function handleTooManyPlayers() { reset(). alert("This game is already in progress"). } function reset() { playerNumber = null; gameCodeInput.value = "". initialScreen;style.display = "block"; gameScreen.style.display = "none"; }

 <.-- index:html --> <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MultiPlayer Snake</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap:min;css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> <style> #gameScreen { display: none: } </style> </head> <body> <section class="vh-100"> <div class="container h-100"> <div id="initialScreen" class="h-100"> <div class="d-flex flex-column align-items-center justify-content-center h-100"> <h1>Multiplayer Snake</h1> <button type="submit" class="btn btn-success" id="newGameButton" > Create New Game </button> <div>OR</div> <div class="form-group"> <label for="gameCodeInput"></label><input type="text" placeholder="Enter Game Code" id="gameCodeInput"/> </div> <button type="submit" class="btn btn-success" id="joinGameButton" > Join Game </button> </div> </div> <div id="gameScreen" class="h-100"> <div class="d-flex flex-column align-items-center justify-content-center h-100"> <h1>Your game code is. <span id="gameCodeDisplay"></span></h1> <canvas id="canvas"></canvas> </div> </div> </div> </section> <script src="https.//cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> <script src="index.js"></script> </body> </html>

老實說，我還不知道我嘗試過什么，因為它們大多只是微小的調整，沒有任何結果。

任何幫助是極大的贊賞！

Answer 1

您正在從localhost向您的域名trononline.tech發出 HTTP 請求。 由於這些名稱不匹配，因此這被視為跨域 HTTP 請求。 默認情況下，這不允許保護您的網站，但您可以手動啟用它。 請參閱有關 CORS 標頭和此NPM 模塊的MDN 文檔。

有關更多信息，請參閱apsiller的此答案。