ノードjsサーバーをc9.ioで設定する

c9.ioで単純なアプリケーションを実行するためにノードサーバーを設定しようとしています。まず、サーバがローカルホスト上で何の問題も実行されていないが、C9がHTMLをレンダリングしますが、socket.ioを使用していない理由。これは私のコードです：ノードjsサーバーをc9.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)

出典

2016-09-11 Razvan Alex

入れ '<スクリプトSRC = "/ JS/jquery.min.js"><スクリプトSRC =" /ソケット。最初のスクリプトブロックの前にio/socket.io.js ">と入力します。 –

@Nehal J Waniはまだ同じデバッグ... –

私のために、次の作品：

<!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-11 09:18:40

ありがとうございます!!! –

ノードjsサーバーをc9.ioで設定する

答えて

関連する問題