Socket.IO 和复杂 JSON 与 Node.js、jQuery

Question

我在这方面遇到了很多麻烦。我试图做到这一点，以便当我移动方形 div 时，该 div 的位置通过 Socket.IO 中继到另一个页面，以便 div 实时移动。唯一的问题是我不知道如何做到这一点！ http://socket.io 上的文档让我很困惑。

我的 jQuery 代码：

$(document).ready(function() {
    $("#mydiv").draggable().mousemove(function(){
        var coord = $(this).position();
        $("#left").val(coord.left);
        $("#top").val(coord.top);
    });
});

html:

X: <input type="text" value="50" id="left"/>
Y: <input type="text" value="50" id="top"/>

<div id="element"></div>

​

​我什至不知道从哪里开始使用socket.io，请帮助！

非常感谢！

Answer 1

Socket.IO 由两部分组成：

1. 可以从客户端发送和接收数据的服务器程序
2. 可以连接到Socket.IO服务器并发送和接收数据的客户端脚本

所以，首先，您需要一台服务器。这是一个侦听端口8080 的端口，当客户端连接时，它等待来自它的receive_position 事件，当它收到一个时，通过update_position 事件将该位置广播给所有其余连接的客户端。

还有一些代码可以在访问根 URL (/) 时提供 index.htm 文件。这段代码大部分来自 Socket.IO“如何使用”页面；如果非 Socket.IO 代码没有任何意义，您可能需要复习一下 Node.js 基础知识。

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')

app.listen(8080);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

var lastPosition = { x: 0, y: 0 }; // whatever default data

io.sockets.on('connection', function (socket) {
  socket.emit('update_position', lastPosition);
  socket.on('receive_position', function (data) {
     lastPosition = data;
     socket.broadcast.emit('update_position', data); // send `data` to all other clients
  });
});

现在您的服务器已经设置好了，您需要一些客户端脚本来发送和接收 div 的位置。将此代码放入您的 index.htm 文件中。

<script src="/socket.io/socket.io.js"></script>
<script>
  $(document).ready(function() {
    var socket = io.connect();
    socket.on('update_position', function (data) {
      var x = data.x;
      var y = data.y;
      // jquery code to move div here
    });

    $("#mydiv").draggable().mousemove(function(){
      var coord = $(this).position();
      $("#left").val(coord.left);
      $("#top").val(coord.top);
      socket.emit('receive_position', { x: coord.left, y: coord.top });
    });
  });
</script>

此代码在拖动 div 时发送receive_position 事件；服务器获取此事件，并向所有其他客户端发送具有相同 x 和 y 值的update_position 事件；当他们收到这些数据时，他们会更新 div。

希望这有助于您入门；如果您有任何问题，请在 cmets 中告诉我。