Combine Browsersync with AJAX Request - javascript

Can use Browsersync to call only once a backend server?
Currently I have a web application that displays a graph online of statistics, that it does is make calls every 1 second to backend for AJAX request.
The problem is that every time the web application opens, multiply calls to the backend is produce.
I would like to call only once at the backend, and update in all client who have opened a connection in the web application.
Looking at the documentation Browsersync I see do that, but only for static pages. Nowhere do I see where to use it to combine with called Ajax that refresh the DOM automatically depending on the response of Ajax.
Thanks in advance for your help.

Related

Passing NodeJS data to Javascript

I have a web application with a client that receives data from a server. I have the data in NodeJS, but I want to pass the data to a Javascript file. The Javascript file is included in a HTML file, so I can't make the files communicate with eachother.
I am new to NodeJS, so it can be a stupid question, but anyones help is appreciated
This is for a project where I need have a data stream, and I need to pass it into a web application. I tried to pass the data to different page inside my application and then I tried to get that data on that page inside my web application via Javascript, but I couldn't make that work. I'm not even sure if its possible at this point.
Your node server can't communicate with your front-end without a specific way of communication like websocket, you have many other way to communicate with your front-end as node-server, take a look at server send event for example.
By the way your front-end can call your node server more easely with a get request as said #tomerpacific in comment.
For that you have to open a route with your express app. Routing with express
And for call it on a GET request, for that you can use the XMLHttpRequest, and if you have implemented jQuery on your front, you can use Ajax jQuery.

Javascript ajax refresh only when needed

I have a web application which is showing data that is recieved from an AJAX request to a PHP script running on the same Server. In my case it's the playback of a spotify player. Because I want that Information to be as up-to-date as possible (in case of a change of the song etc.), my current approach is to send a request every second. Is there a possibility to e.g. send a "data changed"-Trigger from the PHP Server to the Javascript, so that only then the AJAX-Request is triggered, in oder to reduce unwanted traffic for the client? Or is there another approach I'm missing with that this Problem can be solved more elegantly?
Well since it's not a production product and just for personal use, what you could do is on:
The JavaScript UI: make the call like you're doing now once. On completion, make the call again (success, error, timeout).
The server side: Remember what the last song was, when you get a new song (comparing to previous) send that back though the open AJAX call.
Basically it will act like a web socket and have a request open all the time to the server. This is not good design, but the quick and dirty to get your pet project going without having to restructure it to use web sockets.

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.

Make a SPA crawlable

I have an SPA. What happens is that when user click any button or link it retrieves new contents from server but it does not update the url. Now my task is that I have to make it crawlable for search engines such as google. I heard that Phantomjs could be used to get all of the html from website and make it crawable that way somehow. But I am not sure about this method. I want to know how can I use this method to make website crawlable via phantomjs. Any help about this?
One of the solution would be to pre-render the pages with phantom on the server, and when a robot requests a page, the server returns a static html.
Check this link to see it in detail,
phantomjs --disk-cache=no angular-seo-server.js 9090 http://127.0.0.1:9000
This will start a phantomJS server with no disk caching on port 9090. It’s
important to note that PhantomJS’s port needs to be different from the
port that your application runs on.

Real Time Functionlity with php

I am working on attendance system where project management system is also handling using Javascript\Jquery at client side and PHP\MySQL at server side.
A feature in my web app is user message to admin. For this I have applied an ajax request which is made by setTimeout function (after every 15 seconds) to check that is there any new message comes in database if yes then return it to the admin.
It working fine but the drawback is (as you know) continuous request to server which really poor and bad. As I know that real time functionality can solve this problem I have checked some link websocket.io and signlR but there are applicable with Nodejs and asp.net.
So, how can I apply real time functionality with php or I get that new data have reached in to database without continues request with ajax.
There are actually some PHP tools for doing this now. For instance, check out Ratchet.
It's also possible to do bi-directional sockets by creating a simple TCP/IP server. I've done this before for bi-directional communication between a PHP server and a desktop app.
http://php.net/manual/en/sockets.examples.php

Categories