2017-02-02 1 views
0

여기에 소스 코드입니다 내 자바 스크립트 개체의 코드를 수정하거나 방금 말해줘 어디서부터 시작 해야할지 여기에서 소켓을 사용하려면 초보자 단계의 NodeJs하지만 자습서가 없습니다. 소켓의 경우 혼란 스럽습니다. 어떻게하면 좌표를 소켓에 보내고 해당 좌표에 대한 응답을 작성할 수 있습니까?간단한 예제가 필요합니다 소켓으로 얻을 수있는 좌표를

<!DOCTYPE html> 
<html> 
<head> 
<title>GameTest</title> 
</head> 
<body> 
<style> 
#img{ 
position:absolute; 
top:0px; 
left:0px; 
width:50px; 
height:50px; 
} 
</style> 
<img id="img" src="hand.png"> 
<script> 
var player=document.getElementById('img'); 
var x=0; 
var y=0; 
function movePlayer(event){ 
if(event.keyCode==39){ 
    x+=2; 
player.style.left=x+'px'; 
} 
if(event.keyCode==37){ 
    x-=2; 
    player.style.left=x+'px'; 
} 
if(event.keyCode==38){ 
    y-=2; 
    player.style.top=y+'px'; 
} 
if(event.keyCode==40){ 
    y+=2; 
    player.style.top=y+'px'; 
} 
if(event.keyCode==40&&event.keyCode==37){ 
    y-=2; 
    x+=2; 
    player.style.top=y+'px'; 
    player.style.lef=x+'px'; 
} 
    getCoordinates(player); 
} 
document.addEventListener('keydown',movePlayer); 
function getCoordinates(el){ 
while(el&&isNaN(el.offsetLeft)&&isNaN(el.offsetTop)){ 
x+=el.offsetLeft-el.scrollLeft; 
y+=el.offsetTop-el.scrolltop; 
el=el.offsetParent; 
} 
console.log({top:y,left:x}); 
} 
</script> 
</body> 
</html> 

답변

2

당신이 getCoordinates 또는 업데이트 좌표를 호출 할 수 있습니다 socket.io

npm install socket.io 

이 또는 addEventListener index.html을

<script src="/socket.io/socket.io.js"></script> 
<script> 
    var socket = io('http://localhost'); 
document.addEventListener('keydown',socket.emit({x:3,y:10})); 
    socket.on('coordinates', function (data) { 
    console.log(data); 
    //use data.coordinates here 

    }); 
</script> 

에서 server.js

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

app.listen(80); 

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); 
    }); 
} 

io.on('connection', function (socket) { 

    socket.on('coordinates', function (data) { 
    socket.emit('coordinates', data); 
    }); 
}); 

를 만들고, 설치하고 당신은 n socket.emit (// cordinatees //) 호출;

+0

감사합니다. 로트 브로 <3 –

관련 문제