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.

Существует также код для подачи файла index.htm при посещении корневого URL (/). Большая часть этого кода находится на странице Socket.IO «Как использовать»; если код nonSocket.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 
    }); 
}); 

Теперь, когда ваш сервер настроен, вам потребуются некоторые клиентские сценарии для отправки и получения позиции дел. Поместите этот код в ваш файл 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> 

Этот код отправляет receive_position событие, когда DIV тащится; сервер получает это событие и отправляет событие update_position с теми же значениями x и y всем остальным клиентам; когда они получают эти данные, они обновляют div.

Надеюсь, что это поможет вам начать работу; сообщите мне в комментариях, если у вас есть какие-либо вопросы.