socket.io.js пути в nodejs с локальным хостом в окнах

Question

я установил Node.js v0.10.31 и NPM v1.4.3, а также установленный узел -UUID, socket.io и экспресс

Я пытаюсь создать простое приложение для чата, но путь socket.io, который я назвал, был настолько запутанным. мой установлен путь socket.io является D: \ Program Files \ nodejs \ node_modules \ socket.io мои файлы проекта в локальном хосте в XAMPP (для PHP)

перешедших с учебников ссылки /socket.io/ socket.io.js но моя ссылка в D: \ Program Files \ nodejs \ node_modules \ socket.io \ node_modules \ socket.io-клиент \ socket.io.js

, как я могу использовать, чтобы включить <script src="/socket.io/socket.io.js"></script> to ??

У меня есть два файла в моем projectand я скопировал node_modules папку проекта папку из nodejs

app.js

var constants = { court: { width: 600, height: 600 }, 
        paddle: { width: 50, height: 15, delta: 3 }, 
        ball: { radius: 10, deltaLeft: 3, deltaTop: 2, interval: 30 } 
       };       

var state = { paddles: {}, 
       ball: { left: 0, top: 0 }, 
       bottomPaddle: 0, 
       topPaddle: 0, 
       leftPaddle: 0, 
       rightPaddle: 0 
      }; 

var serverState = { intervalId: 0, 
        connections: 0 
        }; 

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

app.listen(80); 

function handler (req, res) { 
    fs.readFile(__dirname + '/index.html', 
     function readfile_callback(err, data) { 
      if (err) { 
       res.writeHead(500); 
       return res.end('Error loading index.html'); 
      } 
      res.writeHead(200); 
      res.end(data); 
     } 
    ); 
}; 

function calculateBallPosition() { 
    var left = state.ball.left + constants.ball.deltaLeft; 
    var top = state.ball.top + constants.ball.deltaTop; 

    if (left >= constants.court.width) { 
     left = constants.court.width; 
     constants.ball.deltaLeft = -constants.ball.deltaLeft; 
    } else if (left <= 0) { 
     left = 0; 
     constants.ball.deltaLeft = -constants.ball.deltaLeft; 
    } 
    if (top + constants.ball.radius >= constants.court.height - constants.paddle.height) { 
     if (state.bottomPaddle && 
      left > ((state.paddles[state.bottomPaddle]/100) * constants.court.width - constants.paddle.width/2) && 
      (left < ((state.paddles[state.bottomPaddle]/100) * constants.court.width + constants.paddle.width/2))) { 
      top = constants.court.height - constants.paddle.height - constants.ball.radius; 
      constants.ball.deltaTop = -constants.ball.deltaTop; 
     } else { 
      //TODO: #1 
      left = constants.court.width/2; 
      top = constants.court.height/2;  
     } 
    } else if (top <= 0) { 
     top = 0; 
     constants.ball.deltaTop = -constants.ball.deltaTop; 
    } 
    state.ball.left = left; 
    state.ball.top = top; 
}; 

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

    var paddleAdded = false; 
    if (!state.bottomPaddle) { 
     state.bottomPaddle = socket.id; 
    } else if (!state.topPaddle) { 
     state.topPaddle = socket.id; 
    } else if (!state.leftPaddle) { 
     state.leftPaddle = socket.id; 
    } else if (!state.rightPaddle) { 
     state.rightPaddle = socket.id; 
    } else { 
     // placeholder for fifth player 
     return; 
    } 

    state.paddles[socket.id] = 50; 

    socket.emit('environment', { court: { width: constants.court.width, 
              height: constants.court.height, 
             }, 
           paddle: { width: constants.paddle.width, 
              height: constants.paddle.height, 
              delta: constants.paddle.delta 
             }, 
           ball: { radius: constants.ball.radius }, 
           player: { id: socket.id } 
    }); 

    if (!serverState.intervalId) { 
     serverState.intervalId = setInterval(function(){ 
      calculateBallPosition(); 
     }, constants.ball.interval); 
    } 

    socket.intervalId = setInterval(function(){ 
     socket.emit('ball', { position: { left: state.ball.left, top: state.ball.top } }); 
     socket.emit('paddles', { positions: state.paddles, sides: {bottom: state.bottomPaddle, top: state.topPaddle, left: state.leftPaddle, right: state.rightPaddle }}); 
    }, constants.ball.interval); 

    socket.on('paddle', function (data) { 
     state.paddles[socket.id] = data.left; 
    }); 

    socket.on('disconnect', function() { 
     serverState.connections--; 
     clearInterval(socket.intervalId); 
     delete state.paddles[socket.id]; 

     if (state.bottomPaddle == socket.id) 
      state.bottomPaddle = 0; 
     else if (state.topPaddle == socket.id) 
      state.topPaddle = 0; 
     else if (state.leftPaddle == socket.id) 
      state.leftPaddle = 0; 
     else if (state.rightPaddle == socket.id) 
      state.rightPaddle = 0; 
     if (serverState.connections == 0) { 
      clearInterval(serverState.intervalId); 
      serverState.intervalId = 0; 
     } 
     console.log('player left'); 
    }); 

    console.log(serverState.connections); 
    serverState.connections++; 
}); 

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <style> 
     .topPlayer { 
     -moz-transform: rotate(180deg); 
     } 
     .leftPlayer { 
     -moz-transform: rotate(270deg); 
     } 
     .rightPlayer { 
     -moz-transform: rotate(90deg); 
     } 
    </style> 
    </head> 
    <body> 
    <canvas id="court"></canvas> 

    <script src="/socket.io/socket.io.js"></script> 
    <script> 

    var constants = { court: { width: 0, height: 0, adjusted: false }, 
        colors: { court: "brown", ball: "black", paddle: "orange" }, 
        paddle: { width: 0, height: 0, delta: 0 }, 
        ball: { radius: 0 }, 
        player: { id: 0 } 
        };        

    var state = { paddles: {}, 
       ball: { left: 0, top: 0 }, 
       sides: {} 
       }; 

    var socket = io.connect('http://localhost/pingv1'), 
     canvas = document.getElementById("court"), 
     ctx = canvas.getContext('2d'); 

    socket.on('environment', function(data) { 
    constants.court.width = data.court.width; 
    constants.court.height = data.court.height; 
    constants.paddle.delta = data.paddle.delta; 
    constants.paddle.width = data.paddle.width; 
    constants.paddle.height = data.paddle.height; 
    constants.ball.radius = data.ball.radius; 
    constants.player.id = data.player.id;  
    }); 

    socket.on('paddles', function(data) { 
    var paddles = data.positions; 
    // Overwrite the server's version of my own paddle position 
    // if I already know where I am so I don't redraw in the old spot. 
    if (state.paddles[constants.player.id]) 
     paddles[constants.player.id] = state.paddles[constants.player.id]; 
    state.paddles = paddles; 
    state.sides = data.sides; 
    if (!constants.court.adjusted) { 
     constants.court.adjusted = true; 
     if (state.sides.top == constants.player.id) 
      canvas.className = 'topPlayer'; 
     else if (state.sides.left == constants.player.id) 
      canvas.className = 'leftPlayer'; 
     else if (state.sides.right == constants.player.id) 
      canvas.className = 'rightPlayer'; 
    } 
    }); 

    socket.on('ball', function (data) { 
    state.ball.left = data.position.left; 
    state.ball.top = data.position.top; 
    drawCanvas();  
    }); 

    var drawCanvas = function() { 
    canvas.width = constants.court.width; 
    canvas.height = constants.court.height; 
    ctx.fillStyle = constants.colors.court; 
    ctx.fillRect(0, 0, constants.court.width, constants.court.height); 
    ctx.fillStyle = constants.colors.paddle; 
    ctx.fillRect((state.paddles[state.sides.bottom]/100 * constants.court.width) - (constants.paddle.width/2), 
       constants.court.height - constants.paddle.height, constants.paddle.width, constants.paddle.height); 
    ctx.fillRect((state.paddles[state.sides.top]/100 * constants.court.width) - (constants.paddle.width/2), 
       0, constants.paddle.width, constants.paddle.height); 
    ctx.fillRect(0, (state.paddles[state.sides.left]/100 * constants.court.height) - (constants.paddle.height/2), 
       constants.paddle.height, constants.paddle.width); 
    ctx.fillRect(constants.court.width - constants.paddle.height, 
       (state.paddles[state.sides.right]/100 * constants.court.height) - (constants.paddle.height/2), 
       constants.paddle.height, constants.paddle.width); 
    ctx.fillStyle = constants.colors.ball; 
    ctx.beginPath(); 
    ctx.arc(state.ball.left, state.ball.top, constants.ball.radius, 0, Math.PI * 2); 
    ctx.fill(); 
    }; 

    var movePaddle = function (delta) { 
    var newLeft = state.paddles[constants.player.id] + delta; 
    if (newLeft >= 100) 
     newLeft = 100; 
    else if (newLeft <= 0) 
     newLeft = 0; 
    if (newLeft != state.paddles[constants.player.id]) { 
     state.paddles[constants.player.id] = newLeft; 
     socket.emit('paddle', {left: state.paddles[constants.player.id] }); 
     drawCanvas(); 
    } 
    }; 

    window.addEventListener('keydown', function onKeyDown(aEvent) { 
    switch (aEvent.which) { 
     case 37: // Left 
     if (state.sides.top == constants.player.id || state.sides.right == constants.player.id) movePaddle(constants.paddle.delta); 
     else movePaddle(-constants.paddle.delta); 
     break; 
     case 39: // Right 
     if (state.sides.top == constants.player.id || state.sides.right == constants.player.id) movePaddle(-constants.paddle.delta); 
     else movePaddle(constants.paddle.delta); 
     break; 
    } 
    }, false); 

    </script> 
    </body> 
</html> 

ошибка Получение:

GET http://localhost:3000/socket.io/?EIO=3&transport=polling&t=1423454007198-4 Net :: ERR_CONNECTION_REFUSED

Answer 1

Если вы настроили socket.io правильно с HTTP-сервера (вы не показывают нам, что часть вашего кода), то он автоматически обрабатывает запрос для "/socket.io/socket.io.js" и обслуживает файл socket.io.js клиенту, который фактически находится в другом месте. Другими словами, он обрабатывает все это для вас, перехватывая HTTP-запрос для "/socket.io/socket.io.js" и обслуживая нужный файл из его местоположения в каталоге node_modules, откуда пришел код сервера socket.io.