简体   繁体   English

Google Apps Script Web 应用程序中的同时用户

[英]Simultaneous Users in a Google Apps Script Web App

I have a scoreboard web app that would keep track of the score for 2 teams.我有一个记分牌 web 应用程序,可以跟踪 2 支球队的得分。 How can I make it to where multiple users can use the app simultaneously and both teams can see the same score?我如何才能让多个用户可以同时使用该应用程序并且两个团队都可以看到相同的分数? Currently, if I have 2 instances of the app open in a browser they will not reflect the same score when one is incremented.目前,如果我在浏览器中打开了 2 个应用程序实例,当增加一个时,它们将不会反映相同的分数。

 document.addEventListener('DOMContentLoaded', function() { document.getElementById("btn-sub-1").addEventListener("click", function() { Counter('s1'); }, false); document.getElementById("btn-add-1").addEventListener("click", function() { Counter('a1'); }, false); document.getElementById("btn-sub-2").addEventListener("click", function() { Counter('s2'); }, false); document.getElementById("btn-add-2").addEventListener("click", function() { Counter('a2'); }, false); }); function Counter(val) { var score_1 = parseInt(document.getElementById("lbl-score-1").innerHTML); var score_2 = parseInt(document.getElementById("lbl-score-2").innerHTML); if (val=='s1' && score_1>0) { score_1--; document.getElementById("lbl-score-1").innerHTML = score_1; } else if (val=='a1') { score_1++; document.getElementById("lbl-score-1").innerHTML = score_1; } else if (val=='s2' && score_2>0) { score_2--; document.getElementById("lbl-score-2").innerHTML = score_2; } else if (val=='a2') { score_2++; document.getElementById("lbl-score-2").innerHTML = score_2; } }
 <!DOCTYPE html> <html> <head> <base target="_top"> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Import materialize.css--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <?!= include("8-general-css"); ?> <?!= include("8-landscape-css"); ?> <?!= include("8-portrait-css"); ?> </head> <body> <div class="grid-container"> <div class="team-1-container"> <label class="lbl-team blk-text font-header" id="lbl-team-1">Team 1</label> </div> <div class="player-1-container"> <select class="browser-default player-select font-opt" id="player-opt-1"> <option value="" disabled selected>Player 1</option> <?!= players;?> </select> </div> <div class="stats-1-container"> <div class="lbl-elo-container"> <label class="lbl-elo blk-text font-stats" id="lbl-elo-1">ELO: </label> <label class="lbl-elo-val blk-text font-stats" id="lbl-elo-val-1">-</label> </div> <div class="lbl-win-container"> <label class="lbl-win blk-text font-stats" id="lbl-win-1">Win Prob: </label> <label class="lbl-win-val blk-text font-stats" id="lbl-win-val-1">-%</label> </div> </div> <div class="player-3-container"> <select class="browser-default player-select font-opt" id="player-opt-3"> <option value="">Player 3</option> <?!= players;?> </select> </div> <div class="sub-1-container"> <button class="btn-sub font-btn" id="btn-sub-1"><span>-</span></button> </div> <div class="score-1-container"> <label class="lbl-score blk-text font-score" id="lbl-score-1">0</label> </div> <div class="add-1-container"> <button class="btn-add font-btn" id="btn-add-1">+</button> </div> <div class="reset-container"> <button class="btn-reset-submit font-reset-submit" id="btn-reset">Reset</button> </div> <div class="submit-container"> <button class="btn-reset-submit font-reset-submit" id="btn-submit">Submit</button> </div> <div class="sub-2-container"> <button class="btn-sub font-btn" id="btn-sub-2">-</button> </div> <div class="score-2-container"> <label class="lbl-score blk-text font-score" id="lbl-score-2">0</label> </div> <div class="add-2-container"> <button class="btn-add font-btn" id="btn-add-2">+</button> </div> <div class="player-2-container"> <select class="browser-default player-select font-opt" id="player-opt-2"> <option value="" disabled selected>Player 2</option> <?!= players;?> </select> </div> <div class="stats-2-container"> <div class="lbl-elo-container"> <label class="lbl-elo blk-text font-stats" id="lbl-elo-2">ELO: </label> <label class="lbl-elo-val blk-text font-stats" id="lbl-elo-val-2">-</label> </div> <div class="lbl-win-container"> <label class="lbl-win blk-text font-stats" id="lbl-win-2">Win Prob: </label> <label class="lbl-win-val blk-text font-stats" id="lbl-win-val-2">-%</label> </div> </div> <div class="player-4-container"> <select class="browser-default player-select font-opt" id="player-opt-4"> <option value="">Player 4</option> <?!= players;?> </select> </div> <div class="team-2-container"> <label class="lbl-team blk-text font-header" id="lbl-team-2">Team 2</label> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <?!= include("8-ball-js"); ?> <?!= include("8-ball-swipe-score"); ?> </body> </html>

All of your event Listeners point to this function.你所有的事件监听器都指向这个函数。

function Counter(val) {
    var score_1 = parseInt(document.getElementById("lbl-score-1").innerHTML);
    var score_2 = parseInt(document.getElementById("lbl-score-2").innerHTML);
    if (val=='s1' && score_1>0) {
      score_1--;
      document.getElementById("lbl-score-1").innerHTML = score_1;
    } else if (val=='a1') {
      score_1++;
      document.getElementById("lbl-score-1").innerHTML = score_1;
    } else if (val=='s2' && score_2>0) {
      score_2--;
      document.getElementById("lbl-score-2").innerHTML = score_2;
    } else if (val=='a2') {
      score_2++;
      document.getElementById("lbl-score-2").innerHTML = score_2;
    }

  }

But the function is not communicating with the server via google.script.run.但是该函数没有通过 google.script.run 与服务器通信。 And there are no forms for a submission.并且没有提交表格。 How do you expect the server to do anything if you don't communicate with it?如果您不与服务器通信,您如何期望服务器做任何事情?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM