How to real time data after every second? - javascript

I want to show real time data, currently i used this code
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(function (){
$('#load_updates').load('comment.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<head>
<body>
<div id="load_updates"></div>
</body>
Now everything is fine, this code is working and shows data from comment.php, but the problem is that it refreshes data after 10 seconds and it's too much time. I tried to reduce the milliseconds but it's not working

There are some technologies to build a real time application. You can use WebSockets for example.
This link has some options:
https://entwickler.de/webandphp/building-realtime-web-apps-with-php-125787.html

Related

Refresh page every couple minutes

I need to open 192.168.1.1 every couple of minutes. I have the following code but doesn't work:
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<script>
setInterval(function() {
location.replace("http://192.168.1.1")
}, 60 * 1000);
</script>
</body>
</html>
Adding to the iframe solution, in case you want it to open in a new tab
<script>
var URL = "http://example.com";
setInterval(function() {
var win = window.open(URL, "_blank");
/* uncomment if you want it to close
setInterval(function() {
win.close()
}, 1500);
*/
}, 2000);
</script>
like the iframe, not replacing the current tab ensures your code keeps running.
Your code won't work as you want it to, because once you change the location for the first time, it will load the router site and your code won't be executed anymore.
Since you can't control the router page code, you can load the router website into an iframe:
<iframe src="http://192.168.1.1"></iframe>
and put this in your <head> to refresh the site every 300 seconds:
<meta http-equiv="Refresh" content="300">
(adjust the number of seconds to your needs)

Getting an AJAX call to reload a div every x minutes

I'm new to Javascript and AJAX so please excuse my newb question. I have an AJAX call (that is working) and I'd like to have it refresh the contents of a div every 5 minutes (I'm not using jquery). This is how I'm calling the AJAX function in the <head></head> of my html page:
<script type=text/javascript>
setInterval(ajaxCall(), 300000);
</script>
The initial page load populates the div, but the content of the div doesn't refresh after 5 minutes. What am I doing wrong?
Change your code to this:
setInterval(ajaxCall, 300000);
To pass an argument:
setInterval(function(){ ajaxCall(someCoolValue); }, 300000);
Notice the lack of parentheses in ajaxCall. You want to pass the function itself, not call the function. More examples on MDN.
You need to wrap your ajaxCall.
<script type=text/javascript>
setInterval(function(){ ajaxCall(); }, 300000);
</script>
Here
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<div id="links">
</div>
<script language="javascript" type="text/javascript">
var timeout = setTimeout(reloadChat, 300000);
function reloadChat () {
$('#links').load('test.php #links',function () {
$(this).unwrap();
timeout = setTimeout(reloadChat, 300000);
});
}
</script>
Also you are calling it wrong correct syntax would be ,
setInterval(ajaxCall, 300000);
Hope it helps :D

Create live video of jpeg snapshots using Gstreamer and JavaScript setTimeout()

I am trying to create a live "video" stream using an tag on a web page.
A Gstreamer pipeline continually overwrites a file "snapshot.jpeg" with a new frame grabbed from a webcam using video4linux2 with a framerate of 15 fps.
A web page renders the image without caching every 100 ms.
The problem is that I get ERR_CONTENT_LENGTH_MISMATCH (in browser console) for the image source on many frames. This is shown as a broken link in the browser.
GStreamer 0.10 syntax
gst-launch v4l2src ! video/x-raw-yuv, width=640, height=480, framerate=15/1 ! jpegenc ! multifilesink location=/var/www/video/snapshot.jpeg
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<img id="snapshot" src="snapshot.jpeg"/>
</body>
</html>
JavaScript
$(function() {
function refreshImage(){
$("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
setTimeout(refreshImage, 100);
}
refreshImage();
})
Try to hook setTimeout to Image.onload:
$(function() {
function refreshImage(){
$("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
}
$("#snapshot").onload = function(){
setTimeout(refreshImage, 100);
}
refreshImage();
})

How to automatically refresh ejs page

Im new with ejs. As I was trying out an app. I want to refresh the page every 5 sec.
I got a code
<script language="javascript" type="text/javascript">
$(document).ready(function() {
setInterval("location.reload(true)", 5000);
});
</script>
But how to include jquery in ejs? How to embed this code in ejs page?
Try this
tags: <meta http-equiv="refresh" content="5">. That simple. The "5" is the number of seconds. If you want to increase the time to say 20 minutes, you simply put in "1200" and so on.

Get time of page loading start in JavaScript

In JavaScript it is possible to wait for onLoad which may be used to specify the time of page loading completion.
Every HTTP response is sent along with Date: header which contains the time server sent a response.
Is there a way in JavaScript to get the time of page started loading?
Something similar to response Date: header.
It would be useful for cases when JavaScript is injected into page after some delay.
new Date(performance.timing.connectStart) in chrome, firefox, IE9, etc (caniuse)
demo
console.log(new Date(performance.timing.connectStart));
Try storing a value from var d= new Date(); var requested = d.getTime(); and execute it when the page loads.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var loadDate;
</script>
</head>
<body onload="loadDate=new Date();">
<button onclick="alert(loadDate);">show load Date</button>
</body>
</html>
I would just pass a timestamp from the server-side script to the browser via a cookie or inline JS. E.g. in PHP:
<script>
var timestamp = new Date(<?php echo time(); ?>);
</script>

Categories