2017-04-05 105 views
0

我有一個簡單的設置,我有一些可拖動的div,我想使用sockets.io來更新客戶端之間的位置。socket.io不接收/發送

在我的客戶(的index.html)我有:

// find the elements 
    var elements = document.getElementsByClassName('ball'), 
     labelsX = document.getElementsByClassName('coords-x'), 
     labelsY = document.getElementsByClassName('coords-y'); 

    // loop over the 3 items... 
    for (var n = elements.length; n--;) { 

     // ... augment our default options with individual `onDrag` handlers 
     var opts = { 
      onDrag: onDragFactory(n), 
      setCursor: true 
     }; 

     // ... and initialize drag for each 
     window.d = new Draggable(elements[n], opts); 
     console.log('ddd'); 
    } 

    // bind `n` to its value at iteration time 
    function onDragFactory (n) { 

     return function (element, x, y) { 

      //This doesnt seem to work 
      console.log(elements[n].style.top);  
      socket.emit('positionx', elements[n].style.top);   


      socket.on('positionx', function(positionx){ 
       elements[n].style.top= positionx.value(); 
      }); 


     } 

    } 

我的服務器則是:

var express = require('express'); 
    var path = require('path'); 
    var app = express(); 
    var http = require('http').Server(app); 
    var io = require('socket.io')(http); 

    var publicPath = path.resolve(__dirname, 'public'); 

    app.use(express.static(publicPath)); 

    app.get('/', function(req, res){ 
     res.sendFile(__dirname + '/index.html'); 
    }); 



    //Server Side Listen for an event from the client 
    io.on('connection', function(socket){ 

     socket.on('positionx', function(positionx){ 
      console.log('recieving'); 
      console.log(positionx);    

     io.emit('positionx', positionx); 
     }); 

    }); 

    http.listen(3000, function(){ 
     console.log('listening on *:3000'); 
    }); 

服務器但似乎並沒有收到任何信息。有什麼我做錯了嗎?任何幫助將非常感激!

+0

控制檯中出現什麼錯誤? – Jer

+0

@ C0dekid在控制檯中沒有錯誤,但有什麼我可以添加以查看是否有任何警告沒有明確記錄到控制檯? – masterofimps

回答

1

在您的客戶端中,您需要定義套接字。

var socket = io(); 

此外,請確保您在您的javaScript中調用socket.io之前包括socket.io-x.x.x.js。您可能已經在執行此操作,但沒有看到更多代碼就不清楚了。

+0

現在我覺得有點傻,那就是它!非常感謝 ! – masterofimps