We use a heatmap at work (it is secure so I can't post it here and I certainly cannot give the url). Now the heatmap is a sigle image, but it is clickable on different segments - There are different icons on the map and each of them pops up a different window(So it is not just a single click event for the whole image)...
Now this map is generated by a program called Whatsup Gold, and it is definitely not Flash...
The map constantly monitors line connection activity - When an internet line goes down, the
green icon turns red. The map is refreshed every few minutes...
What I want to know: Is there a way, either using a browser plugin, or Javascript, or any other method to notify me that the status of the map has changed(any change on the map) without having to open the browser window everytime?
Here is the part of the markup of the map...(the whole map)
<a href="mappickhost.asp?map=WhatsUpTL.wup">
<img border="0" src="WUG1.jpg" ismap="">
</a>
Update:
Request and Response headers(As retrieved from Firebugs Network tab)
Request:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.5
Authorization: Basic dGxpbms6dGxpbms=
Cache-Control: max-age=0
Connection: keep-alive
Host: ***************
Response
Cache-Control no-cache
Content-Type image/jpeg
Date Fri, 17 May 2013 07:06:30 GMT
Expires Mon, 17 Jul 1980 20:00:00 GMT
Pragma no-cache
Server WhatsUp_Gold/8.0
I have added a screenshot of firebug console in firefox (press F12 to open it). I executed a xmlhttprequest (line at the bottom) and you can see (the black line) that it connected to stackoverflow. Firebug shows xhr connections in the console by default but you can select what you want to see by clicking the little arrow button to the right of the word "Console" in the tab that activates the console.
Even having the console open with StackOverflow shows that the site connects every so often to update question status and comments.
If nothing shows up there than it might show in the Net tab. It has to make a connection to somewhere to see if network is still up. If it connects to a service than xhr is likely if it just tries to download a textfile sometmes or sets the src of an image than it'll show up only in the net tab every time it checks.
We use a heatmap at work (it is secure so I can't post it here and I certainly cannot give the url). Now the heatmap is a sigle image, but it is clickable on different segments
Surely it's not just the image that's causing interaction. Plain images can't do that. If it's not Flash, then it could be JavaScript powering it. There must be some library and it could have an API. I suggest you start reading the documentation (if any).
The map constantly monitors line connection activity
This is done in a lot of ways, and the most common is polling AJAX or Web Sockets. To check this out, you can take a look at the Network Tab of the browser's debugger. If there's a supported API, you can check it out first and save the hassle of debugging the implementation.
If no API exists, inspect the requests and find a way to replicate it. Once you can replicate it or use the API, you can create your plugin or create a custom app for it.
Related
I am trying to check whether there is an internet connection from within a chrome plugin. While there is API call available that suggests to do check that, it only checks if there is internet connection possible, theoretically.
To get this information, I try to load an Image
checkConnection() {
var newImg = new Image;
newImg.src = url;
newImg.onload = function() { ... }
newImg.onerror = function() { ... }
}
I do use the Image object to avoid all these problems with Same-Origin-Policies that occur when using get request with JavaScript (I am using the code from within a plugin, so there is no address that has the same origin as my code :/ ). In principle, my code from above works. I have a setTimeout that calls checkConnection every other time. However, when the image was loaded successfully once (per plugin reload) it is stored in the cache and is loaded from there when the connection fails.
Do you have an idea how to bypass this problem? Or do you know of a smart way to check the internet connection from within a Chrome plugin without setting up a server that might tolerate the origin of my request?
You have 3 options that I know of...
Checking the internet connection
After some quick Googling I found navigator.onLine. It looks like you can use this to check internet connectivity, but it is not always entirely accurate.
Stopping the image from caching
If you have control of the domain where the image is hosted you can set headers telling the browser not to cache the image.
Cache-Control: no-cache, must-revalidate // HTTP/1.1
Expires: Sat, 26 Jul 1997 05:00:00 GMT // Date in the past
If you do NOT have control of the domain, when loading the image try appending a GET variable to the URL with a random number or the current timestamp.
E.g.
https://example.com/image.png?time=1496222683
https://example.com/image.png?time=1496223323
https://example.com/image.png?time=1496222313
This can trick the browser into thinking you are requesting a new resource.
I don't know how to ask this question but, i am developing a single page application(SPA) using nodejs on the server side and whenever the data gets updated the user gets informed, however if the user has refreshed wouldn't the json data and every script file just vanish an get requested from the server again?
How can i prevent the javascript files and specifically the file that has the json data from being requested again on page refresh?
is there a way to solve this problem?
JavaScript files are not special. Just like images, style sheets, and HTML files, they get re-requested as necessary by the browser.
And so the same techniques for minimizing re-retrieval of them apply. The browser can reuse its cached copy of the file if you configure your web server to set appropriate caching headers when responding with the file data (provided the browser still has a copy).
You can see an example of this on the Google Libraries site. If you request a specific version of a library file (say, jQuery 1.10.1) when your web console open to the network tab, you'll see that Google returns it with these headers (irrelevant ones omitted):
Age: 238894
Cache-Control: public, max-age=31536000
Date: Thu, 09 Jan 2014 20:47:08 GMT
Expires: Fri, 09 Jan 2015 20:47:08 GMT
Last-Modified: Tue, 09 Jul 2013 11:31:25 GMT
Note that the file is allowed to be cached, without revalidation, for a year. So if the user refreshes the page, the browser can reuse its cached copy (if it has one). (This is not what Google does if you use one of the wildcard "any version of jQuery 1.10" URLs, because of course the tip version changes...)
Some browsers may bypass their cache with a refresh (particularly a "force" refresh like Ctrl+F5). In that case, they may at least send an If-Modified-Since request.
If you want to prevent cache and reload javascript at every request, make suer you use the correct header:
Cache-Control:max-age=0
Your browser will undertand to refresh all resources at every request.
For a better understanding about cache, please give a look at this A/Q
As for json data, you can save it in local storage (http://www.w3schools.com/html/html5_webstorage.asp)
Perhaps you can try Application Cache and Local storage.
I'm making kind of social website. And i make a post edit page. The problem is when i finish edit post and click 'SAVE EDIT'. i use
window.location='post_info.php?post_id='+postid; on AJAX to go back to post info page.
But it appear to be old content from cache.
question is what should i do to make my new post info appear immediatly when open it.
You just need to set the cache control HTTP headers for your HTML document so that the document is always loaded from the server and not the browser (or proxy) cache.
You can't do this with JavaScript or HTML (meta http-equiv is a joke), you need to set real HTTP headers.
Either
Cache-Control: max-age=0
or
Cache-Control: no-cache
should get you what you want. See this answer for an explanation of the differences between them and Mnot's caching tutorial for a more in depth look at caching and HTTP.
You can set these with a server side programming language (e.g. Perl, Python or PHP) or by configuring the web server directly. The specifics depend on which of those you choose.
you should try this:
Use Category: Shorthand Methods: AJAX ajax
Change your code to
window.location='post_info.php?post_id='+postid+"&"+ new Date().getTime();
Almost all of us have heard of services like spypig . I was wondering how do they track client's IP when an image from their server get loaded. To do the same I made an aspx page with Response.ContentType = "image/png" but for this my link goes as
www.something.com/imagePage.aspx?id=rndmval
Is there any method by which whenever an image from my server say "mysite.com/images/me.gif" gets loaded on a system i get notified with the ip of that system?
Its similar to monitoring an image. I like the way spypig works, it can monitor an image whenever it gets loaded on any browser. Does anybody know how do they do that???
You get the request, extract the IP address of the client from the request (not sure how to do that in ASP, but there certainly is a way to do that) and store it in a database / send an e-mail / whatever..
No need to set Content-type to image/png, it's just a nicer way to tell the browser, who is expecting an image, "here it is your image", but unless you return an actual 1x1 PNG image, it doesn't make much sense.
Update
The IP address should be contained in:
Request.ServerVariables("remote_addr")
If you want a "clean" url, such as http://example.com/path/to/image.gif, you have to do something webserver-side; one common hack used in PHP is to make the web server "rewrite" a request to /path/to/non-existent/file to something like /path/to/my/script.php?path=/path/to/non-existent/file, not sure how to do that with ASP/IIS though...
Update: How does spypig work
They give you an "image to be put in emails", that is, an <img> tag with a src="" pointing to some page on their server, containing a unique identifier in its name, for example:
http://example.com/track-user.asp?id=ABCD12345678
Once the user opens the email containing the image (beware that most email programs require the user to click "load external content" before images are actually loaded -- that is, an anti-tracking measure), a request is sent to the server which stores somewhere a record containing the id, date, ip address and any other interesting information.
Knowing who you sent a certain id to, you can track which is the e-mail that got opened.
(one common trick to get the user click on "load external images", is to send an e-mail that heavily require images to display properly, so the user is encouraged to load them -- and get tracked).
Looking quickly at this spypig.com it seems that when you create an image it's given a unique ID. This ID is then stored in the database and when someone later enters this image, the system can match this unique ID with e-mail address that has to be notified.
Tracking IPs is actually much simpler. HTTP works on top of TCP/IP so you always know what is the address of the client (it might be a firewall/NAT/spoofed address though).
In ASP this might be useful: How to get a user's client IP address in ASP.NET? but virtually any HTTP server-side technology will give you access to this information. Look how much my web browser sends when loading an image (any e-mail client will provide similar information):
GET /rndmVal/img.gif HTTP/1.1
User-Agent: Opera/9.80 (X11; Linux i686; U; pl) Presto/2.10.229 Version/11.64
Host: localhost:8080
Accept: text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1
Accept-Language: pl-PL,pl;q=0.9,en;q=0.8
Accept-Encoding: gzip, deflate
Cache-Control: no-cache
Connection: Keep-Alive
The IP address of client computer can be obtained from TCP/IP connection.
I am trying to refresh a page, but WANT to use the cache and can't figure out how to do this. There are two situations:
If I click in the URL bar and hit enter (or visit the page from somewhere else) it reloads the page/images from the cache. GREAT!
If I click on the refresh button or use Javascript to refresh the page it grabs all the images again and takes forever. NOT GREAT!
I've tried: top.location.reload(false); and top.location.reload(true); (I'm sending this from in an iFrame) and neither used the cache. I'm avoiding using location so it doesn't end up in the browser history twice.
Question: How do I reload the page using the cached images? Is there a different javascript function or is this a mod_expires issue?
Thanks for any help in advance!
EDIT: (info from chrome: developer tools)
When navigating to the page I get "From Cache" for all images
When refreshing page I get "304 - Not Modified" for all images (and it takes the time to download each)
EDIT 2: (Headers from an image, safari: developer tools)
Javascript: top.location.reload(false); (No Cache!)
Status Code:304 Not Modified
Request Headers
Cache-Control:max-age=0
If-Modified-Since:Tue, 28 Jun 2011 07:13:17 GMT
If-None-Match:"104684ae-a7d-66e41d40"
Referer:http://getdirectus.com/dev/media.php
User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_7; en-us) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1
Response Headers
Cache-Control:max-age=157680000
Connection:Keep-Alive
Date:Tue, 28 Jun 2011 16:56:50 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:56:50 GMT
Keep-Alive:timeout=5, max=94
Server:Apache/2.0.54
Navigating to page: (Uses cache)
Status Code:200 OK
Response Headers**
Accept-Ranges:bytes
Cache-Control:max-age=157680000
Connection:Keep-Alive
Content-Length:2685
Content-Type:image/jpeg
Date:Tue, 28 Jun 2011 16:54:20 GMT
Etag:"104684ae-a7d-66e41d40"
Expires:Sun, 26 Jun 2016 16:54:20 GMT
Keep-Alive:timeout=5, max=99
Last-Modified:Tue, 28 Jun 2011 07:13:17 GMT
Server:Apache/2.0.54
The documentation for window.location.reload( false ); says it will load from cache. If that isn't happening then you may be seeing a browser bug. See if you can replicate the problem in another browser.
EDIT (for your edit): You are seeing that behaviour because you don't have an Expires header set in the future. You will need to add an Expires header in Apache.
window.location.href = window.location.href;
If the location contains a #, be sure to remove it before setting href.
If you want to enable caching in the client, mind sending Expire headers, e.g. with mod_expires
Using this site, I only got green image with location.refresh(true);. With location.refresh(); or location.refresh(false); I got the red image. Working ok, I guess.
There are two separate things to consider here:
1: the request... browser -> server
2: the response... server -> browser
When you refresh a page you cannot get around the browser doing a requests for page assets to the server.
What you can do is make sure the server sends a minimal response.
The best way to achieve this, is to use etags in your response headers. That way the browser will send a if-none-match request to the server, and get a 304 Nothing changed response back assuming nothing has been modifed.
Your second request was initiated by manually refreshing the page. When you do this, the browser sends up an additional cache-control:max-age=0 header with the request. This is where the 304 (Not Modified) is coming from.
If you navigate within the site (using links), the browser will continue to use its cache.