Node.js和socket.io在Cloud9 IDE上不起作用
有没有人有经验使Node.js和socket.io在Cloud9 IDE上工作?
“示例(带有Socket.io的NodeJS)”( https://c9.io/site/blog/2013/05/native-websockets-support/ )不起作用。
首先,服务器( https://c9.io/etlolap/webapp,/test.js )抛出一个错误,除非我按照下面的方法修复。 我点击运行button,而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)仍然无法连接。 我点击预览button,而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 —(未find) https://c9.io/socket.io/socket.io.js
Uncaught ReferenceError:io没有定义— test.html:6
1.步骤
1.1) Run
server.js
云9控制台显示:
1.2)在index.html上点击Preview
1.3)然后在IDE的右侧打开一个窗口。 您可以点击导航栏中间的button,也可以将url复制并粘贴到新的浏览器窗口中。
1.4)套接字通信正在工作!
2.先决条件
2.1)节点模块socket.io
F6
或View -> Console
并安装socket.io。
2.2)来自socket.io的客户端JavaScript
由于我没有find官方的链接下载,所以我创build了一个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>
感谢来自damphat和Matthias的反馈。 经过多次失败的尝试,终于自己找出了解决办法。 在Cloud9 IDE上,客户端(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。 通过改变这一行,我的例子工作。
你必须stream动这些步骤:
打开https://c9.io/etlolap/webapp上的terminal,键入:
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); }); });
要获取任何请求的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);