Sinatra Server Side Event streaming.

juggernaut.rb

# Usage: redis-cli publish message hello

require 'sinatra'
require 'redis'

conns = []

get '/' do
  erb :index
end

get '/subscribe' do
  content_type 'text/event-stream'
  stream(:keep_open) do |out|
    conns << out
    out.callback { conns.delete(out) }
  end
end

Thread.new do
  redis = Redis.connect
  redis.psubscribe('message', 'message.*') do |on|
    on.pmessage do |match, channel, message|
      channel = channel.sub('message.', '')

      conns.each do |out|
        out << "event: #{channel}\n\n"
        out << "data: #{message}\n\n"
      end
    end
  end
end

__END__

@@ index
  <article id="log"></article>

  <script>
    var source = new EventSource('/subscribe');

    source.addEventListener('message', function (event) {
      log.innerText += '\n' + event.data;
    }, false);
  </script>

Don't you need to set your log variable, i.e. "var log = document.getElementById('log');".

Don't you need to set your log variable, i.e. "var log = document.getElementById('log');".

Nope, elements can be referenced from JavaScript by their ID.

Nope, elements can be referenced from JavaScript by their ID.

OMG I can't believe I just discovered this tip.

OMG I can't believe I just discovered this tip.

That's what I said when replying on Twitter... 14 years of JavaScript and then I come across this. Made me feel at little daft :)

That's what I said when replying on Twitter... 14 years of JavaScript and then I come across this. Made me feel at little daft :)

try do this without chrome/v8

try do this without chrome/v8

@pahagon maybe this would be of assistance? https://github.com/remy/polyfills/blob/master/EventSource.js

@pahagon maybe this would be of assistance? https://github.com/remy/polyfills/blob/master/EventSource.js

You should use document.getElementById('log'). Accessing an element by its id in a globally-scoped variable is a relic of ancient versions of Internet Explorer which, for whatever reason; Google decided to implement in V8. It is non-standard and bad practice, though; and won't work in Firefox.

You should use document.getElementById('log'). Accessing an element by its id in a globally-scoped variable is a relic of ancient versions of Internet Explorer which, for whatever reason; Google decided to implement in V8. It is non-standard and bad practice, though; and won't work in Firefox.

Thank you for that inspiration, I almost used faye..

There is a typo (?) in line 27, there should be only one newline to keep both lines close together:

      conns.each do |out|
        out << "event: #{channel}\n"
        out << "data: #{message}\n\n"
      end

Else the pushed message won't have the right type bound, and source.addEventListener('different'..) won't react at all.

Thank you for that inspiration, I almost used faye..

There is a typo (?) in line 27, there should be only one newline to keep both lines close together:

      conns.each do |out|
        out << "event: #{channel}\n"
        out << "data: #{message}\n\n"
      end

Else the pushed message won't have the right type bound, and source.addEventListener('different'..) won't react at all.