I have prepared a sample application to get updates from server in real time using Cramp(Ruby) and SSE(HTML5).
I am getting following errors while accessing the html through 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>
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
where line 9 is var source = new EventSource('http://localhost:3000/time');
If I hit http://localhost:3000/time in chrome, it shows time after each 5 seconds without any errors.
However with PHP code it works fine replacing URI http://localhost:3000/time with stream.php in 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()));
Here stream.php and sse_time.html resides at same locaation.
Would anyone please guide me to fix this issue?
Referring to CASE STUDY: REAL-TIME UPDATES IN STREAM CONGRESS
I realize the html page also needs to be part of the cramp application(though there is alternative). So I made following changes and it worked.
Modified
app/actions/home_action.rbbased on Cramp chat using Redis Pub/Sub + WebSocketsand the content of
app/views/index.html.erbis same as the content ofsse_time.htmlin the the question itself.Now hitting
http://localhost:3000started showing server time in each 5 seconds on browser console.