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

Question

我正在寻找一种创建简单的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>

Answer 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提供实时更新，然后也可以捕获并采取措施。尽管此处描述的技术仍然有效，但是今天有更多的“实时”做事方法。