如何使用websocket从数据库获取数据来刷新视图

Question

我需要在不刷新整个页面的情况下刷新视图的一部分。

在我的索引中。html页面我有三个面板，其中一个按状态显示票证数量，每次创建或更新新票证时，我都需要刷新这个数字。我使用Java和Spring Boot以及Thymelaf来构建我的应用程序。

这是我的观点：

我现在就是这样做的：

model.addAttribute("resolvedTickets", atendimentoService.findAllTicketsByStatus(STATUS_RESOLVED).size());

我曾尝试使用websockets，但我不知道如何获得此功能并刷新面板。

Answer 1

在标准的web交互中，客户端（即您的web浏览器）向服务器发送请求。您的服务器接收到请求，并发回要在浏览器中显示的信息，然后终止连接。

WebSocket是在客户端和服务器之间创建持久的双向连接的一种方式，但它需要双方的合作。许多共享服务器不允许WebSocket，因此您首先必须确保您的服务器能够提供WebSocket。（我从你的屏幕截图中看到你正在Heroku上运行，运行WebSocket应该没有问题。）

在服务器端，您需要设置对传入WebSocket请求的处理。我不知道您用什么语言编写了服务器代码，所以我无法提供任何指导，但有很多库可以用大多数语言编写WebSocket的服务器端部分。

在客户端，您需要设置WebSocket客户端。MDN有一个关于WebSocket的很好的指南，解释了你需要做什么。基本上，你所要做的就是监听传入的消息并增加计数器。

var count = 0;
var exampleSocket = new WebSocket("ws://example.com/socket");
exampleSocket.onmessage = function(event) {
    count++;
    document.getElementById('myTicketCounter').innerHTML = count;
}

对于某些事情，WebSocket是大材小用。如果您发现这是太多的工作，而回报太少，您也可以设置一个AJAX调用，每隔几分钟启动一次，在服务器上发送另一个页面，并相应地返回票证数量和更新。它不会是瞬间的，但是如果你不需要精确到秒的分辨率，它可能就足够了。您可以根据需要将间隔调整为长或短（在某种程度上；用不断的请求轰炸您的服务器会让您慢一点）。