Обновления в реальном времени через Cramp(Ruby) и SSE(HTML5)

Я подготовил пример приложения для получения обновлений с сервера в режиме реального времени с использованием Cramp(Ruby) и SSE (HTML5).

Я получаю следующие ошибки при доступе к HTML через http://localhost/sse_time.html

Errors:
Chrome:
  Uncaught Error: SECURITY_ERR: DOM Exception 18 sse_time.html:9
  Uncaught TypeError: Cannot read property 'key-preview' of undefined 

Firefox:
  Error: The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.
Line: 0

  Error: The connection to http://localhost:3000/time was interrupted while the page was loading.
  Line: 9

sse_time.html

<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<div id="result"></div>
<script>
  if (!!window.EventSource) {

    var source = new EventSource('http://localhost:3000/time');

    source.addEventListener('message', function(e) {
      console.log(e.data);
    }, false);

    source.addEventListener('open', function(e) {
      // Connection was opened.
      console.log('Connection was opened.');
    }, false);

    source.addEventListener('error', function(e) {
      if (e.readyState == EventSource.CLOSED) {
        // Connection was closed.
        console.log('Connection was closed.');
      }
    }, false);

  } else {
    document.getElementById("result").innerHTML="Sorry, your browser does not support server-sent events...";
  }
</script>

</body>
</html>

приложение / действия / time_action.rb

class TimeAction < Cramp::Action
  self.transport = :sse

  periodic_timer :send_latest_time, every: 5

  def send_latest_time
    render "Current time : #{Time.now}"
  end
end

где line 9 является var source = new EventSource('http://localhost:3000/time');

Если я ударил http://localhost:3000/time в chrome он показывает время через каждые 5 секунд без каких-либо ошибок.

Тем не менее, с помощью PHP-кода он прекрасно работает, заменяя URI http://localhost:3000/time с stream.php в sse_time.html

stream.php

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache'); // recommended to prevent caching of event data.

/**
 * Constructs the SSE data format and flushes that data to the client.
 *
 * @param string $id Timestamp/id of this connection.
 * @param string $msg Line of text that should be transmitted.
 */
function sendMsg($id, $msg) {
  echo "id: $id" . PHP_EOL;
  echo "data: $msg" . PHP_EOL;
  echo PHP_EOL;
  ob_flush();
  flush();
}

$serverTime = time();

sendMsg($serverTime, 'server time: ' . date("h:i:s", time()));

Вот stream.php а также sse_time.html проживает в том же месте.

Кто-нибудь, пожалуйста, помогите мне решить эту проблему?

Источник

1 ответ

Решение

Ссылаясь на ПРИМЕР ОБРАЗОВАНИЯ: ОБНОВЛЕНИЯ В РЕАЛЬНОМ ВРЕМЕНИ В СТРИМ КОНГРЕССЕ

Важная проблема, которую следует иметь в виду при использовании EventSource, заключается в том, что междоменные соединения не допускаются. Это означает, что приложение Cramp должно обслуживаться из того же домена streamcongress.com, что и основное приложение Rails.

Я понимаю, что html-страница также должна быть частью приложения cramp (хотя есть альтернатива). Поэтому я сделал следующие изменения, и это сработало.

модифицированный app/actions/home_action.rb на основе чата Cramp с использованием Redis Pub/Sub + WebSockets

class HomeAction < Cramp::Action
  @@template = ERB.new(File.read(PocRailsCramp::Application.root('app/views/index.html.erb')))

  def start
    render @@template.result(binding)
    finish
  end
end

и содержание app/views/index.html.erb такое же, как содержание sse_time.html в самом вопросе.

Сейчас бьёт http://localhost:3000 начал показывать время сервера каждые 5 секунд на консоли браузера.

Источник
Другие вопросы по тегам