Node.js 和 socket.io 在 Cloud9 IDE 上不起作用答案

【问题标题】：Node.js and socket.io don't work on Cloud9 IDENode.js 和 socket.io 在 Cloud9 IDE 上不起作用
【发布时间】：2014-01-02 00:05:18
【问题描述】：

有没有人有在 Cloud9 IDE 上使用 Node.js 和 socket.io 的经验？

“示例（带有 Socket.io 的 NodeJS）”（https://c9.io/site/blog/2013/05/native-websockets-support/）不起作用。

首先，服务器 (https://c9.io/etlolap/webapp, /test.js) 会抛出错误，除非我按照以下方式进行修复。我在 test.js 处于活动选项卡上时单击了“运行”按钮。

var 
  socketIo = require('socket.io'),
  io = socketIo.listen(Number(process.env.PORT));
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
  console.log(data);
  });
});

然后，我的客户端 (https://c9.io/etlolap/webapp, /test.html) 仍然无法连接。我在 test.html 处于活动选项卡上时单击了预览按钮。

<!doctype html>
<html>
  <head>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect('https://webapp-c9-etlolap.c9.io');
      socket.on('news', function (data) {
        console.log(data);
        socket.emit('my other event', { my: 'data' });
      });
    </script>
  </head>
  <body>
    Loading...
  </body>
</html>

并在下方收到错误消息。

加载资源失败：服务器响应状态为 404 --- (Not Found) https://c9.io/socket.io/socket.io.js

Uncaught ReferenceError: io is not defined --- test.html:6

【问题讨论】：

我放弃并使用了不同的解决方案。
Cloud9 和 socket.io 对我来说很好用。

标签： node.js socket.io cloud9-ide

【解决方案1】：

您必须执行以下步骤：

在https://c9.io/etlolap/webapp上打开终端，输入：

npm install socket.io
node test

然后用url打开一个新的浏览器标签

https://webapp-c9-etlolap.c9.io/socket.io/socket.io.js

你会看到socket.io.js源代码

我没有在没有http服务器的情况下如何在c9.io中打开test.html，你只是按预览吗？

编辑：

要返回html文件，你应该像这样合并http服务器和socket.io服务器：

// file: test.js
var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs')

app.listen( Number( process.env.PORT ) );

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

    res.writeHead(200);
    res.end(data);
  });
}

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

【讨论】：

我已经添加了执行文件的步骤。有什么不对的地方可以指出来吗？
我可以按照您的步骤查看 socket.io.js。但我不明白它如何解决我的问题？点击c9.io/etlolap/webapp/workspace/test.html 仍然会收到 404 错误消息。
你应该将 web 服务器和 socket.io 服务器合并到一个应用程序中，看我的更新
来自 Cloud9 IDE（c9.io/site/blog/2013/05/native-websockets-support）的原始示例不需要合并 web 服务器和 socket.io 服务器。无论如何，我已经尝试了您的代码，但仍然得到相同的 404 错误。谢谢

【解决方案2】：

1.步骤

1.1)Runserver.js

cloud 9 控制台出现：

1.2) 在 index.html 上点击 Preview

1.3) 然后会在 IDE 右侧打开一个窗口。您可以点击导航栏中间的按钮，也可以将网址复制并粘贴到新的浏览器窗口中。

1.4) Socket 通信正常！

2。先决条件

2.1) 节点模块socket.io

点击F6 或View -> Console 并安装socket.io。

2.2) 来自 socket.io 的客户端 JavaScript

由于没有找到官方下载链接，所以我创建了一个 GitHubGist。

socket.io.js

3.代码

server.js

// module dependencies
var http = require("http"),
    sio  = require("socket.io");

// create http server
var server = http.createServer().listen(process.env.PORT, process.env.IP),

// create socket server
io = sio.listen(server);

// set socket.io debugging
io.set('log level', 1);

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

  socket.emit('news', { message: 'Hello world!' });

  socket.on('my other event', function (data) {
    console.log(data.message);
  });

});

index.html

<!DOCTYPE html>
<html>

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

        var socket = io.connect("https://demo-project-c9-matthiasholdorf.c9.io");

        socket.on("news", function(data) {
            console.log(data.message);
        });

        socket.emit("my other event", { message : "client emit" } );

        </script>

</html>

【讨论】：

您是否在项目文件夹/js下手动创建了一个静态文件“socket.io.js”？但我了解到，一旦包含 socket.io.js 的节点服务器启动，文件“socket.io.js”将神奇地创建在文件夹 /socket.io 下。虽然我不知道确切的机制。
是的，我做到了。但你是对的，在 socket.io 节点模块中确实有一个客户端 JavaScript 的构建器。您应该能够通过this 路径从socket.io 处理客户端JavaScript。匆忙中它对我不起作用，所以我使用了一个静态文件。
Mathhias，你能远程运行客户端吗？因为我不能让这个工作

【解决方案3】：

感谢 Damhat 和 Matthias 的反馈。经过多次失败的尝试，我终于自己想出了解决方案。在 Cloud9 IDE 上，client 中的典型行（此处为 test.html）必须更改，

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

到

 <script src="https://webapp-c9-etlolap.c9.io/socket.io/socket.io.js"></script>

前缀是您的 Cloud9 项目 URL 的 URL。通过改变这一行，我的例子奏效了。

【讨论】：

很高兴我们能提供帮助。即使我在我的应用程序中遇到了同样的问题，使用静态文件解决它。
对不起，马蒂亚斯。我认为我的解决方案更加简洁明了。
双斜线会起作用吗？我认为问题在于 http vs https ，使用“//”脚本可以自己解决

【解决方案4】：

要获取任何请求的 html 文件，使用位于文件夹中的 html 文件，您可以使用 express：

var fs = require('fs');

var express = require('express');
var app = express();

// This fetches html files from the client folder (if they exist), and returns a "Page could not be found" error otherwise (this can be customized to some other 404 error page as desired)
app.get('*', function (req, res) {

    var urlReading = req.url;
    if (urlReading == "/")
    {
        urlReading = "/index.html";
    }
    urlReading = __dirname + "/client" + urlReading;

    console.log("Loading: " + urlReading);

    fs.readFile(urlReading, function (err, html) {
        if (err) {
            console.log("Could not find " + urlReading)
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.end("<html><head><title>Page could not be found</title></head><body><h1>Page could not be found</h1></body></html>");
        }
        else
        {
            console.log("Found " + urlReading)
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.end(html);
        }

    });
});


app.listen(process.env.PORT, process.env.IP);

【讨论】：