How I refresh (update) a parameter in a time intervals using [spring-boot and ajax]

46 views Asked by At

I trying to create a small program to understand how I can refresh different parameters in a web based environment.

The goal is to create a web page and update a parameter in regular intervals from a java @RestController

I am new to web programming, so please let me know If I am not clear.

I created a spring-boot app that refresh the time every second successfully. However when I display my ModelAndView parameter that displays once the value but it does not refresh it after it changes.

It works for the update of time using only java script.

Below is my jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello</title>
</head>
<body onload="startTime(); startMessage();">

<div id="txt1"></div>
<script>
function startTime() { // Works
  const today = new Date();
  let h = today.getHours();
  let m = today.getMinutes();
  let s = today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  document.getElementById('txt1').innerHTML =  h + ":" + m + ":" + s;
  setTimeout(startTime, 1000);
}
  
function checkTime(i) {
      if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
      return i;
    }
</script>

<div id="txt2"></div> // Works only when I refresh the page (not what I want)
<script>
function startMessage() {
  document.getElementById('txt2').innerHTML = ${messageData};
  setInterval(startTime, 500);
}
</script>

<script>
// Refresh the whole page (works) but not what I want
// setTimeout(function(){
//   window.location.reload();
//}, 1000);
</script>

</body>
</html>

And the java RestController

// This is a java class with a small thread just to increment a value
@RestController
public class HelloWorldController {
    public static int value = 1;
    Boolean stop = true;
    Thread thread = null;

    void startThread() {
        thread = new Thread() {
            public void run() {
                try {
                    while (stop) {
                      value++;
                      System.out.println("Thread: " + value);
                      Thread.sleep(1000);
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };

        //stop = true;
        thread.start();

    }
    
    @RequestMapping("/testTheData")
    public ModelAndView testData() {
                // Initialize only once the thread
        if (thread == null)
            startThread();

        System.out.println("Request:" + value);
        return new ModelAndView("testData", "messageData", value);
    }
}

I tried already with java script, spring, and boost (see code). I also tried add ajax but I am not sure how to change the code for that (It did not work).

I would appreciate any examples or guidance where to search. Even if you suggest other web technology to use.

The ultimate goal is to create a web app (change a swing gui application) that displays a table refreshed every second from data retrieved from a tcp connection (from another thread).

Thank you for all help

0

There are 0 answers