Tips for updating the display by fetching data from a database through a websocket

Question

Tips for updating the display by fetching data from a database through a websocket

I am looking for a solution to update a specific part of my webpage without having to refresh the entire content. On my index.html page, I have three panels displaying various ticket statuses. I want to automatically update the number of resolved tickets shown in one of the panels whenever a new ticket is created or an existing one is updated. My application is built using Java with Spring Boot and Thymeleaf.

Here is a snapshot of my current view:

https://i.sstatic.net/fxyqc.png

This is how I am currently handling the updates:

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

I have experimented with using web sockets, but I am struggling to implement a solution that efficiently updates these panels in real-time.

javascript java spring-boot thymeleaf java-websocket

Answer 1

Answer №1

When your web browser interacts with a server in a standard way, it sends a request and the server responds by providing information to display on your browser before ending the connection.

WebSockets offer a different approach, allowing for a continuous two-way connection between client and server. However, not all shared servers support WebSockets, so you need to verify that your server can handle them. (Based on your use of Heroku, WebSockets should work without issues.)

To implement WebSockets on the server side, you must configure how incoming WebSocket requests are managed. There are various libraries available for handling this aspect in most programming languages.

On the client side, setting up the WebSocket client involves listening for messages and updating a counter accordingly. You can refer to MDN's comprehensive guide on WebSocket client applications for detailed instructions.

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

While WebSockets offer real-time capabilities, they may be unnecessary for certain tasks. If the setup seems too complex for minimal benefit, consider using AJAX calls at intervals to retrieve ticket data from the server. Although not instantaneous, this method provides updates without overwhelming the server with frequent requests.

Answer 2

When your web browser interacts with a server in a standard way, it sends a request and the server responds by providing information to display on your browser before ending the connection.

WebSockets offer a different approach, allowing for a continuous two-way connection between client and server. However, not all shared servers support WebSockets, so you need to verify that your server can handle them. (Based on your use of Heroku, WebSockets should work without issues.)

To implement WebSockets on the server side, you must configure how incoming WebSocket requests are managed. There are various libraries available for handling this aspect in most programming languages.

On the client side, setting up the WebSocket client involves listening for messages and updating a counter accordingly. You can refer to MDN's comprehensive guide on WebSocket client applications for detailed instructions.

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

While WebSockets offer real-time capabilities, they may be unnecessary for certain tasks. If the setup seems too complex for minimal benefit, consider using AJAX calls at intervals to retrieve ticket data from the server. Although not instantaneous, this method provides updates without overwhelming the server with frequent requests.

Tips for updating the display by fetching data from a database through a websocket

Answer №1

Similar questions

Ways to extract information from a JSON dataset

Please explain this ES6 syntax to me: Using a colon after a function call

Discovering duplicate values in a JSON object using JavaScript (JQuery)

Retrieving specific information from the Model and returning it as a JSON response using annotations

Utilizing JavaScript or jQuery in MVC4 to showcase information for the primary record

Avoid refreshing the page when adding an item to the cart

Encountering challenges with managing global variables in my Node.js application

Utilize Express.js to load a random HTML page

Retrieve individual item

jQuery Form: Despite the Ajax response being visible on the page, it does not appear in the source code

"Delivering dynamic HTML content using React/Redux variables in the production environment

Fetching data in a post request seems to be causing an issue with FormData image being

Angular - The connections between deeply nested object models are established

Shuffling the color of an image element

Is the Vue-portal enabled conditionally?

Conceal the header and footer during the loading of particular pages

The attempt to access a Spring Boot webservice using AngularJS and the GET method resulted in a 500 status error, indicating that the operation

I am interested in incorporating the ability to select and scroll the window without needing to interact with the scroll bar by

Invoking a C# function inside a cshtml file

There seems to be an issue with the accurate calculation of the screen width while utilizing the scrollbar-gutter