Google Apps 脚本 Web 应用程序中的同时用户答案

【问题标题】：Simultaneous Users in a Google Apps Script Web AppGoogle Apps 脚本 Web 应用程序中的同时用户
【发布时间】：2020-02-19 13:53:14
【问题描述】：

我有一个记分牌网络应用程序，可以跟踪 2 支球队的比分。我怎样才能做到多个用户可以同时使用该应用程序并且两个团队可以看到相同的分数？目前，如果我在浏览器中打开了 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>

【问题讨论】：

您可能应该考虑使用 Firebase / Firestore 来提供实时更新。
从客户端投票...
不要只是重新提出一个封闭的问题...stackoverflow.com/questions/60288945/…
Sample 用于投票。
这能回答你的问题吗？ Multiple Users in a Google Apps Script Web App

标签： javascript google-apps-script

【解决方案1】：

你所有的事件监听器都指向这个函数。

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;
    }

  }

但该函数没有通过 google.script.run 与服务器通信。并且没有提交表格。如果您不与它通信，您如何期望服务器做任何事情？

【讨论】：