Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Node.js and socket.io don't work on Cloud9 IDE

Does anyone has experience to have Node.js and socket.io working on Cloud9 IDE?

The "Example (NodeJS with Socket.io)" (at https://c9.io/site/blog/2013/05/native-websockets-support/) doesn't work.

First, the server (https://c9.io/etlolap/webapp, /test.js) throws an error unless I fix as follow. I clicked Run button while test.js is on active tab.

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);
  });
});

Then, my client (https://c9.io/etlolap/webapp, /test.html) still cannot connect. I clicked Preview button while test.html is on active tab.

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

and got error message below.

Failed to load resource: the server responded with a status of 404 --- (Not Found) https://c9.io/socket.io/socket.io.js

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

like image 419
etlolap Avatar asked Dec 14 '13 04:12

etlolap


1 Answers

1. Steps

1.1) Run server.js

enter image description here

The cloud 9 console shows up:

enter image description here

1.2) Hit Preview on index.html

enter image description here

1.3) Then a window is opening on the right side of your IDE. You can either hit the button in the middle of the navigation bar or copy and paste the url into a new browser window.

enter image description here

1.4) Socket communication is working!

enter image description here

enter image description here



2. Prerequisite

2.1) node module socket.io

Hit F6 or View -> Console and install socket.io.

enter image description here

2.2) the client side JavaScript from socket.io

Since I didn't find an official link to download it, I created a GitHubGist.

socket.io.js



3. Code

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>
like image 157
Matthias Holdorf Avatar answered Oct 06 '22 01:10

Matthias Holdorf