有没有办法'监听'数据库事件并实时更新页面？

Question

我正在寻找一种方法来创建一个简单的HTML表,可以在数据库更改事件时实时更新; 特别添加了一条新记录.

换句话说,将其视为执行仪表板.如果进行了销售并在数据库中添加了新行(在我的情况下是MySQL),那么网页应该用新行"刷新"表格.

我已经看到了一些关于新EVENT GATEWAY用法的信息,但所有的例子都使用Coldfusion作为"推动者",而不是"消费者".我想让Coldfusion将事件更新/推送到网关并消耗响应.

如果可以使用AJAX和CF的组合完成,请告诉我!

我真的只是想了解从何处开始实时更新.

先感谢您!!

编辑/所选答案的说明:

我最终选择@ bpeterson76的答案,因为目前最简单的实施是小规模的.我真的很喜欢他的Datatables建议,这就是我用来近乎实时更新的内容.

随着我的网站越来越大(希望如此),我不确定这是否是一个可扩展的解决方案,因为每个用户都会点击"监听器"页面,然后再查询我的数据库.我的查询相对简单,但我仍然担心将来的性能.

在我看来,随着HTML5开始成为Web标准,@ iKnowKungFoo建议的Web套接字方法很可能是最好的方法.使用长轮询的Comet也是一个好主意,但它实现起来有点麻烦/似乎也有一些扩展问题.

因此,我们希望网络用户开始采用支持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

这不是太难.简单的方法是添加via .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年更加可能.新的Javascript框架(如Backbone.js)可以直接连接到数据库并触发UI元素的更改,包括更改,更新或更新的表删除数据......这是这些框架的主要好处之一.此外,UI可以通过套接字连接提供给Web服务的实时更新,然后也可以捕获并执行操作.虽然这里描述的技术仍然有效,但今天有更多"实时"的做事方式.

Answer 2

您可以在HTML5中使用SSE(服务器已发送事件)功能.

服务器发送事件(SSE)是描述服务器在建立初始客户端连接后如何向客户端发起数据传输的标准.它们通常用于向浏览器客户端发送消息更新或连续数据流,旨在通过名为EventSource的JavaScript API增强本机跨浏览器流,客户端通过该API请求特定URL以接收事件流.

这是一个简单的例子

http://www.w3schools.com/html/html5_serversentevents.asp

Answer 3

在MS SQL 中，您可以将触发器附加到可以触发存储过程以调用 Web 服务的表插入/删除/更新事件。如果 Web 服务是基于 CF 的，那么您可以反过来使用事件网关调用消息传递服务。任何侦听网关的内容都可以收到通知以刷新其内容。也就是说，您必须查看MySQL 是否支持触发器和通过存储过程访问 Web 服务。您还必须在您的 Web 应用程序中使用某种组件来侦听消息传递网关。在 Adob​​e Flex 应用程序中很容易做到，但我不确定是否有可在 JavaScript 中访问的类似组件。

虽然这个答案并不能直接解决您的问题，但它可能会给您一些关于如何使用 db 触发器和 CF 消息传递网关解决问题的想法。

M.麦康奈尔