Generate notification on the web platform every time a new form arrives

Question

I am developing two applications one web (service) and another mobile (consumes the service), in apk the user send Formularies to the web application, hence I would like to create a kind of notification for each new form that the server receives. Similar to what’s on the stack overflow site itself. How could I do that?

And already on the page where it lists all the received Formularios, how could a Reload in the datatable without having to update the whole page?

My list of incoming formularies in the web application:

#{extends 'main.html' /}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8"
src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8"
src="//code.jquery.com/jquery-1.12.4.js"></script>

<!-- JQUERY DATATABLE -->
<script type="text/javascript">
$(document)
        .ready(
                function() {
                    $('#myTable3')
                            .DataTable(
                                    {
                                        "language" : {
                                            "sEmptyTable" : "Nenhum registro encontrado",
                                            "sInfo" : "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                                            "sInfoEmpty" : "Mostrando 0 até 0 de 0 registros",
                                            "sInfoFiltered" : "(Filtrados de _MAX_ registros)",
                                            "sInfoPostFix" : "",
                                            "sInfoThousands" : ".",
                                            "sLengthMenu" : "_MENU_ resultados por página",
                                            "sLoadingRecords" : "Carregando...",
                                            "sProcessing" : "Processando...",
                                            "sZeroRecords" : "Nenhum registro encontrado",
                                            "sSearch" : "Pesquisar",
                                            "oPaginate" : {
                                                "sNext" : "Próximo",
                                                "sPrevious" : "Anterior",
                                                "sFirst" : "Primeiro",
                                                "sLast" : "Último"
                                            },
                                            "oAria" : {
                                                "sSortAscending" : ": Ordenar colunas de forma ascendente",
                                                "sSortDescending" : ": Ordenar colunas de forma descendente"
                                            }
                                        }
                                    });
                });
</script>

<div class="panel panel-default">

<div class="panel-body">
<input type="hidden" name="denuncia.id" value="${d?.id}" />
<table id="myTable3"
    class="table table-striped table-bordered table-over">
    <thead>
        <tr>
            <th>Nome</th>
            <th>Rua</th>
            <th>Bairro</th>
            <th>Cidade</th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>
        #{list items:denuncias, as:'d'}
        <tr>
            <td>${d.nome}</td>
            <td>${d.rua}</td>
            <td>${d.bairro}</td>
            <td>${d.cidade}</td>
            <td>${d.data}
                <div class="pull-right action-buttons">
                    <a href="@{denuncias.remover(d.id)}" class="trash" data-toggle="confirmation" data-btn-ok-label="Sim" data-btn-ok-class="btn-success" data-btn-cancel-label="Não"
                        data-btn-cancel-class="btn-danger" data-title="Remover denuncia"    data-content="Tem certeza que deseja excluir este registro?"><span class="glyphicon glyphicon-trash"> Remover</span></a> 
                    <a href="@{denuncias.detalhes(d.id)}" class="flag"><span    class="glyphicon glyphicon-eye-open"> Detalhes</span></a>
                </div>
            </td>
        </tr>
        #{/list}
    </tbody>
</table>

Answer 1

Dude if you want something in real time you should use Websockets, which is a TCP protocol that allows full-duplex communication. For this you should work with the protocol and the Websockets API to implement it. But I’m going to make it easier for you because I’ve gone to a lot of trouble to come up with this wonderful technology. Next, I used PHP and needed to work with it for these Websockets, hence Ratchet, a library that allows you to work with Wbs through PHP. Anyway, watch a video that has Ratchet in the title on this site: http://code-squad.com/curso/PHP-Conference-Brasil-2014-palestras

In it you will understand Websocket and how to use Ratchet.

Now the following, the notification would be sent in real time, but what if the user is not online? then you need to store the form/notification in the database and the trigger to store would be exactly Ratchet’s Conn.send(ACTION TO STORE AND PROPAGATE NOTIFICATION). From there man, learn to use more Websockets so that users only communicate with the server and not with other users(This I still can not do, qro learn tbm kkk).