Networking game with HTML5, Javascript, and AJAX. Would this work? - javascript

I'm currently building my first website just for practice. I threw together a quick game of pong in HTML5 and javascript. I was wondering how I could go about turning it into a networked game.
Is there anything stopping me from say, logging a user into my site, storing their information in a sql database, then looking for another person logged in and waiting to play my game. To handle the networking could I just create a sql database and use AJAX to post new information to a table that specifically handles networking?
here's a visual example of what i've been brainstorming:
[sql table: network]
[logged in user: Josh] [Josh paddle position Y]
[logged in user: Tim] [Tim Paddle position Y]
Use Ajax XMLHttpRequest to post Josh paddle position Y and Tim Paddle Position Y
to the network table, updating each client's screen accordingly (maybe use XMLHttpRequest.responseText to get the other person's information)
delete network table when both users have left the game
Anyway if you don't think this method would work, could you point me in the right direction maybe? I'm still very new to web programming, so maybe i've miss understood the way Ajax works. How is networking normally done when it comes to web applications?

There are several problems with your approach:
Can you update paddle position as fast as user moves it? Network communication have lags, DB requires time to update it's data.
Even if for few users it isn't such a problem, for many people it will become really painfull to handle with all this amount of user's requests.
How do you notify one user about another one actions? In your scheme you should ask server very frequently to get updates. This increases overall load.
The solution could be a peer-to-peer connection, but JS doesn't support it for now.
To post updates and get notified about them you can use persistent connection: instead of reestabilishing connection on each query you just do it once and then use it for bidirectional communication. Additional benefit from this is escape from need of polling server about updates.
See a Server push article on Wikipedia.
Also using DB may be unresonably costly. In fact for each game all you need is several variables that will be deleted when connection will close, so you can just store them in memory.

Related

Javascript Ajax PHP non-hackable game solution

Desire: I want to make an ever expanding single player online rpg world. Even though it is single player, I would like to make it possible for people to trade items they find in an online market and rank players. To reduce requests to the server I wanted the local machine to hold all the information in javascript objects until the player presses SAVE. When SAVE is pressed an AJAX request is sent to the server and I'll handle that with PHP, MySQL ect.
Perceived Problem: If I do this my concern is that someone will access the variables by typing javascript:object.hit_points=10000000000000;. If one person cheats and floods the online market with items they cheated to get, then that will cheapen the experience for everyone else.
Questions:
Is it possible for a player to manipulate live javascript object variables through the address bar or some other means?
If so, is there some way that I can secure the game and still use javascript for managing the interface and data?
Thank you for your time in sharing your learning and understanding.
Best Regards,
Bryan
Is it possible for a player to manipulate live javascript object variables through the address bar or some other means?
Yes:
If the variables happen to be globally accessible, the user only has to open the console and assign to them. Eg, they could type in window.money = 999999999;. This could be solved by putting the whole script into an IIFE without using global variables. But...
Even without global variables, no code that runs client-side is "secure". See Is it possible to gain access to the closure of a function?. The user could simply intercept the JavaScript that your site runs, and replace it with their own JavaScript that implements their desired functionality (giving them free items, money, etc). This can be mitigated to a moderate extent by minifying and obfuscating the JS, but it's not a full solution. You'd want to make sure the network request payloads cannot be easily deciphered either.
Ultimately, the only good solution to this is to generate and save all state on the server, which gets communicated to the client when needed. The client cannot be allowed to generate any data or state themselves - the client should only be able to ask the server what their state is.
If the user is at a section where an item may be generated (eg, a treasure chest is opened), the only way to do this securely is for the server to verify that the player is at the position of a treasure chest, and for the server to generate the item in the chest, then inform the client of their new item. This way, no matter what JavaScript code runs on the client, if the client tries to make an invalid trade, or patches things so they have more HP than they're allowed to have, the server can verify it and reject the invalid request. For example:
Client: Attack
Server: You attack and deal X damage. You are counterattacked and lose Y HP. You die.
Client: Open chest
Server: (Verifies that you are at an openable chest, then replies:) You receive a Water of Life
Client: Offer trade of item ID 333 for some other user's item 555
Server: (Verifies that client currently holds item 333, and that the other client holds item 555, then:) Trade successful (switches around items in server's DB)

PHP, MySql, JavaScript - Pushing data from server to client (Live chat)

I am trying to create a social network with live chat system, so that users can have notification that they have a new message or receive a message after it was sent from another user in real time.
I am new to this, I have made front end (div that will hold messages that are fetched from DB, in form of a paragraph) and DB design, but I am not sure what to use for back end. My best solution so far is to make Ajax call for every user in every few seconds interval, but this looks like inefficient solution for many registered users.
I have searched the web and haven't found any good and up-to-date solutions and I would appreciate if someone could share some experience or point me in the right direction.
Few ways to do it:
websocket (with socketio it's the best)
Server Sent Event Long Pooling Pooling (Ajax)
The best now is websocket. But you can have some problems if your chat needs to work behind some firewall. But the overall perf if you use websocket, you will use something like 80% less resources.

How can I maintain a connection to a server and get realtime latency updates

I unfortunately do not have any code examples as I'm not sure what to google as this is new to me and just need guidance on what to google, or packages to use
I want to create a simple application with an Electron GUI that shows me the latency to a server, I'm currently playing a game, H1Z1 to be exact that has no in game latency monitor and I thought it would be handy to have this app open on my other monitor that will show me my connection.
I don't know if I'd need to hook the process somehow and get what ips the process is connecting to and then initiate my own connection and monitor the latency.
I could find the IPs through TraceRoute or something but I don't know if a setInterval with constant pinging of the server is the best option and was looking for the best suggestions on how to accomplish this or guidance on what I need to google. Sorry for the sub quality question.
To clarify as per comment:
Basically the game client will connect to its back end server, and report its response time in milliseconds, which helps you determine just how laggy your connection is. When you're playing a game without this information it's almost impossible to tell if you missed your shot, bullet didn't register, or if you're just lagging and the server takes to long to update the client which can result in desynchronizing from the server and not getting accurate reports from the server, e.g. I shoot at somebody and the server receives its variables and decides well you shot at X,Y,Z but the character was actually standing at X,Y,Z so you missed but on my end I was aiming perfectly, but I can't tell without knowing just how bad my connection is
So I want to create the most efficient method to determine my connection to the server, I'm just not sure how to go about it
I'm basically expecting to see numbers fluctuation could be anywhere between 40-200ms or something. Hope that clarifies.

When to call the backend and when to store locally (angularjs)

I have an ionic app and a Parse.com backend. My users can perform CRUD functions on exercise programmes, changing every aspect of the programme including adding, deleting, editing the exercises within it.
I am confused about when to save, when to call the server and how much data can be held in services / $rootScope?
Typical user flow is as below:
Create Programme and Client (Create both on server and store data in $localStorage).
User goes to edit screen where they can perform CRUD functions on all exercises within the programme. Currently I perform a server call on each function so it is synced to the backed.
The user may go back and select a different programme - downloading the data and storing it localStorage again.
My question is how can I ensure that my users data is always saved to the server and offer them a responsive fast user experience.
Would it be normal to have a timeout function that triggers a save periodically? On a mobile the amount of calls to the server is quite painful over a poor connection.
Any ideas on full local / remote sync with Ionic and Parse.com would be welcome.
From my experience, the best way to think of this is as follows:
localStorage is essentially a cache layer, which if up to date is great because it can reduce network calls. However it is limited to the current session, and should be treated as volatile storage.
Your server is your source of truth, and as such, should always be updated.
What this means is, for reads, localstorage is great, you don't need to fetch your data a million times if it hasn't changed. For writes, always trust your server for long term storage.
The pattern I suggest is, on load, fetch any relevant data and save it to local storage. Any further reads should come from local storage. Edits, should go directly to the server, and on success, you can write those changes to localstorage. This way, if you have an error on save, the user can be informed, and/or you can use localstorage as a queue to continue trying to post the data to the server until a full success.
This is called "offline sync" or sometimes "4 ways data binding". The point is to cache data locally and sync it with a remote backend. This is a very common need, but the solutions are unfornately not that common... The ideal flow would follows this philosophy:
save data locally
try to sync it with server (performing auto merges)
And
Periodically sync, along with a timer and maybe some "connection resumed" event
This is very hard to achieve manually. If been searching modules for a long time, and the only ones that come to my mind don't realy fit your needs (become they often are backend providers that give you frontend connectors; and you already have an opiniated backend), but here they are anyway:
Strongloop's Loopback.io
Meteor
PouchDB

Can people modify WebSockets?

So I'm writing a game client using WebSockets. However, I want to prevent people from cheating and sending certain data to the server. Can people modify the html and javascript on the page to change what data is sent to the WebSockets?
If so, how can I prevent this from happening?
This is the big thing about "cheating" and "hacking" in (multiplayer)games. Data that comes from the client (and sometimes even the server) can never be trusted.
Think about a "teleport hack" in a shooter game. Your client is sending your players new position to the server, as soon as you move. If you want to cheat, you can simply manipulate your client to send the coordinates of the position you want to teleport to.
Now there are two possible outcomes:
1) The developers did not care about cheaters, when coding the server side application. The server accepts the new position, although it is impossible that your client moved to that position since the last position update.
2) The developers were smart and wrote an intelligent server. Before accepting the new coordinates, the server validates if it is possible that your player moved to the given location since the last update. If it is, the server accepts it. If it is not, you get banned for the next 1000 years.

Categories