Anything like websockets I can use with no backend experience? Can I use AJAX?

[moe.mkr]

Hi, 

About my project: It is intended to be an up to 2 player street-fighter/tekken type of game. 

For a game dev class I have to create and deploy a javascript game. I would like to add the feature that the user can use their phone as a (wireless ideally) gamepad/controller and their desktop would be the monitor to show the game (this would all have to happen in real time). I don't have any back end development skills, nor do I really have the time to pick them up, so something like Websocket would be impractical (I know there is Kaazing, but I followed their documentation step by step and this caused issues very early). 

 

My question is can I do something like this  in real time with Ajax? I do not know how to use Ajax just yet, but I figure I can pick this up much faster than learning backend.

If not is their something where I can just copy the code entirely include it within my project (ofcourse giving the proper credit where its due) and edit the front end to apply to my game & gamepad. 

Edited March 12, 2017 by moe.mkr
fixed typo; clarity

[mattstyles]

Ajax and websockets are different things, from the browser they are nearly the same thing, but the critical bit is that websockets are stay-alive so that the server can push data to the client, rather than waiting for the client to pull it.

To elaborate a little, think of the communications that have to happen:

* 1) Desktop client connects to server, phone client connects to server (somehow you need to associate the two, but lets tackle that later)

* 2) Phone tells the server about an action the user has initiated, lets say, the user hits button A.

* 3) The server now has to tell any other connected clients (in this simple case, the desktop client) that the action associated with button A has been triggered.

* 4) The desktop client now 'hears' (or is informed about) the button A press and responds accordingly.

It sounds like you're most worried about step 3 above but that isn't going to be your trickiest bit, step 1 is, but lets look at step 3 for now.

You have two options, which you've mentioned:

* 1) desktop client connects a websocket to the server, this is a stay-alive connection, so that the server can now push events to the client (if you're comfortable with event emitters the theory is simple, its the same as using element.addEventListener but you control both sides of the event, both the emit and the listen).

* 2) desktop client uses ajax, which does not stay-alive so the server can not initiate a conversation, it must wait for the client to request stuff, which means your desktop client must poll the server for changes, which also means your server has to keep a record of all events and pop them off a stack when the client requests it. Annoying and error-prone.

Polling is awkward in lots of ways, if you can, use option 1 with a websocket for this and use a library like socket.io to make things a little easier for you.

Step 1 in the flow above is going to be trickier because you have to connect instances somehow and to be honest I don't know how you're going to do this without knocking up your own custom server.

If this is for a class (and this is not a trivial thing you're attempting to do) can you cheat a little by having users input an id of some sort? i.e. fire open browser on your desktop and enter id '1', now fire open your mobile device and also enter id '1', now your server has two connections both telling it they are id '1', so now you can connect them. If it wasn't a two player game then you can actually ditch this and just emit events to all connected clients, but in your case that will not work.

However you do this, I don't think there is a service that will knock up all this backend for you and you'll have to have decent knowledge of using ajax and/or websockets and of knocking together a basic server to route events through.

It's a really nice idea for a project but you're giving yourself multiple problems to solve: 1) external control device, 2) multiplayer shizzle, 3) a game. If you just have to release a game to meet course requirements I'd suggest ditch 1 and 2 and just crank out a client-side only game, OR, choose 1 or 2 and accept you'll have to do some server programming, which would be very cool (option 1 with the external phone as a gamepad would make an awesome project).

I'm not sure how long you have to complete this but if you have limited experience of ajax/websockets/communications then this isn't going to be a quick project for you, multiplayer or connected device stuff can get really tricky really quickly and requires a fair amount of experience to get right (and we haven't even touched on latency and projection and stuff, tricky).

[Dabney]

Check out the HappyFunTimes library for building local multiplayer games using smartphones as controllers.  It is available on GitHub: https://github.com/greggman/HappyFunTimes