时间戳

首页 > 解决方案 > 为什么第二个浏览器不更新我的图像的位置？

javascript - 为什么第二个浏览器不更新我的图像的位置？

问题描述

我为一个班级项目制作了一个跳棋游戏。我希望能够与使用 socket.io 的其他人一起玩，但由于某种原因，图像没有在第二个浏览器上更新。

服务器.js

app.use(express.static(__dirname + "/static"));
app.set("views", __dirname + "/views");
app.set("view engine", "ejs");

io.sockets.on('connection', function (socket) {
 console.log("Working now?");
 socket.broadcast.emit('update_position', lastPosition);
 socket.on('receive_position', function (data) {
 lastPosition = data;
 socket.broadcast.emit('update_position', data);
}); 
});

索引.ejs

    <script>

    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }

    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    }
  </script>
</head>

<body>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    $(document).ready(function () {
      var socket = io.connect();
      console.log("Hello");
      socket.on('update_position', function (data) {
        $(data.id).css('left', data.x);
        $(data.id).css('top', data.y);
        var x = data.x;
        var y = data.y;
        console.log(data);
        // jquery code to move div here
      });
      $(".drag").draggable().click(function () {
        var coord = $(this).offset();
        $("#left").val(coord.left);
        $("#top").val(coord.top);
        console.log(coord);
        socket.emit('receive_position', { x: coord.left, y: coord.top, id: 
  this.id });
      });
    });
  </script>

每当我单击并按住图像时，我也会收到此错误。但是，我最终能够移动图像并将它们放在板上。

未捕获的类型错误：无法读取未定义的属性“setData”

标签： javascriptexpresssocket.iomean-stack

解决方案

推荐阅读