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

<div class="post-censorship-notice">jhice can only post plain text URLS until they have 500 rep. 2 URLS modified. Why?</div>

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 localhost/socket.io/1 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" : 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.

try:

io.configure(function() {

io.set('match origin protocol', true);

});

in your app.js

Not at home yet but will try this ASAP

Thanks

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 :

io.set('transports', [
	'websocket'
	, 'flashsocket'
	, 'htmlfile'
	, 'xhr-polling'
	, 'jsonp-polling'
	]);[/code:ngyg45va]

I think the problem is before that but...

try

var http = require('http');

var io = require('socket.io').listen(1337);

io.configure(function() {

io.set('match origin protocol', true);

});

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

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.

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.

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

<div class="post-censorship-notice">jhice can only post plain text URLS until they have 500 rep. 3 URLS modified. Why?</div>

It works like a charm <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile"> 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) :

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');
});[/code:nu8sgysw]
Run in a a command window "node server.js" (if you saved the file as "server.js").

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

[url=http://i.imgur.com/sPH1RvG.png][img="http://i.imgur.com/sPH1RvGl.png"][/url]

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).

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

Hope this helps turn-based desires <img src="{SMILIES_PATH}/icon_e_smile.gif" alt=":)" title="Smile">

PS : thanks to lennaert for helping this post live ^^

Back,

I wonder if we should use "Server" or "WebSocket" ... Need to go further in this.

I have my own vps somehwere, I installed the nodejs server and expanded it with a couple of packages.

socket.io, node-mysql, webrtc.

It was a bit prepperation for the upcoming webrtc upgrade to construct 2.

I managed to get video and voice chat working with somesimpel examples straight from a couple html pages.

Also made a couple simple server apps for some of my games making use if the room techniques.

VPS is like 10$ a months. great to experiment with.

Hi lennaert

Nice to hear some news from you on this topic of networking. Do you have "public demo" on your VPS than we can try together ?

Do you have multiplayer games playable online ?

I've got a little dedicated server (10€ a month too) where I host a website, but as soon as I've got something working, I will put it online.

By the way, with the "ws" WebSocket server for node js, I managed to use the WS plug-in of C2 and communicate between clients \o/ I'll certainly make a tutorial out of this, as it could interest beginners in networking.

TankRacer

Its based on socket.io.

I build this in december somewhere.

The Battle arenas work nice.

Regular multiplayer was giving some hassle with positioning.

But since then webrtc was making its way to construct 2, so I figured I wait it out.

lennaerthohe.nl/TankRacer/index.html TankRacer

Its based on socket.io.

I build this in december somewhere.

The Battle arenas work nice.

Regular multiplayer was giving some hassle with positioning.

But since then webrtc was making its way to construct 2, so I figured I wait it out.

Tried it, but alone ^^ Will try it with a friend...