服务器端为客户端显示相同的网页

Question

我制作了非常简单的界面，可以更改数字并播放声音。在此处 here.

的帮助下

我觉得还好，简单的项目做完了，后来发现显示页面的电脑和激活数字递增的电脑不是同一台电脑

是直接投页，还是在别的电脑上开声音增量？这意味着两个客户端在服务器上查看相同的操作？投射总是看起来不太好，因为它是视频流，然后是屏幕上显示的清晰网页。服务器是 Rpi apache。

<input class="button" type="button" value="PLAY" onclick="play()">
<audio id="audio" src="http://commondatastorage.googleapis.com/codeskulptor-assets/week7-bounce.m4a"></audio>


<div class="overlay" id="globalclick">550</div>

html {
    height: 100%;
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
}

body {
    background-image: url("");
}

.overlay {
    position: absolute;
    right: 0px;
    top: 0px;
    font-weight: 300px;
    font-size: 350px;
    margin-right: 50px;
    margin-top: 125px;
    font-family: Arial, Helvetica, sans-serif;
    color: #DA1F37;
}

.button {
    position: relative;
    width: 750px;
    height: 750px;
    background: transparent;
    border: none !important;
    font-size: 0;
}


    var button = document.getElementById("globalclick"),
        count = 550;
    document.addEventListener("click", () => {
        count += 1;
        button.innerHTML = count;
    });

    function play() {
        var audio = document.getElementById("audio");
        audio.play();
    }

代码： fiddle

Answer 1

我想你的意思是你希望任何用户都能够更新你的号码，然后所有用户都会看到相同的更新号码。

如果是这样，听起来您想在服务器上托管 'number'，当用户单击该按钮时，您会向服务器发送一条消息以增加数字。

随着服务器上的数字发生变化，每个用户的网页客户端随后都需要更新其本地显示 - 有多种机制可以执行此操作，包括：

让您的网站 page/client 每隔一秒轮询一次服务器并检查数字的最新值。
使用长轮询，旨在提高效率。这会向服务器发送请求，服务器不会立即响应，而是保持连接打开，以便在准备就绪时响应。
使用允许与服务器进行双向通信的 WebSockets。

网络上有相当多的资源比较并提供每个资源的示例 - 例如：https://ably.com/blog/websockets-vs-long-polling

最适合您的方法取决于您的特定用例和限制 - 听起来这对您来说可能只是一个学习项目，在这种情况下可能值得尝试多种方法。

服务器端为客户端显示相同的网页

Server side shows same webpage for client sides

javascript

streaming

client-side