柜台盒，对所有客户可见

Question

您好，我的网站需要一个按钮，它将开始从 60 秒到 0 的倒计时，然后它应该显示一些文本（让我们喝酒，欢呼）并返回开始按钮。

所有用户都必须能够看到这个倒计时，这样当一个用户开始倒计时时其他用户可以看到这个。

它还应该显示一个计数器，有多少用户点击了按钮，并加入了“按钮”

我已经研究过了，但我需要做 Ajax / javascript pull。

由于我的编程技能还处于复制/粘贴/编辑级别，我不知道如何开始，我可以构建计时器，但不知道如何拉动。

谁能帮我开始。

问候 勒内

Answer 1

首先，您需要一个有状态的后端来存储用户数。所以php+any db。

你提到了 socket.io，建立在 nodejs 之上。

使用 nodejs 这并不困难，因为它是一个单线程运行时，所以您可以将变量值共享给不同的客户端。

你的 nodejs 必须监听 3 个 url：

1. 用于传递基础页面（可以在没有nodejs的情况下完成，只需url到html）
2. ajax url 用于将按钮的点击从客户端传递到后端，返回当前计数
3. ajax url 传递当前秒数，返回当前计数和连接用户数。

每次调用 2. 频道时，您需要检查倒计时是否已经开始运行。如果没有：启动它，否则增加点击计数器。

像这样：

//nodejs code
var currendSeconds=60;
var connectedClients = 0;
var threadid;

function clientClickedButton(req, res){ // 2. url
     if(currendSeconds==60 || ) {
          threadid = setInterval(function(){
                currendSeconds--;
                if(currentSeconds == 0){
                    clearInterval(threadid);
                }
          }, 1000);  //your counter
     }
     connectedClients++;
     res.send(currendSeconds);
}

您的客户端必须监听按钮上的点击事件，向 2.url 发送 ajax req 并显示返回的秒数（从现在开始我们不需要请求秒数，只需设置倒计时客户端，无需请求当前秒数。）