Get Refesh Data From The Server - javascript

How can i get latest or fresh data from server (if in server happened new event (for example there are 2 users x,y and x send messages to y and y get this message without refreshing page ) )?
I don't want to use setInterval because it repeats all message again and again. Is there any Technique that can i use for this ?
I heard about Ajax that technique need to send request to the server but i want when happen an event in the server and webpage get it without refreshing..

The first technique is the long polling, which sends request to the server and waits until the server sends something, for example the new message. You must re-send requests to the server each time you get a new message or your request is time out. This technique uses AJAX.
Long polling PHP example - How do I implement basic "Long Polling"?
The second is web sockets, https://en.wikipedia.org/wiki/WebSocket
this stackoverflow question deals with the implementation of websocket.
socket.io has a demo of chat application.

If you looking for bidirectional full duplex method then go for WebSockets but for just polling data from server you can use Server Sent Event as well. Adding reference links for both:
WebSocket:
http://html5demos.com/web-socket
http://en.wikipedia.org/wiki/WebSocket
HTML5 Websockets for Realtime Chat app?
SSE:
http://www.html5rocks.com/en/tutorials/eventsource/basics/
Examples:
SSE: http://demo.howopensource.com/sse/

Related

Client access vs broadcast data from web server

I'm looking for technique or skils to fix the ways for new web site.
This site show the read time data which located on server as file or data on memory.
I'll use Node.js for server-side. But I can't fix how to get the data and show that to web site user.
Because this data have to update per 1 second at least.
I think it is similar to the stock price page.
I know there are a lot of ways to access data like AJAX, Angular.js, Socket.io..
Also each has pros and cons.
Which platform or framework is good in this situation?
This ultimately depends on how much control you have over the server side. For data that needs to be refreshed every second, doing the polling on client side would place quite the load on the browser.
For instance, you could do it by simply using one of the many available frameworks to make http requests inside some form of interval. The downsides to this approach include:
the interval needs to be run in the background all the time while the user is on the page
the http request needs to be made for every interval to check if the data has changed
comparison of data also needs to be performed by the browser, which can be quite heavy at 1 sec intervals
If you have some server control, it would be advisable to poll the data source on the server, i.e. using a proxying microservice, and use the server to perform change checking and only send data to clients when it has changed.
You could use Websockets to communicate those changes via a "push" style message instead of making the client browser do the heavy lifting. The flow would go something like:
server starts polling when a new client starts listening on its socket
server makes http requests for each polling interval, runs comparison for each result
when result has changed, server broadcasts a socket message to all connected clients with new data
The main advantage to this is that all the client needs to do is "connect and listen". This even works with data sources you don't control – the server you provide can perform any data manipulation needed before it sends a message to the client, the source just needs to provide data when requested.
EDIT: just published a small library that accomplishes this goal: Mighty Polling ⚡️ Socket Server. Still young, examine for your use if using.

How to implement long polling for React + axios

I'm using React + axios to talk to the API from the client side. I'm a newbie in JavaScript.
How would I implement long polling so I get near real-time updates on a web page?
Is there a better way to do real-time updates on the page, when backend is a JSON REST API? Should I look into using WebSockets or server side events or long polling is fine?
There is another, potentially better way for your use-case: Server-Sent Events.
SSE, in a nutshell, is a simple GET request to the server from the client - except that the server doesn't close the connection after it's done processing the request. Instead, the HTTP connection is left open and the server is able to write data multiple times to the client, which appear in real-time.
For more info on how SSE compares to Websockets, read Alex Recarey's answer to "WebSockets vs. Server-Sent events/EventSource" in SO.

Is it good - use setInterval for data refreshing?

I have an issue - I should update information for user as soon as possible, but i don't know exact time when it'll happen.
I use setInterval function that checks differences between current state and the state before checking. If there are any differences then I send an AJAX request and update info. Is it bad? I can't (or don't know how to) listen any events in that case.
And what about interval time? All users (~300 at the same time) are from local network (ping 15-20 ms). I have to refresh information immediately. Should I better use 50ms or 500ms?
If the question is not very clear just ask - I'll try to say it in other words.
Thanks in advance
Solution: Websocket
Websockets allow client applications to respond to messages initiated from the server (compare this with HTTP where the client needs to first ask the server for data via a request). A good solution would be to utilize a websocket library or framework. On the client you'll need to create a websocket connection with the server, and on the server you'll need to alert any open websockets whenever an update occurs.
The issue with interval
It doesn't scale, you could set the interval to 4000 miliseconds and still once you hit 1000 users...you are going to be slamming your server with 10000 requests and responses a minute...This will use tons of data and use processing to return nothing. Websockets will only send data to the client agent only when the event you want to send actually occurs.
Backend: PHP
Frameworks
Ratchet
Ratchet SourceCode
phpwebsocket
PHP-Websockets-Server
Simply implement one of the above frameworks as a websocket connection then you will register as a client to this endpoint and it will send data on whatever event you define.

push notification for a web application

What is an efficient way to have push notification in a web application?
I have a web application and I want it to be dynamically refreshed for every specific user by push notification instead of regularly pulling the data from the server.
The best one doesn't exist, but you have some options to get this done.
Web sockets (IMO, I recommend this approach)
The first one and the most efficient is to use web sockets in an HTML5 page. You could use a library in PHP to get this done, or you could use a Node.js server with Socket.io or similar to handle the frontend of your site (I see this a lot in online products).
Note: When using web sockets the client and the server will be sending each other a TTL (time-to-live) message, this is a really really small message with small headers just to keep the connection open and alive.
Short-polling
The second one is short polling, here you make an ajax request to the server every X seconds or minutes (depends on the frequency that you want to refresh the data). NOTE: this is the least efficient, because you're opening a lot of request to server just to check if there's new data
Long-polling
The third one is long polling, this one is like short polling but instead you keep a single connection opened for a longer period of time and get a response from the server when there's data to be sent to the client. This is less consuming, but you still keep on permanent connection open between the client and the server.

Event based Ajax communication between server and browser

I'm going to write an application, having some worker threads on the server, and some log and status elements on the html page. logs and status are expected to be updated whenever an update is ready from the server side.
well, one approach is to set up a polling mechanism, like the client sends a request on specified intervals and the server sends back the last update, (if any available).
however I wonder if there is any more efficient way like an interrupt-driven approach, on which whenever an update is ready on the server a message is sent to the client through an Ajax call. and as long as no update exists no message is transferred back and forth.
first of all, is this possible to initiate a call from the server side? I mean via Ajax.
or is there any library like JQuery that facilitates such a requirement?
Thanks
Consider using web sockets (Available in HTML5) - This will allow you to skip polling an update the data immediately as the server sends up his finish request.
Read more on:
http://www.html5rocks.com/en/tutorials/websockets/basics/

Categories