[Solved] Using WebSocket plug-in: Node.js/Socket.io/Apache

Get help using Construct 2

Post » Sat Feb 22, 2014 12:41 am

jhice can only post plain text URLS until they have 500 rep. 2 URLS modified. Why?


UPDATE : finally did not use socket.io (see Ashley's post), but use the "ws" module for node, see the post #10 below / PS Apache not needed too

Hi,

I'm running totally crazy with the Websocket and server configuration, in preview mode.
I explain :

1. Ajax plug-in
I did a test with this plug-in, just had to put the directive Header set Access-Control-Allow-Origin "http://localhost:50000" and it ran well. Put it where the ajax.php file resides. NO PROBLEM, half an hour to test it from scratch.

2. Websocket plug-in
I did want to try it from scratch with no knowledge of node.js. I installed node.js and socket.io, no problem at this point. After that I wanted to try the official C2 WS plug-in in the same way I did with the Ajax one. It doesnt worked at first try, the server was not tracing any connection from the client (C2 preview). "Anyway" I thought, it is rare that it works at first try !

So I took a look at the examples on the socket.io page. First, they didn't tell that we must include the js src from the socket server port (1337 here ^^), ie : <script src="http://localhost:1337/socket.io/socket.io.js"></script>. This was solved anyway.

The nightmare started here, I couldnt get rid of the following error after 2 hours (if not 3) :

XMLHttpRequest cannot load http://localhost:1337/socket.io/1/?t=1393026397074. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

The directive in the .htaccess, even wth the wildcard "*", didn't seemed to do the trick this time (because now there are 2 servers and not only 1, as in the Ajax example). I went on stackoverflow and to the site about "CORS" : http://enable-cors.org/server_apache.html but didnt manage to solve the problem.

In my app.js I've got something like this, but the "origins" key doesnt do the trick either :

var io = require("socket.io").listen(1337);
io.set('origins', '*');


To say, the socket.io documentation is not very clear...

So, I dont get where to put the Header directive, in Apache .htaccess, that serve the client socket (.html or C2 preview), or in the app.js server run by node/socket.io. I didn't try to use only the built-in server of node (Express) and not Apache, because I dont want to, and I think the localhost:50000 of C2 will run in the same issue than Apache.

If someone could help on this, I would be grateful !
Thanks

PS : I wanted to try by myself from scratch with the C2 Websocket plug-in before going in rexrainbow plug-in or in the tutorial by SgtConti.
Last edited by jhice on Mon Feb 24, 2014 11:31 pm, edited 5 times in total.
B
11
S
2
Posts: 69
Reputation: 819

Post » Sat Feb 22, 2014 7:25 am

try:

io.configure(function() {
io.set('match origin protocol', true);
});



in your app.js
B
57
S
17
G
21
Posts: 1,878
Reputation: 19,572

Post » Sat Feb 22, 2014 8:29 pm

Not at home yet but will try this ASAP :)
Thanks
B
11
S
2
Posts: 69
Reputation: 819

Post » Mon Feb 24, 2014 8:31 pm

Hi lennaert,

It works :) Thanks.
(It is the HTML version + JS client loaded from the socket.io server).

But now the problem is, adding the URL in the C2 WS plug-in, Connect to "http://localhost:1337" (and no protocol), got the message "Unable to create a Websocket with the given address and protocol".

I trace the "Websocket is supported" and it is to true.

Tried some things with no success, like adding some transports :

Code: Select all
io.set('transports', [
   'websocket'
   , 'flashsocket'
   , 'htmlfile'
   , 'xhr-polling'
   , 'jsonp-polling'
   ]);


I think the problem is before that but...
B
11
S
2
Posts: 69
Reputation: 819

Post » Mon Feb 24, 2014 8:43 pm

try

var http = require('http');
var io = require('socket.io').listen(1337);
io.configure(function() {
io.set('match origin protocol', true);
});
B
57
S
17
G
21
Posts: 1,878
Reputation: 19,572

Post » Mon Feb 24, 2014 9:08 pm

It doesn't change...

It seems that the protocol is ok for the server because I manage to connect to it via the HTML page.
Looking in the SgtConti plug-in, I see there is the include for the socket.io client files (the same inclusion that in my HTML page, ie the socket.io sample).

So I wonder if the C2 WS plug-in "base", can connect to any server with no client files inclusion ?

I try to update a copy of the C2 plug-in (what SgtConti did) with just including the client src, and come back.

Thanks again :)
B
11
S
2
Posts: 69
Reputation: 819

Post » Mon Feb 24, 2014 9:24 pm

Well, this time the debug info stay on "Connecting to server...", there is no error either no connection done.

The socket.io server log doesn't say anything at all (no incoming request).

The cool thing is that I learn a little how all this works.
I'll try to understand much what I'm doing, it's a bit more complicated than I was thinking at first =)

PS : I forgot to use the marvellous C2 debugger... doesn't help right here but I should use it more often.
B
11
S
2
Posts: 69
Reputation: 819

Post » Mon Feb 24, 2014 9:43 pm

Socket.io is incompatible with Construct 2's WebSocket plugin. They implement their own protocol on top of websockets, whereas the C2 plugin is just a raw websocket with no particular data format expected. There's no reason to use socket.io anyway, since almost every browser that can run HTML5 games can also use websockets. On the server side, try the ws module for node.js.
Scirra Founder
B
399
S
236
G
89
Posts: 24,519
Reputation: 195,361

Post » Mon Feb 24, 2014 10:04 pm

Hi Ashley,

Thank for this explanation. Indeed socket.io is never mentionned in the C2 WS manual page...
I was looking right now in the plug-in from SgtConti's tuto, and see this is a big hack of the C2 plug-in, in a big part rewritten.

I take your advice and will try the ws module for node.js

Thanks, I'll be back to give some feedback and oh, if I manage to do a tic-tac-toe with the raw plug-in and node.js, it would be worth doing a clean tutorial on how to do it ;) (I'm not there but it's a good goal at this stage !).
B
11
S
2
Posts: 69
Reputation: 819

Post » Mon Feb 24, 2014 11:11 pm

jhice can only post plain text URLS until they have 500 rep. 3 URLS modified. Why?


It works like a charm :) At least the very basics.

I managed to create a server with node (http://nodejs.org/) + ws (https://github.com/einaros/ws).
For those interested in doing their first WS connection with the WebSocket plug-in :

1. Create a server as shown on the "ws" page (after installing node.js and ws) :

Code: Select all
var WebSocketServer = require('ws').Server, wss = new WebSocketServer({port: 1337});
wss.on('connection', function(ws) {
    ws.on('message', function(message) {
        console.log('received: %s', message);
    });
    ws.send('something');
});

Run in a a command window "node server.js" (if you saved the file as "server.js").

2. Create a blank project in C2 (with a debug text), and assign a few events :

Image

Preview it, you should see random numbers sent from the HTML page to the WS server (in the command window).
This is just for testing (ie sending a message on every tick).

Here's the capx if needed : http://www.fidfaenor.com/jhice/websocket-test.capx

Hope this helps turn-based desires :)

PS : thanks to lennaert for helping this post live ^^
B
11
S
2
Posts: 69
Reputation: 819

Next

Return to How do I....?

Who is online

Users browsing this forum: No registered users and 42 guests