Home / Questions / 38119
Accepted
Juan Pinzón
Asked: 2020-12-08 19:55:26 +0800 CST 2020-12-08 19:55:26 +0800 CST

What would be the optimal solution?

  • 772

I am making a small system of counting and sum of scores, and in the administrator part I want to show in real time the scores of each judge. For example, a judge can assign 3 scores between a range from 1.0 to 10.0, showing the administrator a table like:

Juez      | Puntaje 1 | Puntaje 2 | Puntaje 3 |  Total
          |           |           |           |
Juez 1    | 6.8       | 7.5       | 8.0       |  22.3
          |           |           |           |
Juez 2    | 7.2       | 8.1       | 9.1       |  24.4
          |           |           |           |
Juez 3    | 8.4       | 7.7       | 7.0       |  23.1
          |           |           |           |
Juez 4    | 4.7       | 8.2       | 8.5       |  21.4

The idea is that every time a score is changed, that score is displayed in real time, something like a central viewer.

Each judge accesses from a different computer, so to show the scores to the administrator in real time, I came up with some ideas such as:

  1. Use websockets to have a two-way communication each time the scores of each judge are modified, and when they have finished assigning the scores, they are saved in the database.
  2. Use ajax to save the scores in the database directly on each change made to the scores entries ( onchange()), then return them to the administrator page by refreshing it every so often through javascript ( setTimeout()).

So my question is:

Which of these solutions is optimal?

Would there be another way to do it?

javascript

3 Answers

  1. Best Answer

    The truth is that using AJAX or WebSockets will depend on each case. Their functionality and purpose are not the same, although they may overlap and can be used to perform similar tasks in some cases.

    In your example, it seems that the optimum would be to use WebSockets . With the WebSockets you will keep an open line with the server that will allow you to make a two-way communication (the judges send information, and the server returns the updated data).

    Instead, if you were to use AJAX you would run into at least these couple of problems:

    • You would be making multiple unnecessary AJAX calls . Even if no judge changes data, clients will still make periodic calls asking for new data, receiving the same data back, generating unnecessary traffic and data usage on both server and client. Note: WebSockets would also use bandwidth to keep the connection alive, albeit in a different way.
    • The system would not be real time per se . There would really be a lag or delay from when the data is changed until it is updated on the client, and I am not referring to the transport time on the network, I am referring to the time that passes between each setInterval()o setTimeout(). It may not be important in your particular case, but in critical applications, it is time that is wasted.

    Note: as rnd indicates in his comment , WebHooks are for server-server communications and therefore would not work for this particular case .

    If you want alternatives and other ways to do it, maybe you could consider using WebHooks , although the truth is that I have never used it and I don't know how it will work ( or if it could be used in this case it can't be used, see note above).

    The idea of ​​WebHooks (I hope I explain myself well) is to have a configured URL to which an HTTP request will be sent every time a specific action is executed (for example: commit , write a comment, etc). So every time an action is executed on the original page, an operation will be performed on another page.

    Although, as I said before, I don't know if it would help you in this particular case because it seems a bit more static and it might take a reload of the landing page to see the changes.

    • 5

  2. Good, since you use tables I recommend that you make a Grid and use the Kendo library . Make a controller in php that makes the queries to the DB and manage them with JSON format and with ajax you can only update the so-called DataSource , which is what makes the Ajax requests and then fills the Grid.

    It's easy to use and very fast, I've used it at work to receive participants from different types of races with real-time times, heart rate and other information...

    I leave you an example of use:

    <div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                    },
                    pageSize: 20
                },
                height: 550,
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{
                    template: "<div class='customer-photo'" +
                                    "style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
                                "<div class='customer-name'>#: ContactName #</div>",
                    field: "ContactName",
                    title: "Contact Name",
                    width: 240
                }, {
                    field: "ContactTitle",
                    title: "Contact Title"
                }, {
                    field: "CompanyName",
                    title: "Company Name"
                }, {
                    field: "Country",
                    width: 150
                }]
            });
        });
    </script>
</div>

    You have a php controller where you receive the information from the database and treat it, at the end you return a JSON, the datasource calls this controller, reads the information and paginates the information so that it is sent faster.

    Then in the Grid we mount the columns, we put the title that that column will have and below the name of the variable of the JSON field that contains the information to display, finally we wrap the dataSource in a setInterval()that what it will do is make another request each time to the php controller.

    This would be its basic use.

    • 1

  3. As you have already been told, WebSockets is, of the solutions proposed by you, the most efficient.

    However, that protocol gets along badly with proxies , firewalls , and the like; if you have any of that on the net, you may have problems.

    There is a third solution, in fact the most used until relatively recently: long polling .

    Using this technique, you make AJAX requests from Javascript, but the server does not respond right away , instead it waits a certain amount of time before responding.

    From JavaScript, its use is through a simple infinite loop of AJAX calls, but you have to be prepared to receive a response without changes , to which you respond with a new request.

    From the server, from time to time, you send a "no change" response, unless there is some change, in which case you send the relevant data, and continue with the loop.

    DO NOT overload the server with requests, since it allows some time to pass between each response (unless there is data to send), and, since it is based on normal HTTP , it does not have problems with proxies or histories.

    There are several libraries available for various languages ​​(you don't say which one you use), and it's simple to implement bare-bones anyway .

    • 1