javascript - 如何使用 JavaScript 在客户端之间共享数据？

Question

我有一个 JSON 变量，但我想让该 PHP 页面上的每个人都能看到相同的变量内容。

这段代码应该能更多地解释我的情况。 (我正在努力使页面不会重新加载)

    var chats = [];
    var j = jQuery.noConflict();
    j(document).ready(function()
    {
        setInterval(function(i){
            var txt = "";
            var x;
            for (x in chats) {
              txt += chats[x] + " <br />";
            }
            document.getElementById("json").innerHTML = JSON.stringify(chats);
        }, 1000)
    });
    j(document).ready(function() {
        j('#post_button').click(function() {
            $text = $('[name=message]').val();
            $sender = $('#texta').val();
            chatstuff = {
                "sender" : $sender,
                "message" : $text,
            };
            chats.push(chatstuff);
            $('[name=message]').val("");
        });
    });

所以当它执行 document.getElementById("json").innerHTML = JSON.stringify(chats); 时，我希望每个人都能够看到相同的聊天内容同一页。

Answer 1

JavaScript 在用户的浏览器中运行。变量中的任何数据仅对该客户端可见。

为了在客户端之间同步数据，您需要使用类似 websockets 的东西。每个客户端(用户)都会向您的服务器发送数据，服务器会将所有客户端事件转发给每个客户端。

一个非常流行的 JavaScript websockets 库是 socket.io .如果您刚刚开始搜索，您会发现大量“如何使用 websockets 在 JavaScript 中创建简单的聊天”教程。

这是一个 socket.io chat demo就在那个网站上。

---

“为什么使用 websockets 而不是 Ajax？”

好吧，稍微考虑一下...Ajax 非常适合客户端异步向服务器发送数据，但是服务器与客户端通信呢？

如果用户 A 写下“hello”，我们可以使用 Ajax 将其发送到服务器，但是如何通知用户 B 和 C 有新消息到达？

历史上，在 websockets 出现之前，这是通过 Ajax“长轮询”完成的。这意味着每个客户端将每隔 x 秒向服务器发出一个 ajax 请求，询问“嘿，有没有新消息要我阅读？”

如果您正在实现一个实时聊天应用程序，这意味着 x 将最多为 5 秒，否则用户会对延迟感到非常沮丧.

每 5 秒 ping 我们的服务器一次又一次地问同样的问题很烦人。按照今天的标准，它已经相当陈旧了。也许有更好的方法...

“好的，那么 websockets 如何让它变得更好？”

Websockets 允许客户端和服务器之间的连接保持打开。这意味着服务器可以在数据到达后立即将数据发送给客户端，而无需客户端请求。

这意味着我们可以放弃轮询并更快地同步数据!甜!

“好的，那很好，但我不能依赖前沿技术......”

嗯，这也不是真正的问题。我推荐 websocket 库(例如 socket.io)的原因是，如果您的浏览器不支持实际的 websocket，socket.io 将进行各种尝试来实现类似套接字的连接。

回退方法列表中的无非是...鼓声，请...Ajax 长轮询。

“有没有 socket.io 的替代方案？”

是的。既然您知道自己正在寻找，那么应该很容易找到大量的选项。 ws是另一个很棒的库，我肯定会检查一下 socket.io 是否对您来说过于笨重。