Socket.IO和复杂的JSON以及Node.js、jQuery_Jquery_Node.js_Socket.io

Socket.IO和复杂的JSON以及Node.js、jQuery

jquery node.js socket.io

Socket.IO和复杂的JSON以及Node.js、jQuery,jquery,node.js,socket.io,Jquery,Node.js,Socket.io,我在这方面遇到了很多麻烦。我试图使它在移动方形div时，该div的位置通过Socket.IO中继到另一个页面，以便div实时移动。唯一的问题是我不知道该怎么做！那份文件翻过来只会把我弄糊涂我的jQuery代码： $(document).ready(function() { $("#mydiv").draggable().mousemove(function(){ var coord = $(this).position(); $("#left").val

我在这方面遇到了很多麻烦。我试图使它在移动方形div时，该div的位置通过Socket.IO中继到另一个页面，以便div实时移动。唯一的问题是我不知道该怎么做！那份文件翻过来只会把我弄糊涂

我的jQuery代码：

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

html:

X:
Y:

我甚至不知道从哪里开始使用socket.io，请帮忙

多谢各位

Socket.IO由两部分组成：

可以从客户端发送和接收数据的服务器程序

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

所以，首先，你需要一个服务器。这里有一个监听端口

的程序，当客户端连接时，它等待来自它的

receive\u position

事件，当它收到一个事件时，通过

update\u position

事件将该位置广播给所有其他连接的客户端

当访问根URL（

）时，还有一些代码可以为

index.htm

文件提供服务。大部分代码来自Socket.IO的“如何使用”页面；如果non-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>


$（文档）.ready（函数（）{
var socket=io.connect（）；
socket.on（'update_position'，函数（数据）{
var x=data.x；
var y=data.y；
//将div移到此处的jquery代码
});
$（“#mydiv”）.draggable（）.mousemove（函数（）{
var coord=$（this.position（）；
$（“#左”）.val（左坐标）；
$（“#top”）.val（coord.top）；
emit（'receive_position'，{x:coord.left，y:coord.top}）；
});
});

当拖动div时，此代码发送一个

接收位置

事件；服务器获取此事件，并向所有其他客户端发送具有相同x和y值的

update\u position

事件；当他们收到这些数据时，他们会更新div

希望这能帮助你开始；如果您有任何问题，请在评论中告诉我。