Вопрос по – Данные в реальном времени в сетке - лучший метод

18

Что для вас является лучшим подходом для отображения данных в реальном времени (Фондовая биржа, Погода, ...) в сетке?
Я использую этот метод:

setInterval(function(){
      jQuery("#list1").trigger('reloadGrid');
}, 5000);

Ваш Ответ

1   ответ
16

что вопрос может быть интересным для многих других пользователей. Так что +1 от меня.

ИспользованиеsetInterval швы мне лучший способ в общем случае независимо от браузера. Нужно, конечно, сохранить результатsetInterval в переменной, чтобы иметь возможность использоватьclearInterval чтобы остановить это.

Еще одним небольшим улучшением было бы использование[{current:true}] (увидетьответ для деталей) в качестве второго параметраtrigger:

var $grid = jQuery("#list1"), timer;

timer = setInterval(function () {
    $grid.trigger('reloadGrid', [{current: true}]);
}, 5000);

Это сохранит выделение при перезагрузке сетки.

Многие новые веб-браузеры теперь поддерживаютWebSocket, Так что было бы лучше использовать способ в случае, если веб-браузер поддерживает это. Таким образом, можно пропустить ненужную перезагрузку сетки в случае, если данные не изменены на сервере, и предотвратить постоянный пул сервера.

Еще один распространенный способ кажется мне тоже очень интересным. Если бы кто-то использовал временную метку последних изменений данных сетки, можно было бы проверить, изменились ли данные или нет. Можно либо используетETag или какой-то общий дополнительный метод на сервере для этой цели.

Электрический токуспех обратный вызовjQuery.ajax заполнение которого позволяет использовать jqGrid для реализацииbeforeProcessing обратный звонок вmodify ответ сервера, но онnot allows you to stop jqGrid refreshing основанный наjqXHR.satus значение (было быxhr.status в текущем коде jqGrid). Небольшая модификациялиния кода jqGrid позволит вам остановить обновление jqGrid в случае неизменных данных на сервере. Можно либо проверитьtextStatus (st в текущем коде jqGrid) для"notmodified" или тестjqXHR.satus (xhr.status в текущем коде jqGrid) для304, Важно, чтобы использовать сценарий, который вы должны использоватьprmNames: { nd:null } вариант и установитьETag а такжеCache-Control: private, max-age=0 (увидетьВот, Вот а такжеВот для дополнительной информации).

UPDATEDЯ попытался создать демонстрационный проект, основываясь на моих последних предложениях, и обнаружил, что это не так просто, как я описал выше. Тем не менее я заставил это работать. Трудность заключалась в том, что нельзя увидеть код 304 из ответа сервера внутри jQuery.ajax. Причиной было следующее место вСпецификация XMLHttpRequest

For 304 Not Modified responses that are a result of a user agent generated conditional request the user agent must act as if the server gave a 200 OK response with the appropriate content. The user agent must allow author request headers to override automatic cache validation (e.g. If-None-Match or If-Modified-Since), in which case 304 Not Modified responses must be passed through.

Так что один видит200 OK статус внутриsuccess обработчик$.ajax вместо304 Not Modified из ответа сервера. Кажется, чтоXMLHttpRequest получить полный ответ из кэша, включая все заголовки HTTP. Поэтому я решил изменить анализ кэшированных данных, просто сохранивETag из последнего HTTP-ответа в качестве нового параметра jqGrid и проверьтеETag нового ответа с сохраненными данными.

Я видел, что вы используете PHP (который я не использую :-(). Тем не менее я могу читать и понимать код PHP. Я надеюсь, что вы можете так же прочитать код C # и понять основную идею. Таким образом, вы сможете реализовать то же самое в PHP.

Теперь я опишу, что я сделал. Прежде всего я модифицироваллинии исходного кода jqGrid, который используетbeforeProcessing обратный звонок от

if ($.isFunction(ts.p.beforeProcessing)) {
    ts.p.beforeProcessing.call(ts, data, st, xhr);
}

в

if ($.isFunction(ts.p.beforeProcessing)) {
    if (ts.p.beforeProcessing.call(ts, data, st, xhr) === false) {
        endReq();
        return;
    }
}

Это позволит вернуть ложь изbeforeProcessing пропустить обновление данных - пропустить обработку данных. РеализацияbeforeProcessing которые я использовал в демо, основаны на использованииETag:

beforeProcessing: function (data, status, jqXHR) {
    var currentETag = jqXHR.getResponseHeader("ETag"), $this = $(this),
        eTagOfGridData = $this.jqGrid('getGridParam', "eTagOfGridData");
    if (currentETag === eTagOfGridData) {
        $("#isProcessed").text("Processing skipped!!!");
        return false;
    }
    $this.jqGrid('setGridParam', { eTagOfGridData: currentETag });
    $("#isProcessed").text("Processed");
}

Линия$("#isProcessed").text("Processed"); или линия$("#isProcessed").text("Processing skipped!!!"); задавать"Processed" или же"Processing skipped!!!" текст в div, который я использовал, чтобы визуально указать, что данные с сервера использовались для заполнения сетки.

В демоI display two grids with the same data, Первая сетка использую для редактирования данных. Вторая сетка получает данные с сервера каждую секунду. Если данные на сервере не изменены, HTTP-трафик выглядит следующим образом

HTTP-запрос:

GET http://localhost:34336/Home/DynamicGridData?search=false&rows=10&page=1&sidx=Id&sord=desc&filters= HTTP/1.1
X-Requested-With: XMLHttpRequest
Accept: application/json, text/javascript, */*; q=0.01
Referer: http://localhost:34336/
Accept-Language: de-DE
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/5.0; LEN2)
Host: localhost:34336
If-None-Match: D5k+rkf3T7SDQl8b4/Y1aQ==
Connection: Keep-Alive

HTTP-ответ:

HTTP/1.1 304 Not Modified
Server: ASP.NET Development Server/10.0.0.0
Date: Sun, 06 May 2012 19:44:36 GMT
X-AspNet-Version: 4.0.30319
X-AspNetMvc-Version: 2.0
Cache-Control: private, max-age=0
ETag: D5k+rkf3T7SDQl8b4/Y1aQ==
Connection: Close

Такno data will be transferred from the server если данные не изменены. Если данные изменены, заголовок HTTP будет начинаться сHTTP/1.1 200 OK и содержитETag новых измененных данных вместе со страницей самих данных.

Можно обновить данные сетки либо вручную, используя & quot; Обновить & quot; кнопка навигатора или использует & quot; Запустить автообновление & quot; кнопка, которая выполнит$grid1.trigger('reloadGrid', [{ current: true}]); каждую секунду. Страница выглядит как

enter image description here

Я пометил наиболее важные части внизу страницы с помощью цветных рамок. Если одинloadui: "disable" После этого один из вариантов вообще не увидит никаких изменений в сетке при извлечении сервера. Если кто-то прокомментировал этот параметр, он увидит & quot; Загрузка ... & quot; div в течение очень короткого времени, ноno grid contain will flicker.

После запуска & quot; Автообновление & quot; один будет видеть в основном картину, как показано ниже

enter image description here

Если кто-то изменит какую-либо строку в первой сетке, вторая сетка будет изменена через секунду, и один увидит"Processed" текст, который будет изменен на"Processing skipped!!!" текст в еще одну секунду.

Соответствующий код (я использовал ASP.NET MVC) на стороне сервера в основном следующий

public JsonResult DynamicGridData(string sidx, string sord, int page, int rows,
                                  bool search, string filters)
{
    Response.Cache.SetCacheability (HttpCacheability.ServerAndPrivate);
    Response.Cache.SetMaxAge (new TimeSpan (0));

    var serializer = new JavaScriptSerializer();
    ... - do all the work and fill object var result with the data

    // calculate MD5 from the returned data and use it as ETag
    var str = serializer.Serialize (result);
    byte[] inputBytes = Encoding.ASCII.GetBytes(str);
    byte[] hash = MD5.Create().ComputeHash(inputBytes);
    string newETag = Convert.ToBase64String (hash);
    Response.Cache.SetETag (newETag);
    // compare ETag of the data which already has the client with ETag of response
    string incomingEtag = Request.Headers["If-None-Match"];
    if (String.Compare (incomingEtag, newETag, StringComparison.Ordinal) == 0) {
        // we don't need return the data which the client already have
        Response.SuppressContent = true;
        Response.StatusCode = (int)HttpStatusCode.NotModified;
        return null;
    }

    return Json (result, JsonRequestBehavior.AllowGet);
}

Я надеюсь, что основная идея кода будет понятна и для людей, которые используют не только ASP.NET MVC.

You can download the project Вот.

UPDATED: Я отправилзапрос функции позволятьbeforeProcessing прервать обработку ответа сервера, вернувfalse значение. Соответствующие изменения уже включены (см.Вот) в основном коде jqGrid. Поэтому следующий выпуск jqGrid будет включать его.

Error: User Rate Limit Exceeded Bertaud
Error: User Rate Limit Exceeded Bertaud
Error: User Rate Limit Exceeded$grid.trigger('reloadGrid', [{current: true}])Error: User Rate Limit Exceededthe whole grid bodyError: User Rate Limit ExceededdatatypeError: User Rate Limit ExceededsetRowDataError: User Rate Limit Exceededother row and other HTML elements on the pageError: User Rate Limit Exceeded
Error: User Rate Limit Exceededgridview: trueError: User Rate Limit ExceededinnerHTMLError: User Rate Limit ExceededseparatelyError: User Rate Limit Exceeded
Error: User Rate Limit ExceededoneError: User Rate Limit ExceededallError: User Rate Limit ExceededhereError: User Rate Limit Exceeded

Похожие вопросы