1

Имеется сервер, который рассылает данные всем клиентам о координатах. Клиент получает эти данные.

Проблема в том, что после 20 сек работы у клиента начинает жутко лагать страница и вкладка виснет.

Сервер:

io.on('connection', function(socket) { // обрабатываются события коннект, дисконнект

    socket.on("moveobject", function(data){ // передвижение 
         let user = users[socket.id] || {};
         if (data.left) {
           user.x -= 5;
         }
         if (data.up) {
           user.y -= 5;
         }
         if (data.right) {
           user.x += 5;
         }
         if (data.down) {
           user.y += 5;
         }
     })
} 

setInterval(function() { // рассылка данных сервером 
   io.sockets.emit('state', users);
}, 1000 / 60);

Клиент:

    <script>
    let moveobject = {
        up: false,
        down: false,
        left: false,
        right: false
    };

    let socket = io();
    socket.on('state', function(data) {
        var canvas = document.getElementById('canvas');
        canvas.width = 800;
        canvas.height = 600;
        var context = canvas.getContext('2d');
        socket.on('state', function(users) {
          context.clearRect(0, 0, 800, 600);
          for (var id in users) {
            let user = users[id];
            context.fillStyle = user.color;
            context.beginPath();
            context.arc(user.x, user.y, 10, 0, 2 * Math.PI);
            context.fill();
          }
        });
    });

    $(document).on('keydown', function(e){
        switch (e.keyCode) {
            case 65: // A
              moveobject.left = true;
              break;
            case 87: // W
              moveobject.up = true;
              break;
            case 68: // D
              moveobject.right = true;
              break;
            case 83: // S
              moveobject.down = true;
              break;
        }
    })
    
    $(document).on('keyup', function(e){
        switch (event.keyCode) {
            case 65: // A
              moveobject.left = false;
              break;
            case 87: // W
              moveobject.up = false;
              break;
            case 68: // D
              moveobject.right = false;
              break;
            case 83: // S
              moveobject.down = false;
              break;
        }
    })

    socket.emit('new user');
    setInterval(function() {
      socket.emit('moveobject', moveobject);
    }, 1000 / 60);

</script>

1 ответ 1

3

60 раз в секунду ваш клиентский обработчик state создаёт новый обработчик state (которому в результате замыканий доступен canvas из предыдущего вызова)

socket.on('state', function(data) {
  var canvas = document.getElementById('canvas');
  socket.on('state', function(users) {
    ...
  });
});

И всё это месиво контекстов и обработчиков ворочается, рисует пути, делает заливки, живёт в вашей памяти, прирастая на 60 проблем в секунду.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.