使用 c9.io 设置节点 js 服务器答案

【问题标题】：Setting up node js server with c9.io使用 c9.io 设置节点 js 服务器
【发布时间】：2016-09-11 17:18:40
【问题描述】：

我很难设置节点服务器以在 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

谷歌浏览器控制台

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)

【问题讨论】：

将<script src="/js/jquery.min.js"></script><script src="/socket.io/socket.io.js"></script>放在第一个脚本块之前。
@Nehal J Wani 仍然是相同的调试...

标签： javascript c9.io

【解决方案1】：

以下对我有用：

<!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>

【讨论】：