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


How to share data between clients using JavaScript?

我有一个 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);时,我希望每个人都能够在同一页面上看到相同的聊天内容。

JavaScript在

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

为了在客户端之间同步数据,您需要使用 websockets 之类的东西。每个客户端(用户)将数据发送到您的服务器,服务器会将所有客户端活动中继到每个客户端。

一个非常流行的JavaScript websockets库是 socket.io。如果你只是开始搜索它们,你会发现大量的"如何使用websockets在JavaScript中创建简单的聊天"教程。

这是一个 socket.io 聊天演示,就在网站上。


"为什么使用websockets而不是Ajax?"

好吧,只是想一想...Ajax 非常适合异步向服务器发送数据的客户端,但是服务器与客户端通信呢?

如果用户 A 写了"hello",我们可以使用 Ajax 将其发送到服务器,但是用户 B 和 C 将如何收到新消息到达的通知?

从历史上看,在websockets之前,这是通过Ajax的"长轮询"来完成的。这意味着每个客户端将每隔x秒向服务器发出一个ajax请求,询问"嘿,有新消息让我阅读吗?

如果您正在实现实时聊天应用程序,这意味着x将达到最多5秒,否则用户会对延迟感到沮丧。

每 5 秒 ping 一次我们的服务器以一遍又一遍地询问相同的问题很烦人。按照今天的标准,它已经过时了。也许有更好的方法...

"好的,那么 websocket 如何让它变得更好呢?"

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

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

"好吧,那很好,但我不能依靠尖端技术......"

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

回退方法列表中包括的就是...鼓声,请...Ajax 长轮询。

"除了 socket.io,还有别的选择吗?"

是的。既然您知道您正在寻找它应该很容易找到大量的选择。WS 是另一个很棒的库,我肯定会检查一下 socket.io 如果它对你来说似乎太严厉了。

不,您必须为此使用服务器。 将新数据从此页面发送到服务器,服务器将为其他查看者更新该页面。 请考虑阅读一些类似的教程 http://tutorialzine.com/2010/10/ajax-web-chat-css-jquery/