A server-side service outputs a long response using Sinatra's streaming API. How can the javascript client process this long response as a stream and refresh a pre in the HTML page until the whole response has been received?
To run it:
bundle install
bundle exec ruby app.rb
Then, try to implement the requested feature. See index.html
| require 'sinatra' | |
| set :server, :thin | |
| get '/' do | |
| send_file "index.html" | |
| end | |
| get '/bottles' do | |
| # puts params.inspect | |
| # puts request.body.read.inspect | |
| # puts "Last-Event-Id: #{request.env['HTTP_LAST_EVENT_ID']}" | |
| start = request.env['HTTP_LAST_EVENT_ID'] ? request.env['HTTP_LAST_EVENT_ID'].to_i+1 : 0 | |
| content_type "text/event-stream" | |
| stream do |out| | |
| start.upto(50) do |i| | |
| out << "id: #{i}\n" | |
| out << "data: #{i} bottle(s) on a wall...\n\n" | |
| sleep 0.3 | |
| end | |
| out << "data: CLOSE\n\n" | |
| end | |
| end |
| source "http://rubygems.org/" | |
| gem "sinatra", "~> 1.3.0" | |
| gem "thin" |
| <!DOCTYPE html> | |
| <html lang="fr"> | |
| <head> | |
| <title>Sinatra streaming example</title> | |
| <meta charset="utf-8" /> | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script> | |
| <style>body {font-family: sans-serif;}</style> | |
| </head> | |
| <body> | |
| <h1>Welcome to this Sinatra Streaming example!</h1> | |
| <input id="bottles-button" type="button" value="Bottles!"/> | |
| <pre id="bottles-output"> | |
| </pre> | |
| <script> | |
| $("#bottles-button").click(function() { | |
| var src = new EventSource('/bottles?foo=bar'); | |
| src.onmessage = function(e) { | |
| console.log(e) | |
| $('#bottles-output').append("\n" + e.data) | |
| if ( e.data == 'CLOSE' ) src.close() | |
| }; | |
| }); | |
| </script> | |
| </body> | |
| </html> |