github-migration/rack-livereload
1
0
Fork 0
Code Issues 11 Pull Requests 4 Packages Projects Releases Wiki Activity

add support for web-sockets-js

Browse Source
This commit is contained in:
John Bintz 2011-11-17 15:44:48 -05:00
parent 667dee7f08
commit 47faab2457
13 changed files with 483 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Guardfile
View File

@ -7,3 +7,6 @@ guard 'rspec', :version => 2 do
watch('spec/spec_helper.rb') { "spec" } watch('spec/spec_helper.rb') { "spec" }
end end
guard 'livereload' do
watch('index.html')
end

20
README.md
View File

@ -56,5 +56,25 @@ you'll connect and be LiveReloading away!
* You can force the use of either one (and save on the cost of checking to see if that file * You can force the use of either one (and save on the cost of checking to see if that file
is available) with the middleware option `:source => :vendored` or `:source => :livereload`. is available) with the middleware option `:source => :vendored` or `:source => :livereload`.
### How about non-WebSocket-enabled browsers?
For browsers that don't support WebSockets, but do support Flash, [https://github.com/gimite/web-socket-js](web-socket-js)
is loaded. By default, this is done transparently, so you'll get a copy of swfobject.js and web_socket.js loaded even if
your browser doesn't need it. The SWF WebSocket implementor won't be loaded unless your browser has no native
WebSockets support or if you force it in the middleware stack:
``` ruby
use Rack::LiveReload, :force_swf => true
```
If you don't want any of the web-sockets-js code included at all, use the `no_swf` option:
``` ruby
use Rack::LiveReload, :no_swf => true
```
Once more browsers support WebSockets than don't, this option will be reversed and you'll have
to explicitly include the Flash shim.
As usual, super-alpha! As usual, super-alpha!

12
Rakefile
View File

@ -9,8 +9,20 @@ task :update_livereload_js do
} }
end end
desc 'Update web-socket-js'
task :update_web_socket_js do
require 'httparty'
%w{swfobject.js web_socket.js WebSocketMain.swf}.each do |file|
File.open("js/#{file}", 'wb') do |fh|
fh.print HTTParty.get("https://raw.github.com/gimite/web-socket-js/master/#{file}").body
end
end
end
require 'rspec/core/rake_task' require 'rspec/core/rake_task'
RSpec::Core::RakeTask.new(:spec) RSpec::Core::RakeTask.new(:spec)
task :default => :spec task :default => :spec

3
config.ru
View File

@ -3,10 +3,11 @@ $: << 'lib'
require 'rack/livereload' require 'rack/livereload'
use Rack::Logger
use Rack::LiveReload use Rack::LiveReload
get '/' do get '/' do
"<html><head><title>Hi</title></head><body>Hi</body></html>" File.read('index.html')
end end
run Sinatra::Application run Sinatra::Application

2
index.html Normal file
View File

@ -0,0 +1,2 @@
<html>
<head><title>Hi</title></head><body>Lats</body></html>

BIN
js/WebSocketMain.swf Normal file
View File

Binary file not shown.

4
js/swfobject.js Normal file
View File

File diff suppressed because one or more lines are too long

379
js/web_socket.js Normal file
View File

@ -0,0 +1,379 @@
// Copyright: Hiroshi Ichikawa <http://gimite.net/en/>
// License: New BSD License
// Reference: http://dev.w3.org/html5/websockets/
// Reference: http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10
(function() {
if (window.WebSocket && !window.WEB_SOCKET_FORCE_FLASH) return;
var logger;
if (window.WEB_SOCKET_LOGGER) {
logger = WEB_SOCKET_LOGGER;
} else if (window.console && window.console.log && window.console.error) {
// In some environment, console is defined but console.log or console.error is missing.
logger = window.console;
} else {
logger = {log: function(){ }, error: function(){ }};
}
// swfobject.hasFlashPlayerVersion("10.0.0") doesn't work with Gnash.
if (swfobject.getFlashPlayerVersion().major < 10) {
logger.error("Flash Player >= 10.0.0 is required.");
return;
}
if (location.protocol == "file:") {
logger.error(
"WARNING: web-socket-js doesn't work in file:///... URL " +
"unless you set Flash Security Settings properly. " +
"Open the page via Web server i.e. http://...");
}
/**
* This class represents a faux web socket.
* @param {string} url
* @param {array or string} protocols
* @param {string} proxyHost
* @param {int} proxyPort
* @param {string} headers
*/
WebSocket = function(url, protocols, proxyHost, proxyPort, headers) {
var self = this;
self.__id = WebSocket.__nextId++;
WebSocket.__instances[self.__id] = self;
self.readyState = WebSocket.CONNECTING;
self.bufferedAmount = 0;
self.__events = {};
if (!protocols) {
protocols = [];
} else if (typeof protocols == "string") {
protocols = [protocols];
}
// Uses setTimeout() to make sure __createFlash() runs after the caller sets ws.onopen etc.
// Otherwise, when onopen fires immediately, onopen is called before it is set.
self.__createTask = setTimeout(function() {
WebSocket.__addTask(function() {
self.__createTask = null;
WebSocket.__flash.create(
self.__id, url, protocols, proxyHost || null, proxyPort || 0, headers || null);
});
}, 0);
};
/**
* Send data to the web socket.
* @param {string} data The data to send to the socket.
* @return {boolean} True for success, false for failure.
*/
WebSocket.prototype.send = function(data) {
if (this.readyState == WebSocket.CONNECTING) {
throw "INVALID_STATE_ERR: Web Socket connection has not been established";
}
// We use encodeURIComponent() here, because FABridge doesn't work if
// the argument includes some characters. We don't use escape() here
// because of this:
// https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Functions#escape_and_unescape_Functions
// But it looks decodeURIComponent(encodeURIComponent(s)) doesn't
// preserve all Unicode characters either e.g. "\uffff" in Firefox.
// Note by wtritch: Hopefully this will not be necessary using ExternalInterface. Will require
// additional testing.
var result = WebSocket.__flash.send(this.__id, encodeURIComponent(data));
if (result < 0) { // success
return true;
} else {
this.bufferedAmount += result;
return false;
}
};
/**
* Close this web socket gracefully.
*/
WebSocket.prototype.close = function() {
if (this.__createTask) {
clearTimeout(this.__createTask);
this.__createTask = null;
this.readyState = WebSocket.CLOSED;
return;
}
if (this.readyState == WebSocket.CLOSED || this.readyState == WebSocket.CLOSING) {
return;
}
this.readyState = WebSocket.CLOSING;
WebSocket.__flash.close(this.__id);
};
/**
* Implementation of {@link <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-registration">DOM 2 EventTarget Interface</a>}
*
* @param {string} type
* @param {function} listener
* @param {boolean} useCapture
* @return void
*/
WebSocket.prototype.addEventListener = function(type, listener, useCapture) {
if (!(type in this.__events)) {
this.__events[type] = [];
}
this.__events[type].push(listener);
};
/**
* Implementation of {@link <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-registration">DOM 2 EventTarget Interface</a>}
*
* @param {string} type
* @param {function} listener
* @param {boolean} useCapture
* @return void
*/
WebSocket.prototype.removeEventListener = function(type, listener, useCapture) {
if (!(type in this.__events)) return;
var events = this.__events[type];
for (var i = events.length - 1; i >= 0; --i) {
if (events[i] === listener) {
events.splice(i, 1);
break;
}
}
};
/**
* Implementation of {@link <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-registration">DOM 2 EventTarget Interface</a>}
*
* @param {Event} event
* @return void
*/
WebSocket.prototype.dispatchEvent = function(event) {
var events = this.__events[event.type] || [];
for (var i = 0; i < events.length; ++i) {
events[i](event);
}
var handler = this["on" + event.type];
if (handler) handler.apply(this, [event]);
};
/**
* Handles an event from Flash.
* @param {Object} flashEvent
*/
WebSocket.prototype.__handleEvent = function(flashEvent) {
if ("readyState" in flashEvent) {
this.readyState = flashEvent.readyState;
}
if ("protocol" in flashEvent) {
this.protocol = flashEvent.protocol;
}
var jsEvent;
if (flashEvent.type == "open" || flashEvent.type == "error") {
jsEvent = this.__createSimpleEvent(flashEvent.type);
} else if (flashEvent.type == "close") {
jsEvent = this.__createSimpleEvent("close");
jsEvent.wasClean = flashEvent.wasClean ? true : false;
jsEvent.code = flashEvent.code;
jsEvent.reason = flashEvent.reason;
} else if (flashEvent.type == "message") {
var data = decodeURIComponent(flashEvent.message);
jsEvent = this.__createMessageEvent("message", data);
} else {
throw "unknown event type: " + flashEvent.type;
}
this.dispatchEvent(jsEvent);
};
WebSocket.prototype.__createSimpleEvent = function(type) {
if (document.createEvent && window.Event) {
var event = document.createEvent("Event");
event.initEvent(type, false, false);
return event;
} else {
return {type: type, bubbles: false, cancelable: false};
}
};
WebSocket.prototype.__createMessageEvent = function(type, data) {
if (document.createEvent && window.MessageEvent && !window.opera) {
var event = document.createEvent("MessageEvent");
event.initMessageEvent("message", false, false, data, null, null, window, null);
return event;
} else {
// IE and Opera, the latter one truncates the data parameter after any 0x00 bytes.
return {type: type, data: data, bubbles: false, cancelable: false};
}
};
/**
* Define the WebSocket readyState enumeration.
*/
WebSocket.CONNECTING = 0;
WebSocket.OPEN = 1;
WebSocket.CLOSING = 2;
WebSocket.CLOSED = 3;
WebSocket.__flash = null;
WebSocket.__instances = {};
WebSocket.__tasks = [];
WebSocket.__nextId = 0;
/**
* Load a new flash security policy file.
* @param {string} url
*/
WebSocket.loadFlashPolicyFile = function(url){
WebSocket.__addTask(function() {
WebSocket.__flash.loadManualPolicyFile(url);
});
};
/**
* Loads WebSocketMain.swf and creates WebSocketMain object in Flash.
*/
WebSocket.__initialize = function() {
if (WebSocket.__flash) return;
if (WebSocket.__swfLocation) {
// For backword compatibility.
window.WEB_SOCKET_SWF_LOCATION = WebSocket.__swfLocation;
}
if (!window.WEB_SOCKET_SWF_LOCATION) {
logger.error("[WebSocket] set WEB_SOCKET_SWF_LOCATION to location of WebSocketMain.swf");
return;
}
if (!window.WEB_SOCKET_SUPPRESS_CROSS_DOMAIN_SWF_ERROR &&
!WEB_SOCKET_SWF_LOCATION.match(/(^|\/)WebSocketMainInsecure\.swf(\?.*)?$/) &&
WEB_SOCKET_SWF_LOCATION.match(/^\w+:\/\/([^\/]+)/)) {
var swfHost = RegExp.$1;
if (location.host != swfHost) {
logger.error(
"[WebSocket] You must host HTML and WebSocketMain.swf in the same host " +
"('" + location.host + "' != '" + swfHost + "'). " +
"See also 'How to host HTML file and SWF file in different domains' section " +
"in README.md. If you use WebSocketMainInsecure.swf, you can suppress this message " +
"by WEB_SOCKET_SUPPRESS_CROSS_DOMAIN_SWF_ERROR = true;");
}
}
var container = document.createElement("div");
container.id = "webSocketContainer";
// Hides Flash box. We cannot use display: none or visibility: hidden because it prevents
// Flash from loading at least in IE. So we move it out of the screen at (-100, -100).
// But this even doesn't work with Flash Lite (e.g. in Droid Incredible). So with Flash
// Lite, we put it at (0, 0). This shows 1x1 box visible at left-top corner but this is
// the best we can do as far as we know now.
container.style.position = "absolute";
if (WebSocket.__isFlashLite()) {
container.style.left = "0px";
container.style.top = "0px";
} else {
container.style.left = "-100px";
container.style.top = "-100px";
}
var holder = document.createElement("div");
holder.id = "webSocketFlash";
container.appendChild(holder);
document.body.appendChild(container);
// See this article for hasPriority:
// http://help.adobe.com/en_US/as3/mobile/WS4bebcd66a74275c36cfb8137124318eebc6-7ffd.html
swfobject.embedSWF(
WEB_SOCKET_SWF_LOCATION,
"webSocketFlash",
"1" /* width */,
"1" /* height */,
"10.0.0" /* SWF version */,
null,
null,
{hasPriority: true, swliveconnect : true, allowScriptAccess: "always"},
null,
function(e) {
if (!e.success) {
logger.error("[WebSocket] swfobject.embedSWF failed");
}
});
};
/**
* Called by Flash to notify JS that it's fully loaded and ready
* for communication.
*/
WebSocket.__onFlashInitialized = function() {
// We need to set a timeout here to avoid round-trip calls
// to flash during the initialization process.
setTimeout(function() {
WebSocket.__flash = document.getElementById("webSocketFlash");
WebSocket.__flash.setCallerUrl(location.href);
WebSocket.__flash.setDebug(!!window.WEB_SOCKET_DEBUG);
for (var i = 0; i < WebSocket.__tasks.length; ++i) {
WebSocket.__tasks[i]();
}
WebSocket.__tasks = [];
}, 0);
};
/**
* Called by Flash to notify WebSockets events are fired.
*/
WebSocket.__onFlashEvent = function() {
setTimeout(function() {
try {
// Gets events using receiveEvents() instead of getting it from event object
// of Flash event. This is to make sure to keep message order.
// It seems sometimes Flash events don't arrive in the same order as they are sent.
var events = WebSocket.__flash.receiveEvents();
for (var i = 0; i < events.length; ++i) {
WebSocket.__instances[events[i].webSocketId].__handleEvent(events[i]);
}
} catch (e) {
logger.error(e);
}
}, 0);
return true;
};
// Called by Flash.
WebSocket.__log = function(message) {
logger.log(decodeURIComponent(message));
};
// Called by Flash.
WebSocket.__error = function(message) {
logger.error(decodeURIComponent(message));
};
WebSocket.__addTask = function(task) {
if (WebSocket.__flash) {
task();
} else {
WebSocket.__tasks.push(task);
}
};
/**
* Test if the browser is running flash lite.
* @return {boolean} True if flash lite is running, false otherwise.
*/
WebSocket.__isFlashLite = function() {
if (!window.navigator || !window.navigator.mimeTypes) {
return false;
}
var mimeType = window.navigator.mimeTypes["application/x-shockwave-flash"];
if (!mimeType || !mimeType.enabledPlugin || !mimeType.enabledPlugin.filename) {
return false;
}
return mimeType.enabledPlugin.filename.match(/flashlite/i) ? true : false;
};
if (!window.WEB_SOCKET_DISABLE_AUTO_INITIALIZATION) {
if (window.addEventListener) {
window.addEventListener("load", function(){
WebSocket.__initialize();
}, false);
} else {
window.attachEvent("onload", function(){
WebSocket.__initialize();
});
}
}
})();

2
lib/rack-livereload.rb
View File

@ -1,6 +1,6 @@
require "rack/livereload" require "rack/livereload"
class Rack::LiveReload class Rack::LiveReload
VERSION = '0.2.1' VERSION = '0.3.0'
end end

29
lib/rack/livereload.rb
View File

@ -1,3 +1,5 @@
require 'erb'
module Rack module Rack
class LiveReload class LiveReload
LIVERELOAD_JS_PATH = '/__rack/livereload.js' LIVERELOAD_JS_PATH = '/__rack/livereload.js'
@ -39,8 +41,10 @@ module Rack
end end
def call(env) def call(env)
if env['PATH_INFO'] == LIVERELOAD_JS_PATH _, path, file = (env['PATH_INFO'] || '').split('/')
deliver_file(::File.expand_path('../../../js/livereload.js', __FILE__))
if path == '__rack' && ::File.file?(target = ::File.expand_path("../../../js/#{file}", __FILE__))
deliver_file(target)
else else
status, headers, body = @app.call(env) status, headers, body = @app.call(env)
@ -62,7 +66,9 @@ module Rack
src << "&maxdelay=#{@options[:max_delay]}" if @options[:max_delay] src << "&maxdelay=#{@options[:max_delay]}" if @options[:max_delay]
src << "&port=#{@options[:port]}" if @options[:port] src << "&port=#{@options[:port]}" if @options[:port]
line.gsub!('</head>', %{<script type="text/javascript" src="#{src}"></script></head>}) template = ERB.new(::File.read(::File.expand_path('../../../skel/livereload.html.erb', __FILE__)))
line.gsub!('</head>', %{#{template.result(binding)}</head>})
headers["X-Rack-LiveReload"] = '1' headers["X-Rack-LiveReload"] = '1'
end end
@ -79,7 +85,22 @@ module Rack
private private
def deliver_file(file) def deliver_file(file)
[ 200, { 'Content-Type' => 'text/javascript', 'Content-Length' => ::File.size(file).to_s }, [ ::File.read(file) ] ] type = case ::File.extname(file)
when '.js'
'text/javascript'
when '.swf'
'application/swf'
end
[ 200, { 'Content-Type' => type, 'Content-Length' => ::File.size(file).to_s }, [ ::File.read(file) ] ]
end
def force_swf?
@options[:force_swf]
end
def with_swf?
!@options[:no_swf]
end end
end end
end end

1
rack-livereload.gemspec
View File

@ -28,6 +28,7 @@ Gem::Specification.new do |s|
s.add_development_dependency "mocha" s.add_development_dependency "mocha"
s.add_development_dependency "guard" s.add_development_dependency "guard"
s.add_development_dependency "guard-rspec" s.add_development_dependency "guard-rspec"
s.add_development_dependency "guard-livereload"
s.add_development_dependency "webmock" s.add_development_dependency "webmock"
s.add_runtime_dependency "rack" s.add_runtime_dependency "rack"

12
skel/livereload.html.erb Normal file
View File

@ -0,0 +1,12 @@
<% if with_swf? %>
<script type="text/javascript">
WEB_SOCKET_SWF_LOCATION = "/__rack/WebSocketMain.swf";
<% if force_swf? %>
WEB_SOCKET_FORCE_FLASH = true;
<% end %>
</script>
<script type="text/javascript" src="/__rack/swfobject.js"></script>
<script type="text/javascript" src="/__rack/web_socket.js"></script>
<% end %>
<script type="text/javascript" src="<%= src %>"></script>

22
spec/rack/livereload_spec.rb
View File

@ -74,6 +74,9 @@ describe Rack::LiveReload do
length.should == body.length.to_s length.should == body.length.to_s
described_class::LIVERELOAD_JS_PATH.should_not include(host) described_class::LIVERELOAD_JS_PATH.should_not include(host)
body.should include('swfobject')
body.should include('web_socket')
end end
end end
@ -102,6 +105,25 @@ describe Rack::LiveReload do
body.should include("host=#{new_host}") body.should include("host=#{new_host}")
end end
end end
context 'force flash' do
let(:middleware) { described_class.new(app, :force_swf => true) }
it 'should not add the flash shim' do
body.should include('WEB_SOCKET_FORCE_FLASH')
body.should include('swfobject')
body.should include('web_socket')
end
end
context 'no flash' do
let(:middleware) { described_class.new(app, :no_swf => true) }
it 'should not add the flash shim' do
body.should_not include('swfobject')
body.should_not include('web_socket')
end
end
end end
context '/__rack/livereload.js' do context '/__rack/livereload.js' do