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

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.

Related

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.

Node.js + Express: How to update page when something has been inserted into database?

I have messaging all set up, but when someone sends a message, I want the recipient to see the message without having to refresh the page.
It would also be cool that when a user receives a message, there is a notification/badge that appears to indicate a new message.
I'm a newbie only just delving into web development, so is this the scenario where I would use AJAX? I've been reading about it, and that seems to be the case. Is there a better way to do something like this with Node.js + Express?
I just need a push in the right direction. Thanks!
THere is a very good nodejs module for long pooling - http://socket.io/
So, you can send message from server when record is updated
Having the recipient see a message without refreshing a page can be achieved by AJAX. Your situation where you want the user to receive a notification message is a common one. There are several ways of achieving that. You can do short-polling or long-polling, both of which can be achieved by AJAX Scaling a chat app - short polling vs. long polling (AJAX, PHP). But if you're using Node, why not look into websockets. Node and sockets literally go hand-in-hand. Good luck!

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

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.

Background job on heroku how does the web know it's finished

So, I'm creating this application that sometime it require pulling the feed and it's always timeout on heroku because of the xml parser takes time. So, I change to be asynchronous load via Ajax every time the page is loaded. I still get H12 error from my Ajax call. Now I'm thinking of using Resque to run the job in background. I can do that no problem but how would I know that the job is finished so I can pull the processed feed on to the html page via AJAX?
Not sure if my question is clear, so how would the web layer knows that the job is done and it should signal e.g (onComplete in javascript) to populate the content on the page?
There are a number of ways to do this
The JavaScript can use AJAX to poll the server asking for the results and the server can respond with 'not yet' or the results. You keep asking until you get the results.
You could take a look at Juggernaut (http://juggernaut.rubyforge.org/) which lets your server push to the client
Web Sockets are the HTML5 way to deal with the problem. There are a few gems around to get you started Best Ruby on Rails WebSocket tool
You have an architecture problem here. The reason for the H12 is so that the user is not sat there for more than 30 seconds.
By moving the long running task into a Resque queue, you are making it disconnected to the front end web process - there is no way that the two can communicate due to process isolation.
Therefore you need to look at what you are doing and how. For instance, if you are pulling a feed, are you able to do this at some point before the user needs to see the output and cache the results in some way - or are you able to take the request for the feed from the user and then email them when you have the data for them to look at etc etc.
The problem you have here is that your users are asking for something which takes longer than a reasonable amount of time to complete, so therefore you need to have a good look at what you are doing and how.

message push system facebook style

I'm working at a community site for a friends mmo-guild, just to increase my skills and learn new techniques.
my idea is to build a message/notification/whatever push system alâ facebook style. that means if someone sends you a message, a new post in the board appears or something similar you get a little notification just like facebook uses it (you get a little red number in your userbar at the top of the page).
now i don't know what to google for. is a "push system" the right definition for this?
how could i do it?
i also looked in different questions and read about node.js and comet.
The concept of these technologies is clear to me (from other languages, like Java)
So you have (e.g. node.js) server which pushes a message (if available) to the client. how do i handle such a push on a client? i need something like a listener, do i?
Thanks for answers
You'll find this realtime web technology guide a good starting point if you have a particular back-end technology in mind e.g. search for 'php' or 'ruby' for find a hosted or self-hosted realtime technology.
how do i handle such a push on a client?
i need something like a listener, do i?
The paradigm frequently used with all this technologies is PubSub. PubSub is achieved on the client in different ways with different technologies.
The technology you use to communicate between the client and server varies between solution but the move is very much towards the best approach being WebSocket. However, the libraries used by the realtime web technology you choose will abstract away from using WebSockets directly.
I'll demonstrate how you would subscribe to data using the Pusher JavaScript library:
var pusher = new Pusher('YOUR_APP_KEY'); // connect
var channel = pusher.subscribe('my-channel');
channel.bind('my_event', function(eventData) {
// handle event data
});
Pusher use channels and it's a commonly used term, but other technologies refer to these as topics or subjects. Channels can be used to filter data or be specific to a particular topic e.g. 'my_football_team' and events are a way of filtering data further e.g. 'new_news_item', 'score_update'.
There are various techniques to do a "push" from the server to the browser. See Wikipedia.
For a guild website that is your first attempt at doing this, it will probably be easiest to just periodically poll the server with an XMLHttpRequest and update the page content if there is new data.
Once that works, you can change it into a continuous "long poll", which gets answered by the server only when there is new data, thus reducing network traffic and making the notifications more instantaneous.

Categories