Есть ли способ «прослушать» событие базы данных и обновить страницу в режиме реального времени?

Я ищу способ создать простую таблицу HTML, которая может быть обновлена ??в режиме реального времени при событии изменения базы данных; в частности, добавлена ??новая запись.

Другими словами, подумайте об этом как о контрольной панели. Если выполняется продажа и добавлена ??новая строка в базе данных (в моем случае MySQL), веб-страница должна «обновить» таблицу новой строкой.

Я видел некоторую информацию о новом использовании, EVENT GATEWAYно все примеры используют Coldfusion как «толкатель», а не «потребитель». Я хотел бы, чтобы Coldfusion обновлял / нажимал событие на шлюз, а также потреблял ответ.

Если это можно сделать, используя комбинацию AJAX и CF, пожалуйста, дайте мне знать!

Я просто хочу понять, с чего начать с обновлением в реальном времени.

Заранее спасибо!!

EDIT / Объяснение выбранного ответа:

Я закончил с ответом @ bpeterson76, потому что на данный момент это было проще всего реализовать в небольших масштабах. Мне очень нравится его предложение Datatables, и это то, что я использую для обновления практически в реальном времени.

Поскольку мой сайт становится больше (надеюсь), я не уверен, что это будет масштабируемое решение, так как каждый пользователь будет нажимать на страницу «слушателя», а затем запрашивать мою БД. Мой запрос относительно прост, но я все еще беспокоюсь о производительности в будущем.

На мой взгляд, хотя, поскольку HTML5 начинает становиться веб-стандартом, метод Web Sockets, предложенный @iKnowKungFoo, скорее всего, лучший подход. Комета с длинным опросом также является отличной идеей, но это немного громоздко реализовать / также, похоже, имеет некоторые проблемы масштабирования.

Итак, будем надеяться, что веб-пользователи начнут использовать более современные браузеры, поддерживающие HTML5, потому что Web Sockets - относительно простой и масштабируемый способ приблизиться к реальному времени.

Если вы чувствуете, что я принял неправильное решение, оставьте комментарий.

Наконец, вот несколько исходных кодов для всего:

Javascript:

Заметьте, это очень простая реализация. Он смотрит только на то, изменилось ли количество записей в текущем datatable, и если это так обновить таблицу и вызвать предупреждение. Производственный код намного длиннее и более активен. Это просто показывает простой способ приблизиться к обновлению в реальном времени.

<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>

Холодный синтез:

<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>

mysql,ajax,coldfusion,real-time,

26

Ответов: 8


7 принят

Это не слишком сложно. Простым способом было бы добавить через .append:

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

Добавление элементов в реальном времени не совсем возможно. Вам нужно будет запустить запрос Ajax, который будет обновляться в цикле, чтобы «поймать» изменение. Итак, не полностью в режиме реального времени, но очень, очень близко к нему. Ваш пользователь действительно не заметит разницы, хотя загрузка вашего сервера может быть.

Но если вы собираетесь больше заниматься, я бы предложил посмотреть на DataTables . Это дает вам довольно много новых функций, включая сортировку, пейджинг, фильтрацию, ограничение, поиск и загрузку ajax. Оттуда вы можете либо добавить элемент через ajax, либо обновить представление таблицы, либо просто добавить его через свой API. Я использую DataTables в своем приложении уже некоторое время, и они последовательно упоминаются как функция номер 1, которая позволяет использовать огромное количество данных.

--Редактировать --

Поскольку это не очевидно, чтобы обновить DataTable, который вы вызываете, установите для вашего Datatables вызов переменной:

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

Затем запустите это, чтобы выполнить обновление:

  oTable.fnDraw(false);

ОБНОВЛЕНИЕ - 5 лет спустя, февраль 2016: Это гораздо более возможно сегодня, чем в 2011 году. Новые рамки Javascript, такие как Backbone.js, могут напрямую подключаться к базе данных и инициировать изменения элементов интерфейса, включая таблицы изменений, обновлений или удаление данных ... это одно из основных преимуществ этой структуры. Кроме того, пользовательские интерфейсы могут получать обновления в режиме реального времени через соединения сокетов с веб-службой, которые также могут быть пойманы и приняты. В то время как описанная здесь техника все еще работает, существует гораздо больше «живых» способов делать что-то сегодня.


Вы можете использовать SSE (Server Sent Events) функцию HTML5.

События, передаваемые сервером (SSE), являются стандартом, описывающим, как серверы могут инициировать передачу данных по клиентам после установления первоначального клиентского соединения. Они обычно используются для отправки обновлений сообщений или непрерывных потоков данных клиенту браузера и предназначены для улучшения собственной кросс-браузерной потоковой передачи через JavaScript-API под названием EventSource, через который клиент запрашивает конкретный URL-адрес для получения потока событий.

это простой пример

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


4

В MS SQL вы можете прикрепить триггер к событию вставки / удаления / обновления таблицы, которое может запустить хранимый процесс для вызова веб-службы. Если веб-служба основана на CF, вы можете, в свою очередь, вызвать службу обмена сообщениями, используя шлюзы событий. Все, что прослушивает шлюз, могут быть уведомлены, чтобы обновить его содержимое. Тем не менее, вам нужно будет увидеть, поддерживает ли MySQL триггеры и доступ к веб-сервисам через хранимые процедуры. У вас также должен быть какой-то компонент в вашем веб-приложении, который слушает шлюз обмена сообщениями. Это легко сделать в приложениях Adobe Flex, но я не уверен, что в JavaScript доступны сравнимые компоненты.

Хотя этот ответ не приближается к прямому решению вашего вопроса, возможно, он даст вам несколько идей о том, как решить проблему, используя триггеры db и шлюзы обмена сообщениями CF.

М. Макконнелл


3

С «текущими» технологиями, я думаю, что длительный опрос с Ajax - ваш единственный выбор. Однако, если вы можете использовать HTML5, вы должны взглянуть на WebSockets, который дает вам необходимую функциональность.

http://net.tutsplus.com/tutorials/javascript-ajax/start-using-html5-websockets-today/

WebSockets - это метод двусторонней связи через один (TCP) сокет, тип технологии PUSH. На данный момент он все еще стандартизирован W3C; однако последние версии Chrome и Safari поддерживают WebSockets.

http://html5demos.com/web-socket


3

Проверьте длительный опрос AJAX. Место для запуска кометы

MySQL, Ajax, ColdFusion, в режиме реального времени,
Похожие вопросы