How do I programmatically refresh a browser

2019-03-08 02:10发布

站内问答 / JavaScript
1979 10 6

I have three computers; Server, Client and Viewer. I am in control of the server and the viewer. workflow

  1. The user on the Client connects to the Server and is presented with a webpage.
  2. Through a php script the user uploads an image.
  3. The image is imbedded in some html.
  4. The Viewer is a computer totally without user interaction - there is no keyboard. The Viewer is always at all time running a web browser, displaying the picture page.

My problem now is that even though the picture changes on the server disk, the webpage is not updated. How do I refresh the web browser on the viewer, or part of the webpage?

I know html, css, javascript, php and ajax, but apparently not well enough.

10条回答
Root（大扎）
2楼-- · 2019-03-08 02:33

You can use AJAX requests to help. For example, what you are doing is polling the server for the image every five seconds. Instead you could poll the server for a new image id and use that id instead of the random number for the source of the image. In this case the src attribute will only change/reload when there is a new image.

<script language="JavaScript"><!--
function refreshIt() {
   if (!document.images) return;
   $.ajax({
      url: 'latest-image-id.json',
      success: function(newId){
          document.images['doc'].src = 'doc.png?' + newId;        
      }
   });
   setTimeout(refreshIt, 5000); // refresh every 5 secs
}
//--></script>
</head>
<body onLoad=" setTimeout(refreshIt, 5000)">
<img src="doc.png" name="doc">

An alternative is to get a notification from the server when the image changes via a web socket.

查看更多
0人赞 添加讨论(0) 举报
做自己的国王
3楼-- · 2019-03-08 02:35

I have the exact same application. Just use WebSockets.

You can start a websocket connection and the server will inform the Viewer whenever it gets an update. You can send the updated image through websocket, fully asynchronous without disturbing the display or user interaction.

If you use timers, you will not get quick updates or you will keep refreshing page without use.

Details:

Will need a Websocket server like pywebsocket or phpwebsocket.

Client:

Will need HTML5 websocket support, all of the current browsers support it.

Need to register for a message when an image update happens. It is like registering a callback.

Example:

wSocket = new WebSocket('ws://' + serverIP + ':' + serverPort + '/images');

wSocket.onopen = function() {
    console.log("Primary Socket Connected.");

    connectedPrimary = true;

    wSocket.send("sendImageUpdates");
};

wSocket.onmessage = function(evt) {
    // evt is the message from server

    // image will be representated as a 64 encoded string

    // change image with new one
    $("#image").attr('src', 'data:image/png;base64,' + evt.data);
}

wSocket.onclose = function() {
    console.log("Primary Socket Closed.");

    wSocket = null;
};

wSocket.onerror = function(evt) {
    alert(evt);
}

Whenever the server sends an update, the function mapped to wSocket.onmessage will be called, and you can do whatever you need to do with it.

Server:

Will listen for a connection from client (can be made to support multiple clients). Once a connection is made and the message "sendImageUpdates" is received, the server will wait for any updates in image. When a new image is uploaded, server will create a new message and send to client.

Pros

  1. Will get updates as soon as an image is uploaded and only when an image is uploaded.
  2. Client will know that image has changed and can do additional functions.
  3. Fully asynchronous and server driven.
查看更多
0人赞 添加讨论(0) 举报
劫难
4楼-- · 2019-03-08 02:40

The easiest is to use AJAX pooling.
For that in the php file handing the upload, when a new photo is uploaded save a unix timestamp in a file:

file_put_contents('lastupload.txt', strval(time())); // Save timestamp of upload

Create another php file (ex: polling.php) that will handle AJAX calls and return the unix timestamp of the last upload:

echo file_get_contents('lastupload.txt'); // Send last upload timestamp

In the Viewer javascript code make an AJAX polling that will detect a change in the timestamp and refresh the image when needed:

$(function() {
   setInterval(polling, 1000); // Call polling every second.
});
var lastupload = 0;
function polling() {
   $.ajax({
      url: 'polling.php',
      success: function(timestamp){
          if (timestamp > lastupload) { // Is timestamp newer?
              document.images['image'].src = 'image.png?' + timestamp; // Refresh image
              lastupload = timestamp;
          }
      }
   });
}

I haven't tested the code, so there might be mistakes but this is the idea.

查看更多
0人赞 添加讨论(0) 举报
趁早两清
5楼-- · 2019-03-08 02:42

You need to implement client long-polling connection with server what is called COMET or make use of socket if your browser supports websocket.

查看更多
0人赞 添加讨论(0) 举报
放我归山
6楼-- · 2019-03-08 02:48

The best solution would be writing a small php script on the viewer web browser to periodically check the image and if its changed it will reload it. As the php code runs on server side you can do it easily. I hope this helps if you need code snippet let me know.

查看更多
0人赞 添加讨论(0) 举报
我欲成王，谁敢阻挡
7楼-- · 2019-03-08 02:50

In javascript, there are a few ways to refresh programmatically.

The preferred method is location.reload()

Another way is by setting the location.href property, the browser automatically goes to the new url, so location=location or location.href=location.href would also do that.

Though the second method probably looks weird.

To recap, that's:

location.reload();
//or
location.href=location.href;
//or
location=location;

I hope this helped.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)