通过Cramp(Ruby)和SSE(HTML5)进行实时更新
我已经准备了一个示例应用程序，可以使用抽筋(红宝石)和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: 9sse_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/actions/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的铬，它显示时间后，每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
Stack Overflow用户
发布于 2012-10-25 12:19:14
提及案例研究:流大会的实时更新
EventSource要记住的一个重要问题是，不允许跨域连接。这意味着，Cramp应用程序必须与主Rails应用程序来自同一个streamcongress.com域。
我意识到html页面也需要成为抽筋应用程序的一部分(尽管还有其他选择)。所以我做了一些改变，结果成功了。
基于app/actions/home_action.rb的改进型用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秒显示服务器时间。
https://stackoverflow.com/questions/13064323
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号