The Browser Environment - A Systems Programmer's Perspective [sinatra edition]

Eleanor McHugh

http://slideshare.net/feyeleanor

http://github.com/feyeleanor/TheBrowserEnvironmentSinatra
The Browser Environment
A Systems Programmer's Perspective

[Sinatra and Ruby]

pay attention!
all code is BSD 2-clause licensed

any resemblance to actual code &
conceptstm, living or dead, is probably
your imagination playing tricks on you

if you can make money from it you're
doing a damn sight better than we are!

Sinatra
serving web content with Ruby

require 'sinatra'

set :server, %w[ thin mongrel webrick ]

set :bind, ENV['IP_ADDRESS'] || '0.0.0.0'

set :port, ENV['PORT'] || 3000

set :message, ARGV[0] || "Hello World"

get '/' do

settings.message

end

require 'sinatra'




set :message, ARGV[0] || "Hello World"

get '/' do

erb :html_02, locals: { message: settings.message }

end

<!DOCTYPE html>

<html>

<head>

<meta charset='UTF-8' />

<title>TBE:Ruby HTML</title>

</head>

<body class='container'>

<h1>TBE:Ruby HTML</h1>

<div>

<%= message %>

</div>

</body>

</html>

Microsoft's Gift

to Humanity
the XMLHttpRequest object

aka

AJAX
asynchronous javascript and XML

AJAX
Asynchronous JavaScript and XML
•JavaScript is a single-threaded language

•but browsers are event-driven environments

•so JavaScript runtimes normally have three basic threads

•one to run the main script

•one to run scripts for high priority events

•one to run scripts for low priority events

•and each event can have callbacks de
fi
ned for it

AJAX
Asynchronous JavaScript and XML
•XMLHttpRequest
fi
rst appeared in MSXML

•available in IE5 as an ActiveX component from 1999

•similar functionality in other browsers from 2000 onwards

•fully supported in IE 7 2006

•despite its name it isn't restricted to XML

•most modern uses involve JSON

require 'sinatra'




set :commands, ["A", "B", "C"]

get '/' do

erb :html_03, locals: { commands: settings.commands }

end

get '/:command' do

params[:command]

end

<!DOCTYPE html>

<html>

<head>


<title>TBE:Ruby AJAX</title>

<script>

const element = (e = "event_log") => { return document.getElementById(e) };

const print = m => { element().innerHTML += `<div>${m}</div>` };

<% commands.each do |c, v| %>

function <%= c %>() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

print(this.responseText);

}

};

xhttp.open("GET", "<%= c %>", true);

xhttp.send();

}

<% end %>

</script>

</head>

<body>

<h1>TBE:Ruby AJAX</h1>

<h2>Actions</h2>

<div>


<span>

<button type="button" onclick="<%= c %>();"><%= c %></button>

</span>

<% end %>

</div>

<h2>Server Output</h2>

<div id='event_log'></div>

</body>

</html>

require 'sinatra'





get '/' do


end

get '/:command' do

if settings.commands.include? params[:command]

params[:command]

else

halt 404

end

end

<!DOCTYPE html>

<html>

<head>



<script>



function sendCommand(c) {


xhttp.onreadystatechange = function() {

if (this.readyState == 4) {

if (this.status == 200) {

print(this.responseText);

} else {

print(`Request Failed: ${this.status}`);

}

}

};

xhttp.open("GET", c, true);

xhttp.send();

}

</script>

</head>

<body>


<h2>Actions</h2>

<div>


<span>

<button type="button" onclick="sendCommand('<%= c %>');"><%= c %></button>

</span>

<% end %>

</div>



</body>

</html>

require 'sinatra'





get '/' do


end

get '/:command' do


params[:command]

else

halt 404

end

end

<!DOCTYPE html>

<html>

<head>



<script>



function sendCommand(c) {


xhttp.open("GET", c, false);

xhttp.send();

if (xhttp.status == 200) {

print(xhttp.responseText);

} else {

print(`Request Failed: ${xhttp.status}`);

}

}

</script>

</head>

<body>


<h2>Actions</h2>

<div>


<span>

<button type="button" onclick="sendCommand('<%= c %>');"><%= c %></button>

</span>

<% end %>

<span>

<button type="button" onclick="sendCommand('D');">D</button>

</span>

</div>



</body>

</html>

fetch
a promise of things to come

require 'sinatra'





get '/' do


end

get '/:command' do


params[:command]

else

halt 404

end

end

<!DOCTYPE html>

<html>

<head>


<title>TBE:Ruby Fetch</title>

<script>



async function sendCommand(c) {

let response = await fetch(c);

if (response.ok) {

let body = await response.text();

print(body);

} else {

print(`Request Failed: ${response.status}`);

}

}

</script>

</head>

<body>

<h1>TBE:Ruby Fetch</h1>

<h2>Actions</h2>

<div>


<span>

<button type="button" onclick="sendCommand('<%= c %>');"><%= c %></
button>

</span>

<% end %>

<span>


</span>

</div>



</body>

</html>

require 'sinatra'





get '/' do


end

get '/:command' do


params[:command]

else

halt 404

end

end

<!DOCTYPE html>

<html>

<head>



<script>




let response = await fetch(c);

if (response.ok) {

let body = await response.text();

print(body);

} else {

print(`Request Failed: ${response.status}`);

}

}

</script>

</head>

<body>


<h2>Actions</h2>

<div>


<span>

<button type="button" onclick="sendCommand('<%= c %>');"><%= c %></
button>

</span>

<% end %>

<span>


</span>

</div>



</body>

</html>

require 'sinatra'




set :commands, {

"A": ["B", "C"],

"B": ["A", "C"],

"C": ["A", "B"]

}

get '/' do


end

<!DOCTYPE html>

<html>

<head>



<script>



const hide = e => {

let el = element(e);

el.disabled = true;

el.innerHTML = "X";

};

const show = (...n) => n.forEach(e => {

let el = element(e);

el.disabled = false;

el.innerHTML = e;

});

function toggle(name) {

print(name);

hide(name);

switch(name) {


case '<%= c %>':

show(<%= v.map {|x| "'#{x}'" }.join(',') %>);

break;

<% end %>

};

}

</script>

</head>

<body>


<h2>Actions</h2>

<div>


<span>

<button type="button" onclick="toggle('<%= c %>');"><%= c %></button>

</span>

<% end %>

</div>



</body>

</html>

require 'sinatra'




get '/' do

erb :html_09

end

<!DOCTYPE html>

<html>

<head>


<title>TBE:Ruby DOM</title>

<script>


const hide = e => {

e.innerHTML = "X";

e.disabled = true;

};

const show = (...n) => n.forEach(e => {

e.innerHTML = e.id;

e.disabled = false;

});

var buttons = [];

function toggle(e) {

hide(e);

switch(e.id) {

case 'A':

show(buttons[1], buttons[0]);

break;

case 'B':


break;

case 'C':


break;

};

}

function newButton(id) {

let b = document.createElement("BUTTON");

b.id = id;

b.onclick = new Function("toggle(this);");

b.appendChild(document.createTextNode(id));

return b;

}

window.onload = () => {

['A', 'B', 'C'].forEach(n => {

buttons.unshift(newButton(n));

element("action_buttons").appendChild(buttons[0]);

});

};

</script>

</head>

<body>

<h1>TBE:Ruby DOM</h1>

<h2>Actions</h2>

<div id="action_buttons"></div>

</body>

</html>

require 'sinatra'





get '/' do


end

get '/:command' do


params[:command]

else

halt 404

end

end

<!DOCTYPE html>

<html>

<head>


<title>TBE:Ruby DOM Fetch/title>

<script>




fetch(c)

.then(response => {

if (response.status != 200) {

throw new Error(response.status)

}

return response.text()

})

.then(text => print(text))

.catch(e => print(`Request Failed: ${e}`));

}

function newButton(n, c) {


b.onclick = c;

b.appendChild(document.createTextNode(n));

return b;

}



element("action_buttons").

appendChild(

newButton('<%= c %>', () => sendCommand('<%= c %>')));

<% end %>

};

</script>

</head>

<body>

<h1>TBE:Ruby DOM Fetch</h1>

<h2>Actions</h2>




</body>

</html>

require 'sinatra'




get '/' do

erb :html_11

end

<!DOCTYPE html>

<html>

<head>


<title>TBE:Ruby Timer/title>

<script>




let i = window.setInterval(() => {

print(`setInterval ${i} triggered`);

}, 500);

let j = window.setTimeout(() => {

print(`setTimeout ${j} triggered`);

let k = window.setTimeout(() => {

window.clearInterval(i);

print(`setInterval ${k} cancelled`);

}, 2000);

}, 3000);

};

</script>

</head>

<body>

<h1>TBE:Ruby Timer</h1>

<h2>Timer Events</h2>


</body>

</html>

require 'sinatra'




get '/' do

erb :html_12

end

<!DOCTYPE html>

<html>

<head>



<script>



const doAfter = (i, f) => { return window.setTimeout(f, i) };

const doEvery = (i, f) => { return window.setInterval(f, i) };


let i = doEvery(500, () => {

print(`doEvery ${i} triggered`);

});

let j = doAfter(3000, () => {

print(`doAfter ${j} triggered`);

let k = doAfter(2000, () => {


print(`doAfter ${k} triggered cancelling ${i}`);

});

});

}

</script>

</head>

<body>




</body>

</html>

require 'sinatra'




set :commands, [

["interval", 3000],

["timeout", 5000],

["timeout", 7500],

["interval", 1000]

]

get '/' do


end

<!DOCTYPE html>

<html>

<head>



<script>



const addButton = (n, c) => { element("action_buttons").appendChild(newButton(n, c)) };

const doAfter = (i, f) => { return window.setTimeout(f, i) };




b.innerHTML = n;

b.onclick = c(b);

return b;

}

const cancelButton = (b, n, i, f) => {

print(`timer ${i} cancelled`);

b.innerHTML = n;

b.onclick = f;

}


<% count = commands.length

commands.each do |c, i|

case c

when "interval" %>

<% count -= 1 %>

let f_<%= count %> = b => {

return () => {

var count = 1;

let i = doEvery(<%= i %>, () => {

print(`doEvery ${i} triggered ${count}`);

count++;

});

print(`doEvery ${i} cued`);

b.innerHTML = `cancel ${i}`;

b.onclick = () => {


cancelButton(b, '<%= c %>', i, f_<%= count %>(b));

};

};

;

addButton('<%= c %>', f_<%= count %>);

<% when "timeout" %>

<% count -= 1 %>

let f_<%= count %> = b => {

return () => {

let i = doAfter(<%= i %>, () => {

print(`doAfter ${i} completed`);

b.innerHTML = '<%= c %>'

b.onclick = f_<%= count %>(b);

});

print(`doAfter ${i} cued`);

b.innerHTML = `cancel ${i}`;

b.onclick = () => {

window.clearTimeout(i);

cancelButton(b, '<%= c %>', i, f_<%= count %>(b));

};

};

};

addButton('<%= c %>', f_<%= count %>);

<% end

end %>

}

</script>

</head>

<body>


<h2>Actions</h2>




</body>

</html>

require 'sinatra'




set :commands, {

"A" => 300,

"B" => 700,

"C" => 500

}

get '/' do


end

get '/:command' do


settings.commands[params[:command]].to_s

else

halt 404

end

end

<!DOCTYPE html>

<html>

<head>


<title>TBE:Ruby Timer Fetch</title>

<script>







b.onclick = c;


return b;

}

var timers = {}

const clearTimer = t => {

window.clearInterval(timers[t]);

print(`no longer polling ${t}`);

timers[t] = null;

}

function doCommand(c, i) {

if (timers[c]) {

clearTimer(c);

} else {

print(`poll ${c}`);

timers[c] = doEvery(i, () => {

fetch(c)

.then(response => response.text())

.then(text => print(`polling ${c}: ${text}`))

.catch(e => print(`Request Failed: ${e}`));

});

}

}



addButton('<%= c %>', () => doCommand('<%= c %>', '<%= v %>'));

<% end %>

addButton("cancel", () => {

for (const t in timers) { clearTimer(t) }});

}

</script>

</head>

<body>

<h1>TBE:Ruby Timer Fetch</h1>

<h2>Actions</h2>




</body>

</html>

WebSocket
bidirectional communication

require 'sinatra'

require 'sinatra-websocket'




set :socket_url, ENV['SOCKET'] || '/'


get '/' do

if !request.websocket?

erb :html_15, locals: {

url: settings.socket_url,

commands: settings.commands }

else

request.websocket do |ws|

ws.onopen do

warn "websocket connected"

ws.send "connection established"

end

ws.onmessage do |m|

warn "received: #{m}n"

if settings.commands.include? m

ws.send m

else

ws.send "unknown request #{m}"

end

end

ws.onclose do

warn "socket closed #{ws}"

end

end

end

end

<!DOCTYPE html>

<html>

<head>


<title>TBE:Ruby WebSocket</title>

<script>



const addButton = (n, c) => {

element("action_buttons").appendChild(newButton(n, c)) };



b.onclick = c;


return b;

}


var socket = new WebSocket(`ws://${location.host}<%= url %>`);

socket.onopen = (e) => print("opening socket: <%= url %>");

socket.onclose = (e) => print("closing socket: <%= url %>");

socket.onerror = (e) => print(e.message);

socket.onmessage = (m) => { print(m.data) };


addButton('<%= c %>', () => socket.send('<%= c %>'));

<% end %>

addButton('D', () => socket.send('D'));

</script>

</head>

<body>

<h1>TBE:Ruby WebSocket</h1>

<h2>Actions</h2>




</body>

</html>

require 'sinatra'







set :sockets, []

get '/' do


erb :html_16, locals: { url: settings.socket_url, commands: settings.commands }

else


ws.onopen do

warn "websocket #{ws} connected"

m = "connection opened: #{ws.object_id}"

settings.sockets.each { |s| s.send m }

settings.sockets << ws

ws.send "connection established: #{ws.object_id}"

end

ws.onmessage do |m|


EM.next_tick do

ws.send "message sent: #{m}"

m = "message received from #{ws.object_id}: #{m}"

settings.sockets.each { |s| s.send m unless s == ws }

end

else

ws.send "unknown command: #{m}"

end

end

ws.onclose do


settings.sockets.delete ws

m = "connection closed: #{ws.object_id}"


end

end

end

end

<!DOCTYPE html>

<html>

<head>


<title>TBE:Ruby WebSocket</title>

<script>



const addButton = (n, c) => {

element("action_buttons").appendChild(newButton(n, c)) };



b.onclick = c;


return b;

}






socket.onmessage = (m) => { print(m.data) };


addButton('<%= c %>', () => socket.send('<%= c %>'));

<% end %>

addButton('D', () => socket.send('D'));

</script>

</head>

<body>

<h1>TBE:Ruby WebSocket</h1>

<h2>Actions</h2>




</body>

</html>

require 'sinatra'







set :sockets, []

get '/' do



else


ws.onopen do






end

ws.onmessage do |m|


EM.next_tick do




end

else


end

end

ws.onclose do





end

end

end

end

require 'websocket-eventmachine-client'

server = ENV['SERVER'] || '127.0.0.1:3000'

server_url = "ws://#{server}"

EM.run do

puts "connecting to server: #{server_url}"

ws = WebSocket::EventMachine::Client.connect :uri => server_url

puts ws

ws.onopen do

puts "connected: #{server}"

end

ws.onmessage do |m, t|

puts m

end

ws.onerror do |e|

puts "error: #{e}"

end

ws.onclose do |c, m|

puts "disconnected: #{server} (#{c}, #{m})"

exit

end

end

require 'sinatra'







set :sockets, []

get '/' do



else


ws.onopen do






end

ws.onmessage do |m|


EM.next_tick do




end

else


end

end

ws.onclose do





end

end

end

end


server = ENV['SERVER'] || 'localhost:3000'

heartbeat = ENV['HEARTBEAT'] || 2

commands = ["A", "B", "C", "D"]


connected = false

def rotate_buffer b

r = b.shift

b << r

r

end

EM.run do


ws = WebSocket::EventMachine::Client.connect(:uri => "ws://127.0.0.1:3000")

puts ws

ws.onopen do


connected = true

end


puts m

end

ws.onerror do |e|

puts "error: #{e}"

end



end

timer = EventMachine::PeriodicTimer.new(heartbeat) do

ws.send rotate_buffer(commands) if connected

end

end

require 'sinatra'






set :commands, [:HEARTBEAT, :PRINT, :ERROR]

set :sockets, []

set :heartbeat, 0

def message id, a, m, e = nil

{ "id" => id, "action" => a, "message" => m, "error" => e }

end

get '/' do



else


ws.onopen do


m = message 0, :PRINT, "connection opened: #{ws.object_id}"

settings.sockets.each { |s| s.send m.to_json }

ws.send message(0, :PRINT, "connection established: #{ws.object_id}").to_json

ws.send message(0, :HEARTBEAT, settings.heartbeat).to_json


end

ws.onmessage do |m|

m = JSON.parse m

m.merge! "id" => ws.object_id

case m["action"].to_sym

when :HEARTBEAT

settings.heartbeat = m["message"].to_i

EM.next_tick do


end

when :PRINT

EM.next_tick do

settings.sockets.each { |s| s.send m.to_json if s != ws }

end

else

ws.send message(0, :ERROR, m["message"], m["action"]).to_json

end

end

ws.onclose do



m = message(0, :PRINT, "connection closed: #{ws.object_id}").to_json


end

end

end

end
<!DOCTYPE html>

<html>

<head>


<title>WebSocket EXAMPLE</title>

<script>




const sendMessage = (s, a, m) => {

s.send(JSON.stringify({ id: null, action: a, message: m }))

};



b.onclick = c;


return b;

}


var heartbeat = 0;





socket.onmessage = (m) => {

let d = JSON.parse(m.data);

switch (d.action.toUpperCase()) {

case 'HEARTBEAT':

heartbeat = d.message;

element("counter").innerHTML = heartbeat;

print(`${d.id}: ${d.action} ${heartbeat}`);

break;

case 'PRINT':

print(`${d.id}: ${d.message}`);

break;

}

};

[0, 10, 100].forEach(i => {

addButton(`HEARTBEAT ${i}`, () => sendMessage(socket, 'HEARTBEAT', i));

});

}

</script>

</head>

<body>

<h1>WebSocket EXAMPLE</h1>

<h2>Actions</h2>

<div id="heartbeat">

HEARTBEAT: <span id="counter">0</span>

</div>




</body>

</html>

require 'sinatra'






set :commands, [:HEARTBEAT, :PRINT, :ERROR]

set :sockets, []

set :heartbeat, 0

def message id, a, m, e = nil

{ "id" => id, "action" => a, "message" => m, "error" => e }

end

get '/' do



else


ws.onopen do


m = message 0, :PRINT, "connection opened: #{ws.object_id}"


ws.send message(0, :PRINT, "connection established: #{ws.object_id}").to_json

ws.send message(0, :HEARTBEAT, settings.heartbeat).to_json


end

ws.onmessage do |m|

m = JSON.parse m

m.merge! "id" => ws.object_id

case m["action"].to_sym

when :HEARTBEAT

settings.heartbeat = m["message"].to_i

EM.next_tick do


end

when :PRINT

EM.next_tick do

settings.sockets.each { |s| s.send m.to_json if s != ws }

end

else

ws.send message(0, :ERROR, m["message"], m["action"]).to_json

end

end

ws.onclose do



m = message(0, :PRINT, "connection closed: #{ws.object_id}").to_json


end

end

end

end

require 'json'

server = ENV['SERVER'] || '127.0.0.1:3000'

heartbeat = ENV['HEARTBEAT'] || 1


connected = false

count = 0

EM.run do


ws = WebSocket::EventMachine::Client.connect(:uri => server_url)

puts ws

ws.onopen do


connected = true

end


v = JSON.parse(m)

case v["action"].to_sym

when :PRINT

puts "#{v["id"]}: #{v["message"]}"

when :HEARTBEAT

count = v["message"].to_i

puts "#{v["id"]}: HEARTBEAT ==> #{count}"

when :ERROR

puts "ERROR: #{v["error"]} ==> #{v["message"]}"

end

end

ws.onerror do |e|

puts "error: #{e}"

end



exit

end

timer = EventMachine::PeriodicTimer.new(heartbeat) do

count += 1

ws.send({ "action" => 'HEARTBEAT', "message" => count }.to_json) if connected

end

end

•http://github.com/feyeleanor

•http://slideshare.net/feyeleanor

•http://leanpub.com/GoNotebook

The Browser Environment - A Systems Programmer's Perspective [sinatra edition]

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to The Browser Environment - A Systems Programmer's Perspective [sinatra edition]

Similar to The Browser Environment - A Systems Programmer's Perspective [sinatra edition] (20)

More from Eleanor McHugh

More from Eleanor McHugh (20)

Recently uploaded

Recently uploaded (20)

The Browser Environment - A Systems Programmer's Perspective [sinatra edition]