jpdev

simple phaser & websocket guide

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Lyian

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.