Прослушивание событий на стороне одного клиента и отправка ответа другим клиентам с помощью весенней загрузки - PullRequest
Новая
       12

Прослушивание событий на стороне одного клиента и отправка ответа другим клиентам с помощью весенней загрузки

0 голосов
/ 20 апреля 2020

Я работаю над веб-приложением Spring Boot и хочу реализовать следующие функции:

Всякий раз, когда клиент запускает запрос ajax и изменяет значения файловых объектов на стороне сервера, я хочу, чтобы другие клиенты заметить изменения и визуализировать страницу соответственно. Например:

enter image description here

Мой контроллер 

@Controller
@RequestMapping("/test")
public class TestController {

    @GetMapping("/ajax")
    public String ajaxShow(Model model) {

        return "index1";
    }   

}

Мой контроллер отдыха (для обработки ajax запросов) 

@RestController
@RequestMapping("/api")
public class TestRestController {

    private TestMob testMob = new TestMob("Goblin", 100);   

    @PostMapping("/damage")
    public TestMob damageMob(@RequestBody TestMob mob) {

        mob.damage();       
        testMob = mob;
        return testMob;
    }

    @GetMapping("/echo")
    public TestMob echoMob(){

        return testMob;
    }
}

Entity 

public class TestMob {

    private String name;
    private int hp;

    //getters, setters, methods, constructors
}

index1. html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Welcome</title>

    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/jquery.slicknav.min.js}"></script>

    <script type="text/javascript">
        function echo() {           

        $.ajax({
        headers: { 
            'Accept': 'application/json',
            'Content-Type': 'application/json' 
        },
        type: "GET",
        url: "/api/echo",

        success: function(response){
        // we have the response
        var obj = jQuery.parseJSON(JSON.stringify(response));

        document.getElementById('name').innerHTML = obj.name;
        document.getElementById('hp').innerHTML = obj.hp;
        },
        error: function(e){
        alert('Error: ' + e);
        }
        });

        setTimeout(echo, 1000);
        }

        echo();
        </script>

    <script type="text/javascript">
        function doAjaxPost() {         
        // get the form values
        var name = document.getElementById('name').innerHTML;
        var hp = document.getElementById('hp').innerHTML;

        $.ajax({
        headers: { 
            'Accept': 'application/json',
            'Content-Type': 'application/json' 
        },
        type: "POST",
        url: "/api/damage",
        data: JSON.stringify(
                {
                    "name": name, 
                    "hp": hp
                }),
        dataType:'json',
        success: function(response){
        // we have the response
        var obj = jQuery.parseJSON(JSON.stringify(response));

        document.getElementById('name').innerHTML = obj.name;
        document.getElementById('hp').innerHTML = obj.hp;
        },
        error: function(e){
        alert('Error: ' + e);
        }
        });
        }
        </script>

</head>
<body>

<p>Mob name</p>
<div  id = "name"></div>
<hr>
<p>Health</p>
<div  id = "hp"></div>
<hr>
<input type="button" value="damage mob" onclick="doAjaxPost()">

</body>
</html>

Способ, которым я реализовал это, кажется, работает отлично, как и сейчас, но если бы я работал с большие данные, а затем отправка «эхо» ajax запросов без причины каждую секунду кажется неправильным, поэтому я хочу найти более эффективную работу.

Я новичок в Интернете, поэтому я хотел бы знать если есть лучшее решение моей проблемы, передавая данные всем клиентам ТОЛЬКО если клиент выполнил запрос POST (здесь: с именем doAjaxPost ())

Хотел бы увидеть примеры кода, если это возможно, пожалуйста

...