rkh/Gemfile

## README.md

      
    Raw
  

              README.md
            
          
    jQuery + Sinatra + Streaming

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

  
## app.rb
require 'sinatra'

set :server, :thin

get '/' do
  send_file "index.html"
end

get '/bottles' do
  content_type "text/event-stream"
  stream do |out|
    1000.times do |i|
      out << "data: #{i} bottle(s) on a wall...\n\n"
      sleep 0.5
    end
  end
end

## Gemfile
source "http://rubygems.org/"
gem "sinatra", "~> 1.3.0"
gem "thin"

## index.html
<!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://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 </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');
        src.onmessage = function(e) { $('#bottles-output').append("\n" + e.data) };
      });
    </script>
  </body>
</html>
	require 'sinatra'

	set :server, :thin

	get '/' do
	send_file "index.html"
	end

	get '/bottles' do
	content_type "text/event-stream"
	stream do \|out\|
	1000.times do \|i\|
	out << "data: #{i} bottle(s) on a wall...\n\n"
	sleep 0.5
	end
	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://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	</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');
	src.onmessage = function(e) { $('#bottles-output').append("\n" + e.data) };
	});
	</script>
	</body>
	</html>