1

c9.io で簡単なアプリを実行するノード サーバーをセットアップするのに苦労しています。まず第一に、サーバーは localhost で問題なく動作していますが、理由により c9 は html をレンダリングしますが、socket.io を使用しません。これが私のコードです:

App.js

const http = require('http');
const socketio = require('socket.io');
const express = require('express');

const app = express();
const server = http.createServer(app);
const io = socketio.listen(server);

app.get('/', (req, res) => res.sendFile(`${__dirname}/client/index.html`))

io.on('connection', socket => {
    socket.on('move', data => {
        io.emit('move', data)
    })
})

server.listen(process.env.PORT || 3000, process.env.IP || "0.0.0.0", () => {
  const addr = server.address();
  console.log("Chat server listening at", `${addr.address}:${addr.port}`);
});

index.html

<!doctype html>
<html lang="en" ng-app>
  <head>
    <title>Chat Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
    <style>
      body {
        padding-top: 60px;
      }
    </style>
    <script>
    const socket = io.connect('https://socket-alexcnu.c9users.io/');   /* global io $*/ 

    $(document).on('mousemove', e => {
        let data = {x: e.pageX - 10 , y: e.pageY - 10}
        $('div').css({
           left:  e.pageX - 10,
           top:   e.pageY - 10
        });

        socket.emit('move', data)
    });

    socket.on('move', data => {
        console.log(data.x);
         $('div').css({
           left: data.x,
           top: data.y
        });
    })

    </script>
  </head>
  <body>
   <div style = 'height: 20px; width: 20px; background: orange; position:absolute; float:left'></div>

  </body>
      <script src="/socket.io/socket.io.js"></script>
    <script src="/js/jquery.min.js"></script>
</html>

c9 コンソール

alexcnu:~/workspace $ node app
   info  - socket.io started
Chat server listening at 0.0.0.0:8080
   debug - served static content /socket.io.js

Google Chrome コンソール

https://socket-alexcnu.c9users.io/css/bootstrap-responsive.min.css Failed to load resource: the server responded with a status of 404 (Not Found)
https://socket-alexcnu.c9users.io/css/bootstrap.min.css Failed to load resource: the server responded with a status of 404 (Not Found)
socket-alexcnu.c9users.io/:14 Uncaught ReferenceError: io is not defined
2https://socket-alexcnu.c9users.io/js/jquery.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
https://socket-alexcnu.c9users.io/css/bootstrap-responsive.min.css Failed to load resource: the server responded with a status of 404 (Not Found)
https://socket-alexcnu.c9users.io/css/bootstrap.min.css Failed to load resource: the server responded with a status of 404 (Not Found)
4

1 に答える 1

0

以下は私にとってはうまくいきます：

<!doctype html>
<html lang="en" ng-app>
  <head>
    <title>Chat Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <style>
      body {
        padding-top: 60px;
      }
    </style>
    <script>
    const socket = io.connect('https://socket-alexcnu.c9users.io/');   /* global io $*/ 

    $(document).on('mousemove', e => {
        let data = {x: e.pageX - 10 , y: e.pageY - 10}
        $('div').css({
           left:  e.pageX - 10,
           top:   e.pageY - 10
        });

        socket.emit('move', data)
    });

    socket.on('move', data => {
        console.log(data.x);
         $('div').css({
           left: data.x,
           top: data.y
        });
    })

    </script>
  </head>
  <body>
   <div style = 'height: 20px; width: 20px; background: orange; position:absolute; float:left'></div>

  </body>
</html>

于 2016-09-11T09:18:40.037 に答える