Refresh data from database constantly

Question

I have this Spring VMC table which I would like to display:

@Controller
public class FileImportsController {

    private EntityImportRequestsService entityImportRequestsService;

    @Autowired
    public FileImportsController(EntityImportRequestsService entityImportRequestsService) {
        this.entityImportRequestsService = entityImportRequestsService;
    }

    @GetMapping("/imported_files")
    public String viewHomePage(Model model) {
        List<EntityImportRequestsTable> listProducts = entityImportRequestsService.findAll();
        model.addAttribute("listProducts", listProducts);
        return "index";
    }

}

page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <title>Product Manager</title>
</head>
<body>
<div align="center">
  <h1>Product List</h1>
  <table border="1" cellpadding="10">
    <thead>
    <tr>
      <th>Product ID</th>
      <th>Name</th>
      <th>Brand</th>
      <th>Made In</th>
      <th>Price</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="product : ${listProducts}">
      <td th:text="${product.requestId}">Product ID</td>
      <td th:text="${product.name}">Name</td>
      <td th:text="${product.brand}">Brand</td>
      <td th:text="${product.madein}">Made in</td>
      <td th:text="${product.price}">Price</td>
    </tr>
    </tbody>
  </table>
</div>
</body>
</html>

How I can pull database table data every 5 seconds and refresh the table data?

Anass Kartit · Answer 1 · 2022-12-17T11:24:45.553

While you can still use javascript setInterval function to call the api like this:

setInterval(function() {
  $.ajax({
    url: 'http://yourserver.com/getproductlist',
    type: 'GET',
    success: function(data) {
      // your code to refresh the table here
    }
  });
}, 5000);

Your will :

overloading the server, imagine thousands of people refreshing every 5 seconds.
risk of displaying old data: data will be 5 seconds old (example product can be out of stock).

A better choice would be to use real time solution using websocket and messaging using something like RabbitMQ:

RabbitMQ will send updates to the client when the data in the database is changed (trigger could help). This way, the client only receives updates when there is new data, rather than constantly polling the server for updates. if you are hosting your solution in azure you can use azure storage queues or service bus, in AWS you can use SQS. a similar question is here: Real time updates from database using JSF/Java EE

score 0 · Answer 2 · answered Dec 14 '22 at 16:01

0

Use the meta tag within the head element of your HTML as explained here: https://www.geeksforgeeks.org/how-to-automatic-refresh-a-web-page-in-fixed-time/

answered Dec 14 '22 at 16:01

Mike

17
5

score 0 · Answer 3 · answered Dec 16 '22 at 11:53

You did not explain, what your requirements exactly are. Does the data really change every 5 seconds? Or do you not want to miss one update?

To refresh your web-page use this head tag:

<head>
  <title>Product Manager</title>
  <meta charset="utf-8"/>
  <meta http-equiv="refresh" content="5">
</head>

But if the data only changes from time to time, I would use pushing (instead of pulling).

For example with HTML5 server-sent-events: https://www.w3schools.com/html/html5_serversentevents.asp

You can query the db table with a spring boot scheduler every 5 seconds, or you can use messaging on the server side whenever the data changes. (Which I would prefer. This could reduce the CPU load and bandwidth and be more sustainable.)

score 0 · Answer 4 · answered Dec 17 '22 at 07:45

0

Make a while loop that sleeps for 5 seconds and then fetches data from the database and updates the DOM. Do it in javascript.

answered Dec 17 '22 at 07:45

Abu Hurairah

146
7

score 0 · Answer 5 · answered Dec 17 '22 at 09:35

I think that what you try to do, is not possible without a different architecture, because you have here a server side rendered page which does not use websockets or something similar.

In a "modern world", you would have a Websocket Client connected to your Backend, which gets informed in real time, when there are changes to your Database Table. (regardless of the reactive way you know that the data changed or by using "primitive polling to your database table" in your backend and then pushing the changes on the websocket)

But if you want to leave it the way you have it now, I see only two options:

Try some AJAX, that updates this DOM Element periodically
Refresh the Page with JavaScript every X seconds, which in turn will reload the data, by performing the Rest API Call again

Refresh data from database constantly

5 Answers5