Question

我参加了一个特色代表（多人游戏示例），并尝试编辑并将其更改为我自己的游戏。

这是我的代码：

服务器端JS

var express = require('express');
var app = express();
var serv = app.listen(1019);
var io = require('socket.io').listen(serv);
app.get('/',function(req, res) {
    res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));
serv.listen(process.env.PORT);
console.log("Server started");
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function makeid() {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (var i = 0; i < 6; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
}
var SOCKET_LIST = {};
var PLAYER_LIST = {};
var Player = function(id,username){
    var self = {
        x:250,
        y:250,
        width:50,
        height:50,
        id:id,
        color:getRandomColor(),
        username:username,
        pressingRight:false,
        pressingLeft:false,
        pressingUp:false,
        pressingDown:false, 
        maxSpd:10
    };
    self.updatePosition = function(){
        if(self.pressingRight)
            self.x += self.maxSpd;
        if(self.pressingLeft)
            self.x -= self.maxSpd;
        if(self.pressingUp)
            self.y -= self.maxSpd;
        if(self.pressingDown)
            self.y += self.maxSpd;
        if(self.x+self.width>800){
            self.x = 800-self.width;
        }
        if(self.x<0){
            self.x = 0;
        }
        if(self.y+self.height>500){
            self.y = 500-self.height;
        }
        if(self.y<0){
            self.y = 0;
        }
    };
    return self;
};
io.sockets.on('connection', function(socket){
    socket.on('start', function(data) {
        socket.emit('connected',{});
        socket.id = makeid();
        SOCKET_LIST[socket.id] = socket;
        var player = Player(socket.id,data.user);
        PLAYER_LIST[socket.id] = player;
        console.log("Player "+player.username+"(ID: " + player.id + ") has joined");
        socket.on('disconnect',function(){
            console.log("Player "+player.username+"(ID: " + player.id + ") left");
            delete SOCKET_LIST[socket.id];
            delete PLAYER_LIST[socket.id];
        });
        socket.on('keyPress',function(data){
            if(data.inputId === 'left')
                player.pressingLeft = data.state;
            else if(data.inputId === 'right')
                player.pressingRight = data.state;
            else if(data.inputId === 'up')
                player.pressingUp = data.state;
            else if(data.inputId === 'down')
                player.pressingDown = data.state;
        });
    });
});
setInterval(function(){
    var pack = [];
    for(var i in PLAYER_LIST){
        var player = PLAYER_LIST[i];
        player.updatePosition();
        pack.push({
            x:player.x,
            y:player.y,
            color:player.color
        });
    }
    for(var n in SOCKET_LIST){
        var socket = SOCKET_LIST[n];
        socket.emit('newPositions',pack);
    }
},1000/40);

客户端JS

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 800;
ctx.fillStyle = "red";
var socket = io();
socket.on('newPositions',function(data){
    ctx.clearRect(0,0,800,500);
    for(var i = 0 ; i < data.length; i++){
        ctx.fillStyle = data[i].color;
        ctx.fillRect(data[i].x,data[i].y, 50, 50);
    }
});
document.getElementById("login").onsubmit = function() {
    var username = document.getElementById("username").value;
    socket.emit('start', {user:username});
    document.body.removeChild(document.getElementById("login"));
}
document.onkeydown = function(event){
    if(event.keyCode === 68) {
        socket.emit('keyPress',{inputId:'right',state:true});
    }
    else if(event.keyCode === 83) {
        socket.emit('keyPress',{inputId:'down',state:true});
    }
    else if(event.keyCode === 65) {
        socket.emit('keyPress',{inputId:'left',state:true});
    }
    else if(event.keyCode === 87) {
         socket.emit('keyPress',{inputId:'up',state:true});
    }
};
document.onkeyup = function(event){
    if(event.keyCode === 68) {
        socket.emit('keyPress',{inputId:'right',state:false});
    }
    else if(event.keyCode === 83) {
        socket.emit('keyPress',{inputId:'down',state:false});
    }
    else if(event.keyCode === 65) {
        socket.emit('keyPress',{inputId:'left',state:false});
    }
    else if(event.keyCode === 87) {
        socket.emit('keyPress',{inputId:'up',state:false});
    }
};

HTML 的

<!DOCTYPE html>
<html>
    <head>
        <title>CubeGame</title>
        <style>
            canvas {
                border:1px solid black;
            }
            body {
                margin:0;
                padding:0;
            }
            table {
                border-collapse:collapse;
            }
        </style>
    </head>
    <body>
        <table>
           <tr colspan="2">
                <td>
                    <center>
                        <h1>Tag</h1>
                        <form id="login">
                            Username: <input id="username" required>
                            <input type="submit" value="Play">
                        </form>
                    </center>
                    <br />
                </td>
            </tr>
            <tr>
                <td>
                    <canvas id="canvas"></canvas>
                </td>
            </tr>
        </table>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
        <script type="text/javascript" src="/client/main.js"></script>
    </body>
</html>

问题在于，当我运行代码，选择用户名并启动游戏时，它会自动触发代码的socket.on('disconnect')部分。根本没有其他错误（可能是语法，但我检查过）。

你们有任何想法是什么问题吗？

Answer 1

你们有任何想法是什么问题吗？

我认为套接字断开连接是因为您的表单正在触发页面刷新... 尝试

document.getElementById("login").onsubmit = function(e) {
  e.preventDefault();
  var username = document.getElementById("username").value;
  socket.emit('start', {user:username});
  //document.body.removeChild(document.getElementById("login"));
}

node.js客户端在连接后立即断开连接

1 个答案: