本文介绍了Socket.IO和带有Node.js,jQuery的复杂JSON的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

对此我有很多麻烦.我正在尝试使其移动方形div时,该div的位置通过Socket.IO中继到另一页,以便div实时移动.唯一的问题是我不知道如何执行此操作! http://socket.io 上的文档只是让我感到困惑.

I'm having a ton of trouble with this. I'm trying to make it so that when I move a square-div, the position of that div is relayed to another page via Socket.IO, so that the div moves in realtime. Only problem is that I don't have a clue how to do this! The documentation over at http://socket.io only confused me.

我的jQuery代码:

My jQuery code:

$(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,请帮忙!

​I don't even know where to start with socket.io, please help!

非常感谢!

推荐答案

Socket.IO由两部分组成:

Socket.IO consists of two parts:

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

因此,首先,您需要一台服务器.这是一个侦听端口8080的端口,当客户端连接时,它等待来自端口的receive_position事件,当它获得一个端口时,通过update_position事件将该位置广播给所有其他已连接的客户端.

So, first of all, you need a server. Here's one that listens on port 8080 and when a client connects, it waits for an receive_position event from it, and when it gets one, broadcasts that position to all the rest of the connected clients via an update_position event.

当访问根URL(/)时,还有一些代码可为index.htm文件提供服务.这些代码大部分来自Socket.IO如何使用"页面;如果非Socket.IO代码没有任何意义,则您可能希望重新了解Node.js的基础知识.

There is also some code to serve an index.htm file when the root URL (/) is visited. Most of this code is from the Socket.IO "How to Use" page; if the non-Socket.IO code doesn't make any sense, you may want to brush up on your Node.js fundamentals.

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文件中.

Now that your server is set up, you need some client-side scripting to send and receive the positions of the div. Put this code in your index.htm file.

<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.

This code sends a receive_position event when the div is dragged; the server gets this event, and sends an update_position event with the same x and y values to all other clients; when they receive this data, they update the div.

希望这可以帮助您入门;如果您有任何疑问,请在评论中让我知道.

Hope this helps get you started; let me know in the comments if you have any questions.

这篇关于Socket.IO和带有Node.js,jQuery的复杂JSON的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-05 12:56