如何实现数字排队叫号系统Token在全设备自动同步更新？

抱歉我的英语不好，这不是我的母语。我为论文开发的数字排队叫号系统目前需要在每个设备上手动更新Token，我明白需要部署后端服务让程序运行在服务器上，但我不熟悉任何后端技术，也不清楚后端如何与我已完成的前端代码交互。我的目标是让所有设备的Token实现自动更新。

以下是我完成的代码，一位朋友推荐我使用jquery-3.3.1.min包来辅助开发。感谢您的帮助！

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <title>Queue</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/jquery-3.3.1.min.js"></script>
    <script src="lib/scripts.js"></script>
</head>
<body>
    <div class="barraTop">&nbsp;</div>
    <div class="container page">
        <div class="row barraSuperior">
            <div class="col-xs-11" style="text-align: right;"><p></p>
                <span class="uespiTexto">Waiting queue</span><br>
            </div>
        </div>
        <div class="row">
            <div class="senhaAtual">
                <div class="row">
                    <div class="col-xs-5 col-xs-offset-1" style="text-align: right;"><br><br>
                        <span class="senhaAtualTexto">TOKEN &nbsp;</span>
                    </div>
                    <div class="col-xs-5"  style="text-align: left;">
                        <span id="senhaAtualNumero">0000</span>
                    </div>
                    <input type="hidden" id="senhaNormal" value="0000">
                    <input type="hidden" id="senhaPrioridade" value="P000">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-4 col-xs-offset-4 ultimaSenha">
                <br>
                <span id="ultimaSenhaTexto">LAST TOKEN</span><br>
                <span>Token </span>
                <span id="ultimaSenhaNumero">0000</span>
            </div>
        </div>
    </div>
    <audio id="audioChamada" src="audio/chamada.wav"></audio>
</body>
</html>

JavaScript代码 #

let filename = "senhas.txt";
function pad(num, size) {
    var s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}
jQuery(document).ready(function($) {
    $("body").on('keydown', function(e) {
        var senhaAtual   = $("#senhaAtualNumero");
        var senhaNormal  = $("#senhaNormal");
        var senhaPrior   = $("#senhaPrioridade");
        var ultimaSenha  = $("#ultimaSenhaNumero");
        var audioChamada = $("#audioChamada");
        
        if(e.keyCode == 39){
            ultimaSenha.html(senhaAtual.html());
            senha = parseInt(senhaNormal.val()) + 1;
            senhaAtual.html(pad(senha, 4));
            senhaNormal.val(pad(senha, 4));
            audioChamada.trigger("play");
        }
        if(e.keyCode == 65){
            senha = parseInt(senhaNormal.val()) - 1;
            senhaAtual.html(pad(senha, 4));
            senhaNormal.val(pad(senha, 4));
        }
        if(e.keyCode == 38){
            ultimaSenha.html(senhaAtual.html());
            senha = parseInt(senhaPrior.val().replace("P","")) + 1;
            senhaAtual.html("P" + pad(senha, 3));
            senhaPrior.val("P" + pad(senha, 3));
            audioChamada.trigger("play");
        }
        if(e.keyCode == 83){
            senha = parseInt(senhaPrior.val().replace("P","")) - 1;
            senhaAtual.html("P" + pad(senha, 3));
            senhaPrior.val("P" + pad(senha, 3));
        }
    });
});

内容的提问来源于stack exchange，提问作者Fel00110101001101