simple phaser & websocket guide

[jpdev]

This is a small tutorial on how to write a very small websocket demo with phaser.

 

There is one sprite, everybody can drag it around.

 

If a client moves the sprite (using the mouse) he tells the server about the new position.

The server tells everyone else and the client update the sprite position.

 

To achieve this, the server will contain 20 lines of code and the client will contain 52 lines of code (including all the phaser stuff).

 

What we need:

 

Client side: only phaser

 

Server side: nodejs and the websocket package "ws"

 

Here are the source files:

 

http://www.jppresents.net/static/downloads/websocket.zip

 

(phaser 2.0.4 is included, but any phaser version should work).

 

Update the websocket.js in the client directoy to have the correct IP and Port for the server.

 

Start the client how ever you prefer to start your phaser programs.

 

Running the client (without a server) should display a rabbit and the text "started (not connected yet)".

 

Now for the server side of things:

 

Extract the "server" directory from the zip file.

 

Now it's time to edit the server.js and set the port you want to use. (I have 8080 in it. Just make sure it matches the port in the websocket.js for the client).

 

Now you will need to download nodejs ( http://nodejs.org/ ) and install it.

(There is a windows installer if your server is a windows machine (or you are just testing locally) - or there are .tar-balls for linux.)

 

The windows installer asks if "npm" should be installed, check yes. 

The windows installer asks if nodejs should be added to the path, check yes.

 

Now open a command line (cmd) and navigate to the "server" directory and type in "npm install ws".

 

npm (the nodejs package manager) will create a directory "node_modules" in the current directory and download our websocket library (namend "ws") into this directory.

 

 

Now (in the same command line) type in "node server.js".

 

This will start the server.

 

Refresh your client, it should now show "connected". Move the rabbit.

Open more clients. Move the rabbit again.

 

Enjoy

[xronn]

Thanks! I shall give this a go and let you know how its going thanks a bunch!

[Geoeo]

amazing. thank you!

 

    this.ws.onmessage = this.onMessage.bind(this);    this.ws.onerror = this.displayError.bind(this);    this.ws.onopen = this.connectionOpen.bind(this);

is a lifesaver

[Lyian]

If I followed your little guide, it outputs on my mac localserver: "Upgrade required". 
I updated node to newest version but the error still doesn't disappeared...

 

 

The server doesn't require any update, everything is okay, even with this message. Just had to open the local files while running the server, which leads me to another error:

 

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///Users/Lyian/Desktop/websocket/client/rabbit.png may not be loaded.PIXI.WebGLRenderer.updateTexture @ phaser.js:18503PIXI.WebGLSpriteBatch.renderBatch @ phaser.js:19806PIXI.WebGLSpriteBatch.flush @ phaser.js:19729PIXI.WebGLSpriteBatch.end @ phaser.js:19383PIXI.WebGLRenderer.renderDisplayObject @ phaser.js:18450PIXI.WebGLRenderer.render @ phaser.js:18413Phaser.Game.updateRender @ phaser.js:39051Phaser.Game.update @ phaser.js:38977Phaser.RequestAnimationFrame.updateRAF @ phaser.js:61958Phaser.RequestAnimationFrame.start._onLoop @ phaser.js:61942

 

Edit: Everything works perfectly. Just change in websocket.js in line 1 Phaser.Auto to Phaser.Canvas.
Now the picture is shown and the demo works! 

Edited October 12, 2015 by Lyian

[WombatTurkey]

This is a very nice script.

 

Just remember though, when using it in production or for real multiplayer games you don't want to be sending that much data across the pipe. You should start using client-side prediction methods at this point.

 

Although, it's kind of hard as the drag positioning is x, y, but for character movement (if a player is holding down the D key for example) to move right, you don't want to be sending the D key inputs over every 0 milliseconds is what I mean.

[WombatTurkey]

If I followed your little guide, it outputs on my mac localserver: "Upgrade required". 

I updated node to newest version but the error still doesn't disappeared...

 

 

The server doesn't require any update, everything is okay, even with this message. Just had to open the local files while running the server, which leads me to another error:

 

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///Users/Lyian/Desktop/websocket/client/rabbit.png may not be loaded.PIXI.WebGLRenderer.updateTexture @ phaser.js:18503PIXI.WebGLSpriteBatch.renderBatch @ phaser.js:19806PIXI.WebGLSpriteBatch.flush @ phaser.js:19729PIXI.WebGLSpriteBatch.end @ phaser.js:19383PIXI.WebGLRenderer.renderDisplayObject @ phaser.js:18450PIXI.WebGLRenderer.render @ phaser.js:18413Phaser.Game.updateRender @ phaser.js:39051Phaser.Game.update @ phaser.js:38977Phaser.RequestAnimationFrame.updateRAF @ phaser.js:61958Phaser.RequestAnimationFrame.start._onLoop @ phaser.js:61942

 

Edit: Everything works perfectly. Just change in websocket.js in line 1 Phaser.Auto to Phaser.Canvas.

Now the picture is shown and the demo works! 

 

 

You need to add

 --disable-web-security

To your Chrome.exe shortcut

 

Or, put the files on a local webserver, using WT-NMP or WAMP.