实时聊天-无需刷新页面即可更新新聊天的最佳选择

Question

我正在使用CouchCMS作为网站的后端。我想建立一个群聊。用户帐户，聊天表单，保存到DB的聊天等基本操作都已完成。我想知道如何用新消息更新聊天窗口，向所有正在聊天的人发送消息。

我使用setInterval（）更新了聊天记录，但发现了两个问题： 1.占用大量资源，有时会暂停执行， 2.如果浏览器未激活，则setInterval（）停止。

如何克服？

我有用于所有聊天的json。我打算用来填充我的聊天窗口。

P.S .：我不能使用第三方解决方案，因为聊天不应该从服务器进入任何其他数据库。

$(document).ready(function(){
    // Save Chat
    $('form#chat-form').on('submit', function (e) {
        e.preventDefault();
            $.ajax({
                type: 'post',
                url: '<cms:show k_site_link /><cms:show k_template_name />?p=<cms:show k_page_id />',
                data: $("form#chat-form").serialize(),
                dataType: 'text',
                success: function(data){
                //alert("Saved");
                document.getElementById("chat-form").reset();
                update_chat();
            }
        })
    });

    update_chat();
    setInterval(function(){
        update_chat();
    }, 10000);

    function update_chat() {
        $.ajax({
            type: 'get',
            url: '<cms:show k_site_link />Group-Chatting/blog-comment-json.php',
            async: false,
            dataType:"json",
            data: {page_id: "<cms:show k_page_id />"},
            success: function(data){
            if(data != 'ERROR') {
                $.each(data, function(index) {
            $("#result").append(data[index].date);
        });
    }
    }                       
    });
    }
});

我能够使用ajax通过表单提交聊天消息，因此确实可以将其保存到数据库中。但是如果不刷新页面，则不会显示相同的内容。另外，聊天数据的JSON不会以HTML格式显示在前端，从而像聊天一样显示消息。

请告知。