通过抽筋(Ruby)和SSE(HTML5)进行实时更新

我已经准备了一个示例应用程序，以实时使用抽筋（Ruby）和SSE（html5）实时获取更新。

通过http://localhost/sse_time.html

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

app/action/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');

如果我在Chrome中击中http://localhost:3000/time，则显示每5秒钟之后的时间没有任何错误。

但是，使用PHP代码，它可以正常工作，用sse_time.html中的stream.php替换URI http://localhost:3000/time

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居住在同一位置。

有人可以指导我解决这个问题吗？

参考案例研究：流中心的实时更新

要记住Eventsource的一个重要问题是不允许跨域连接。这意味着抽筋应用必须从与主铁路应用相同的streamcongress.com域提供。

我意识到HTML页面也需要成为抽筋应用程序的一部分（尽管有其他选择）。所以我进行了以下更改并奏效。

使用Redis Pub/sub Websockets

根据抽筋聊天修改的app/actions/home_action.rb

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秒钟显示服务器时间。

相关内容

最新更新

热门标签：