一尘不染

有没有一种方法可以“监听”数据库事件并实时更新页面?

mysql

我正在寻找一种创建简单的HTML表的方法,该表可以在数据库更改事件发生时进行实时更新。特别是添加了新记录。

换句话说,将其视为执行人员仪表板。如果进行了销售并且在数据库中添加了新行(在本例中为MySQL),则网页应使用新行“刷新”表。

我已经看到了有关新EVENT GATEWAY用法的一些信息,但是所有示例都将Coldfusion用作“推动者”,而不是“消费者”。我想让Coldfusion既将事件更新/推送到网关,又消耗响应。

如果可以结合使用AJAX和CF来完成此操作,请告诉我!

我真的只是想了解从哪里开始实时更新。

先感谢您!!

编辑/所选答案的说明:

我最后给出了@ bpeterson76的答案,因为目前最容易在小规模实现。我非常喜欢他的Datatables建议,这就是我用来实时更新的内容。

但是,随着我的站点变大(希望如此),我不确定这是否是可扩展的解决方案,因为每个用户都将访问“侦听器”页面,然后查询我的数据库。我的查询相对简单,但是我仍然担心将来的性能。

但是我认为,随着HTML5开始成为Web标准,@
iKnowKungFoo建议的Web套接字方法很可能是最好的方法。长时间轮询的彗星也是一个好主意,但是实现起来有点麻烦/似乎还存在一些缩放问题。

因此,让我们希望网络用户开始采用支持HTML5的更现代的浏览器,因为Web套接字是一种相对容易且可扩展的方式来接近实时。

如果您觉得我做错了决定,请发表评论。

最后,这是全部的一些源代码:

Javascript:

注意,这是一个非常简单的实现。
它只是在查看当前数据表中的记录数是否已更改,如果已更改,则更新表并引发警报。生产代码更长,涉及更多。这只是显示了一种接近实时更新的简单方法。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" charset="utf-8">

var originalNumberOfRecsInDatatable = 0;
var oTable;

var setChecker = setInterval(checkIfNewRecordHasBeenAdded,5000); //5 second intervals

function checkIfNewRecordHasBeenAdded() {

        //json object to post to CFM page
        var postData = {
        numberOfRecords:  originalNumberOfRecsInDatatable 
        };

        var ajaxResponse = $.ajax({
        type: "post",
        url: "./tabs/checkIfNewItemIsAvailable.cfm",
        contentType: "application/json",
        data: JSON.stringify( postData )
        })

        // When the response comes back, if update is available
        //then re-draw the datatable and throw an alert to the user
        ajaxResponse.then(
        function( apiResponse ){

         var obj = jQuery.parseJSON(apiResponse);

         if (obj.isUpdateAvail == "Yes")
         {              
            oTable = $('#MY_DATATABLE_ID').dataTable();
            oTable.fnDraw(false);

            originalNumberOfRecsInDatatable = obj.recordcount;

            alert('A new line has been added!');
         }

        }
        );

    }
</script>

Coldfusion:

<cfset requestBody = toString( getHttpRequestData().content ) />

<!--- Double-check to make sure it's a JSON value. --->
<cfif isJSON( requestBody )>

<cfset deserializedResult = deserializeJSON( requestBody )>

<cfset numberOFRecords = #deserializedResult.originalNumberOfRecsInDatatable#>


<cfquery  name="qCount" datasource="#Application.DBdsn#" username="#Application.DBusername#" password="#Application.DBpw#">
    SELECT COUNT(ID) as total
    FROM myTable
</cfquery>

<cfif #qCount.total# neq #variables.originalNumberOfRecsInDatatable#>
    {"isUpdateAvail": "Yes", "recordcount": <cfoutput>#qCount.total#</cfoutput>}
<cfelse>
    {"isUpdateAvail": "No"}
</cfif>


</cfif>

阅读 788

收藏
2020-05-17

共1个答案

一尘不染

这不太困难。简单的方法是通过.append添加:

$( '#table > tbody:last').append('<tr id="id"><td>stuff</td></tr>');

实时添加元素并不完全可能。您必须运行一个循环更新的Ajax查询,以“捕获”更改。因此,它不是完全实时的,而是非常接近实时的。尽管服务器的负载可能很大,但您的用户实际上不会注意到差异。

但是,如果您打算更多地参与进来,我建议您看一下DataTables。它为您提供了许多新功能,包括排序,分页,过滤,限制,搜索和Ajax加载。从那里,您可以通过ajax添加元素并刷新表格视图,也可以仅通过其API追加。我在应用程序中使用DataTables已经有一段时间了,它们一直被认为是使大量数据可用的第一功能。

-编辑-

因为不明显,所以要更新调用的DataTable,请将Datatables调用设置为变量:

var oTable = $('#selector').dataTable();

然后运行以下命令进行更新:

  oTable.fnDraw(false);

更新-5年后,2016年2月:今天比2011年更加可行。诸如Backbone.js之类的新Javascript框架可以直接连接到数据库并触发UI元素的更改,包括更改,更新或修改表。删除数据…。这是这些框架的主要优点之一。此外,可以通过与Web服务的套接字连接向UI提供实时更新,然后也可以捕获并采取措施。尽管此处描述的技术仍然有效,但是今天有更多的“实时”做事方法。

2020-05-17