How do services such as Clicktale (and other heatmapping sites) report time on page and mouse movements etc back to their servers using one javascript file?
I understand Google Analytics does it via a gif image but that is only called once. How do you constantly send data back? (Can't use ajax because of cross site scripting limitations).
Cheers, Tim
Take a look at NodeJS, it's an event driven javascript I/O library. Some impressive things have been done with it. See this example which tracks mouse movements and distributes the activity.
Related
I am building a web application in Node.js, and using Socket.IO to handle data transfer between my client and server sides.
The core piece of my web application is a content feed. My client-side Javascript emits a Socket.IO call for the contents of the newsfeed. Once the response comes back from the server, it populates the feed on the webpage using JQuery.
My issue is that Socket.IO doesn't cause the browser's page loading indicator (for Chrome, this is a spinning wheel in the webpage's tab) to show. I want it to show. Without this loading indicator, my webpage looks like it's finished loading when it really hasn't (the feed hasn't been populated yet).
What is the proper solution to this problem? Thank you in advance!
There is no proper answer per se: browser vendors have different rationales for why certain activities would and would not show "loading" states: A good rundown here.
In general, ajax-like requests (things asynchronous to actual full page loads) should probably NOT show loading indicators by default, as busy states indicate to users that the browser is slow/busy, and we use ajax requests for all sorts of background tasks. There are, of course, times when a developer would want to show these indicators (form submission, single page apps that download subsequent pages via ajax: times when we want to convey to the user that something major is happening and that they SHOULD wait for it to complete) but we don't have a lot of control over forcing that to happen when it comes to async requests. The only real way to "fake" it on some browsers is to load content in an iframe: some modern browsers do trigger the "busy" state in that case.
With Websockets, most vendors have, probably quite reasonably, applied the same logic as ajax requests: there are a lot of operations you'd want to do with websockets that can happen without a user actually initiating them directly, so they shouldn't trigger that "browser is seriously busy, hold on a second" feel. And, like with ajax, there's sadly no api I know of for countermanding that design decision.
The iframe solution is limited: it works in some browsers but not all (notably, it's ignored in all major mobile browsers). And doing it crudely (i.e. creating a hidden iframe for when you want it to trigger the load indicators and removing it when you want to cancel them) has costs: you basically need to hit a resource that is designed to "stall" (like a php page that just runs sleep(10000) and so keeps the connection open). That's both weighty (extra http request just to trigger an effect) and also ties up some server with keeping open connections that are essentially not doing anything. That probably won't scale, particularly if that server is the same one hosting your app.
You're probably instead stuck with coding a custom loading indicator (spinner, fake progress bar fixed at the top of the screen). It's not satisfying, but it's the only thing guaranteed to communicate some of what you want to users. I have a solution for jQuery's ajax that exploits the iframe approach (Noisy JSON) that you could potentially reproduce as a plugin for socket.io, but if you're using websockets, that basically means falling back to ajax-style communication for requests. And you're still out of luck on Safari, mobile, and newer IEs.
I am thinking of a remote help application where a user needs help navigating a web site.
How can a second user see what the first user is seeing so they can help them over the phone.
Could both users interact with the website?
Is there a solution that will work in any browser that requires no special downloads. I can imagine a simple system where the user browser updates the server with the current location URL but how to see the mouse clicks and dynamic Javascript changes etc.
Edit: This is called "cobrowsing" see wikipedia for a list of solutions
Why not use an existing screen-sharing solution, like http://join.me ?
unblu allows two users to interact with the same website
requires no download
works with Javascript/AJAX etc
works of SSL
can be either cloud or privately hosted
There are others that I have not investigated - you can see a list in the cobrowsing wikipedia page.
I'm sorry if this is a newbie question but I don't really know what to search for either. How do you keep content from a previous page when navigating through a web site? For example, the right side Activity/Chat bar on facebook. It doesn't appear to refresh when going to different profiles; it's not an iframe and doesn't appear to be ajax (I could be wrong).
Thanks,
I believe what you're seeing in Facebook is not actual "page loads", but clever use of AJAX or AHAH.
So ... imagine you've got a web page. It contains links. Each of those links has a "hook" -- a chunk of JavaScript that gets executed when the link gets clicked.
If your browser doesn't support JavaScript, the link works as it normally would on an old-fashioned page, and loads another page.
But if JavaScript is turned on, then instead of navigating to an HREF, the code run by the hook causes a request to be placed to a different URL that spits out just the HTML that should be used to replace a DIV that's already showing somewhere on the page.
There's still a real link in the HTML just in case JS doesn't work, so the HTML you're seeing looks as it should. Try disabling JavaScript in your browser and see how Facebook works.
Live updates like this are all over the place in Web 2.0 applications, from Facebook to Google Docs to Workflowy to Basecamp, etc. The "better" tools provide the underlying HTML links where possible so that users without JavaScript can still get full use of the applications. (This is called Progressive Enhancement or Graceful degradation, depending on your perspective.) Of course, nobody would expect Google Docs to work without JavaScript.
In the case of a chat like Facebook, you must save the entire conversation on the server side (for example in a database). Then, when the user changes the page, you can restore the state of the conversation on the server side (with PHP) or by querying your server like you do for the chat (Javascript + AJAX).
This isn't done in Javascript. It needs to be done using your back-end scripting language.
In PHP, for example, you use Sessions. The variables set by server-side scripts can be maintained on the server and tied together (between multiple requests/hits) using a cookie.
One really helpful trick is to run HTTPFox in Firefox so you can actually monitor what's happening as you browse from one page to the next. You can check out the POST/Cookies/Response tabs and watch for which web methods are being called by the AJAX-like behaviors on the page. In doing this you can generally deduce how data is flowing to and from the pages, even though you don't have access to the server side code per se.
As for the answer to your specific question, there are too many approaches to list (cookies, server side persistence such as session or database writes, a simple form POST, VIEWSTATE in .net, etc..)
You can open your last closed web-page by pressing ctrl+shift+T . Now you can save content as you like. Example: if i closed a web-page related by document sharing and now i am on travel web page. Then i press ctrl+shift+T. Now automatic my last web-page will open. This function works on Mozilla, e explorer, opera and more. Hope this answer is helpful to you.
How to make static fixed HTML element on every page of site?
I mean - for example, it is music player on site. It's displaying in corner of page, and while navigating on site - it doesn't reload.
Also, If you open many pages of site (different tabs) than state of this element is the same on all pages. (If I change something in this element on one page - it's changed on every page).
For real example I can provide a link (I think, it's allowed to do this on this site):
http://www.jamendo.com/en/album/40689
If you click "Play" - music player is opened. If you open other artist in other window - two players will be the same. If you have changed volume in one window - volume is changed in other too.
What techniques are used here? Can you give some references to read about such technologies?
Hopefully the site is working the same as it was when you posted the link...
This site is using Flash which seems to be using LocalConnection and ExternalInterface. The Flash object in the popup is the one actually playing the music. The controls on the page are calling a Flash object on the page which just sends commands to the popup.
Well I can give you a general idea of how I would do it.
You would need to persist the data of the feature you wan't to be the same across all pages.
For example: if you wanted something to be in the same position across all pages, you could store the current position of that variable in a session variable, cookie, or database for that particular user/ip address. Then you would make GET requests to the server "asking" for the most recent position of whatever you're tracking. And if it's different update the position accordingly.
You would need to make use of Javascript, A programming language, and some kind of data persistence.
If you want to read about the newest stuff, you could easily do this with node.JS. There is a library out there that makes it very easy to reflect server side changes on the client w/o making GET requests (making it a good for chat applications).
You can use local storage to store the current settings and poll them from each open instance. You won't need to use AJAX or the server if you only care about the settings being synchronized across one machine.
I want to create a web crawler/spider to iteratively fetch all the links in the webpage including javascript-based links (ajax), catalog all of the Objects on the page, build and maintain a site hierarchy. My question is:
Which language/technology should be better (to fetch javascript-based links)?
Is there any open source tools there?
Thanks
Brajesh
You can automate the browser. For example, have a look at http://watir.com/
Fetching ajax links is something that even the search-giants haven't accomplished yet. It is because, the ajax links are dynamic and the command and response both vary greatly as per the user's actions. That's probably why, SEF-AJAX (Search Engine Friendly AJAX) is now being developed. It is a technique that makes a website completely indexable to search engines that when visited by a web browser, acts as a web application. For reference, you may check this link: http://nixova.com
No offence but I dont see any way of tracking ajax links. That's where my knowledge ends. :)
you can do it with php, simple_html_dom and java. let the php crawler copy the pages on your local machine or webserver, open it with an java application (jpane or something) mark all text as focused and grab it. send it to your database or where you want to store it. track all a tags or tags with an onclick or mouseover attribute. check what happens when you call it again. if the source html (the document returned from server) size or md5 hash is different you know its an effective link and can grab it. i hope you can understand my bad english :D