Fast, non-ajax (I guess) updating information - websocket

I'm looking forward to know how they do this. They update their information on just a couple of ms and I see no AJAX requests on my firebug console.
Here is the page: Económico
As you can see on this two images below, this is the information they are updating.
Thanks for your help, looking forward to extend my knowledge!

They are making requests using websockets
e.g.
Request URL:ws://ortc-prd2-useast1-s0002.realtime.co/broadcast/444/m38tirp9/websocket
Request Method:GET
The responses are in Frames
So not your usual stuff, what firebug are you using? It is likely not reported in the console, but in the Network tab.

That's done using WebSocket.
Look at the network tab in chrome dev tools and you'll see it.

They are using Realtime.co, which I work for. It's a full-blown real-time communication platform that handle all the nasty stuff for you: scalability, security and automatic fallbacks when a browser does not support websocket.
You can get your own free account at Realtime.co and give it a go. You'll start doing your own cool real-time enabled applications in not time.

Related

Is there any way we can modify Json data coming in the network tab of chrome and see the changes in the web page?

The webpage Template loads data via some json data we get from the endpoint.
I have a Rest Api and a Angular Front end . The Angular app populates the template from the data coming in from the rest api which we can see in the Network Tab of Chrome Developer Tools.
Is there any way we can modify the Rest data in Network tab and see the changes that occurs in the Webpage.
Is that even possible, It might sound a stupid question but i guess this might be a very special tool if there is not much interaction between the Back end and Front end teams.
I am not quite sure if i am able to explain it properly but this was the best i could edit please bear with me thanks
Just a Screen Shot of the type of data in Network tab.
Sample Data Network Tab
It is not possible from chrome's network tab. You have to use BurpSuite for example which is available in Kali linux as a default. With that you can intercept http requests and responses and modify it's payload.
You can get it from here: https://portswigger.net/burp/
No, you're not able to modify XHR data as you can other sources. What I do is just copy the file to my local drive and temporarily modify it's source. I test responses from API's using Postman and it's pretty awesome.
I have to say I'm a little bit afraid for you though. It's not a great idea to be consuming services from external api's from the client side. Are your API keys and passwords hanging out in that client side code somewhere?

How do I get XHR/Ajax resource timing data from window.performance?

When I open the Firefox "network" tab in the developer tools, I'm able to see the timing data from all the requests my page is making, including application/json (XHR) calls. I want to be able to get this timing information programmatically.
In Selenium, I let my page load fully and then ask the window.performance.getEntries() method for all of the resources. It gives me back a ton, including CSS, javascript, etc, but I don't see the calls to our RESTful services that show up in the Firefox window as "json" requests.
Since Firefox shows them in its Network tab in the developer tools, is a way for me to get them programatically? Our app is an angular app that is not using iframes.
I figured out my issue after a day of googling and trying different things. Thanks to this article I discovered that I needed to add Timing-Allow-Origin: * to the response header of all the services.
Once I did that, the timing information started to appear. It's apparently because the services are hosted at a different domain than my client. I don't understand the ramifications of leaving that header in there so I'll make sure it doesn't get deployed to production.

How to hide request from Network tab

How can I hide api service request from the network tab of the browser developer tool?
Any suggestion
Although I would strongly disadvice from doing so (as it won't stop any serious user), it would be possible to for example send it through flash or for that matter any other plugin with such functionality. The easiest way to achieve this would be to use a flash-enabled XHR proxy object like the one provided by the flXHR project (though you would have to force it to also function on the same domain, rather than only cross domain). Let me finish once again with not advicing you to do so, as the use of plugins will cause for a significant subset of your users messages to appear or not to work at all, which is in no way a good experience.

Facebook style auto loading

We are developing a free, open source Google Reader alternative at http://reader.pykih.com and the code is at http://github.com/pykih/reader
When a user signs up or adds a RSS feed, we add the feed url to the database and then ask a DelayedJob to fetch articles from that RSS url. This typically takes few seconds to minute or two, depending on the DelayedJob queue. Many users have complained that RSS feed is not being fetched at all when in reality it is being fetched. All that the user has to do is refresh his own page. We wrote a message there, yet users are complaining.
Can anyone point us in direction towards - what is the best way to design a Facebook or Google style "Loading" (icon in yellow) functionality and once loaded it automatically adds the entries to the screen without page refresh.
Thank you in advance
If I understand correctly, you basically want to update the user's view of the page while it's still open, in real time. (At any rate, that's what Facebook and most Google products do nowadays). This technique is usually called server push - information is pushed from the server to the client, instead of having the client request (pull) information from the server.
There are multiple ways to implement server push.
You could use AJAX to 'reload' the page every ten seconds or so. This is very easy to implement, but not realtime at all, and could cause unneeded load on your server. It works with all browsers.
You could use EventSource, a relatively new format supported by Firefox, Chrome, Safari, Opera and others (but not IE). It's a very simple format and easy to implement. EventSource is one-way communication only: it sends events from the server to the client, not in reverse.
You could use WebSockets, probably using a library like EventMachine and a WebSocket library. WebSockets allow fast bidirectional communication, but it's more complex than EventSource and only the newest IE versions support it.
You could use a commercial service like Pusher. Pusher is easy to integrate and fast, but not free. Browser compatibility is great, though.
The options differ primarily in the amount of client support (do you need IE support?) and the amount of Ruby integration you get.

Ajax Server-Side synchronized HTTP request?

I am building a website which has a cron job that generates a file to the hard drive regularly. However, the timing of this generation is not precise and I would like it to be loaded as soon as it is generated by the browsers of my visitors.
Is there a nice way to make my server notify my visitor's browser to reload the page?
Other way around is quite heavy :(
Thanks!!
you should read about Comet, Comet allows you the receive "Push" from server-side to your client-side.
Eg,. thats the way how facebook chat works..
Take a look,
http://en.wikipedia.org/wiki/Comet_(programming)

Resources