首先要配置node.js 的運(yùn)行環(huán)境
1魄懂、在app.js中設(shè)置引入socket.io文件
var express = require('express');
var app = express();
var server = require('http').Server(app);(自己添加的)
var io = require('socket.io')(server);(自己添加的)
2溶耘、在HTML中定義一個(gè)塊元素
【html代碼片段】
<div id="box"></div>
【js代碼片段】
var socket = io.connect('http://localhost:9000');
var old = {};
var oldX = box.offsetLeft;
var oldY = box.offsetTop;
box.onmousedown = function(e){
var elX = e.clientX;
var elY = e.clientY;
oldX = box.offsetLeft;
oldY = box.offsetTop;
socket.emit("pos",{"elX":elX,"elY":elY});
document.onmousemove = function(e){
var l = e.clientX;
var t = e.clientY;
socket.emit("cur",{"l":l,"t":t})
}
document.onmouseup = function(){
document.onmousedown = null;
document.onmousemove = null;
}
}
socket.on("position",function(data){
old = data;
})
socket.on("curpos",function(data){
box.style.left = oldX+data.l-old.elX + "px"
box.style.top = oldY+data.t-old.elY + "px"
})
3谐区、在app.js中
io.on('connection', function (socket) {
socket.on("pos",function(data){
io.emit("position",data)
});
socket.on("cur",function(data){
io.emit("curpos",data)
})
});
server.listen(9000);
