我正在寻找一种创建简单的HTML表的方法,该表可以在数据库更改事件发生时进行实时更新。特别是添加了新记录。
换句话说,将其视为执行人员仪表板。如果进行了销售并且在数据库中添加了新行(在本例中为MySQL),则网页应使用新行“刷新”表。
我已经看到了有关新EVENT GATEWAY用法的一些信息,但是所有示例都将Coldfusion用作“推动者”,而不是“消费者”。我想让Coldfusion既将事件更新/推送到网关,又消耗响应。
EVENT GATEWAY
如果可以结合使用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>
这不太困难。简单的方法是通过.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提供实时更新,然后也可以捕获并采取措施。尽管此处描述的技术仍然有效,但是今天有更多的“实时”做事方法。