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 lib（例如，socket.io）的原因是因为如果您的浏览器不支持实际的websockets，socket.io将进行各种尝试来实现类似套接字的连接。

回退方法列表中包含的是...... drumroll，请 ... Ajax长轮询。

“有没有替代socket.io？”

是的。既然你知道你正在寻找它应该很容易找到大量的选择。 ws是另一个很棒的库，我肯定会检查socket.io是否对你来说太过苛刻了。

Answer 2

不，你必须使用服务器。将此页面中的新数据发送到服务器，服务器将更新其他查看者的页面。考虑阅读一些像http://tutorialzine.com/2010/10/ajax-web-chat-css-jquery/

这样的教程

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

2 个答案: