Подтвердить что ты не робот

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

Я ищу способ создать простую таблицу 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>

Coldfusion:

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

<!--- Double-check to make sure it 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>
4b9b3361

Ответ 1

Это не слишком сложно. Простым способом было бы добавить через .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, могут напрямую подключаться к базе данных и инициировать изменения элементов пользовательского интерфейса, включая таблицы изменений, обновления или удаления данных... это одна из эти основные преимущества. Кроме того, пользовательский интерфейс может быть передан в режиме реального времени обновления через соединения сокетов с веб-службой, которые также могут быть пойманы и приняты. Хотя описанная здесь техника все еще работает, сегодня существуют гораздо более "живые" способы делать вещи.

Ответ 2

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

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

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

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

Ответ 3

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

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

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

Ответ 4

Проверьте длительный опрос AJAX. Место для начала Comet

Ответ 5

С "текущими" технологиями, я думаю, что длительный опрос с 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

Ответ 6

Нет, у вас не может быть код db для выполнения кода на стороне сервера. Но вы можете написать службу для периодического опроса db, чтобы узнать, была ли добавлена ​​новая запись, а затем уведомить код, который вам нужен, для обновления псевдоресурсов в реальном времени.

Ответ 7

Браузер может получать обновления в режиме реального времени через соединение BOSH с сервером Jabber/XMPP. Все биты и фрагменты можно найти в этой книге http://professionalxmpp.com/, которую я очень рекомендую. Если вы можете отправить сообщение XMPP после добавления записи в свою БД, то относительно легко создать панель управления, которую вы хотите. Вам нужен сервер strophe.js, Jabber/XMPP (например, ejabberd), http-сервер для проксирования запросов HTTP-привязки. Все подробности можно найти в книге. Обязательно прочитайте, что, я уверен, решит вашу проблему.

Ответ 8

То, как я получаю уведомление, - это после успешного обновления базы данных. Я бы опубликовал событие, которое сообщило бы о любых системах прослушивания или даже веб-страницах, которые произошли в результате изменения. Я подробно описал один из способов сделать это, используя решение электронной коммерции в недавнем сообщении в блоге. Сообщение в блоге показывает, как инициировать событие в ASP.NET, но одно и то же легко можно сделать на любом другом языке, поскольку в конечном итоге триггер выполняется с помощью вызова REST API.

В этом сообщении в блоге используется Pusher, но нет причин, по которым вы не можете установить свой собственный сервер в реальном времени или использовать Очередь сообщений для связи между вашим приложением и сервером реального времени, который затем будет вызывать уведомление на веб-страницу или клиентское приложение.