add arquivos v1

mateuspontes · Sep 10, 2011 · 0077924 · 0077924
commit 0077924
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 0 deletions.
diff --git a/Gemfile b/Gemfile
@@ -0,0 +1,5 @@
+source 'http://rubygems.org'
+
+gem "sinatra"
+gem "eventmachine"
+gem "em-websocket"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -0,0 +1,21 @@
+GEM
+  remote: http://rubygems.org/
+  specs:
+    addressable (2.2.6)
+    em-websocket (0.3.1)
+      addressable (>= 2.1.1)
+      eventmachine (>= 0.12.9)
+    eventmachine (0.12.10)
+    rack (1.3.2)
+    sinatra (1.2.6)
+      rack (~> 1.1)
+      tilt (< 2.0, >= 1.2.2)
+    tilt (1.3.3)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  em-websocket
+  eventmachine
+  sinatra
diff --git a/README b/README
@@ -0,0 +1,15 @@
+# Sinatra + EventMachine
+
+Testando o EventMachine.. saber até que ponto ele pode me ajudar nos projetos :)
+
+# Para testar: 
+1 - clone o repositorio..
+2 - instale as gems:
+	bundle installl
+3 - rode o servidor:
+	ruby event.rb
+4 - rode o sinatra em outra janela do Terminal:
+	ruby home.rb
+5 - acesse a página em:
+	http://localhost:4567
+
diff --git a/event.rb b/event.rb
@@ -0,0 +1,17 @@
+require 'rubygems'
+require 'em-websocket'
+
+EventMachine.run do
+
+  EventMachine::WebSocket.start(:host => "0.0.0.0", :port => 8080) do |ws|
+    ws.onopen { ws.send "Hello from EventMachine :)" }
+
+    ws.onclose { puts "Connection closed =/" }
+
+    ws.onmessage { |msg| 
+      puts "Received: #{msg}"
+      ws.send "#{msg}"
+    }
+  end
+
+end
diff --git a/home.rb b/home.rb
@@ -0,0 +1,6 @@
+require 'rubygems'
+require 'sinatra'
+
+get '/' do
+  erb :index
+end
diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,70 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td {
+margin: 0;
+padding: 0;
+border: 0;
+outline: 0;
+font-size: 100%;
+vertical-align: baseline;
+background: transparent;
+}
+body {
+line-height: 1;
+}
+ol, ul {
+list-style: none;
+}
+blockquote, q {
+quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+content: '';
+content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+text-decoration: none;
+}
+del {
+text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+border-collapse: collapse;
+border-spacing: 0;
+}
+
+small { font-size: 11px; }
+
+strong, h2, h3, h4, h5, h6 { font-weight: bold; }
+em { font-style: italic; }
+
+a:link, a:visited, a:active{text-decoration: none; color: #900;}
+a:hover{text-decoration: underline;}
+
+body{font: 14px Arial, Verdana, Helvetica, sans-serif; text-align: center; color:#000; letter-spacing: -1px; padding: 50px 0 0;}
+
+h1{font-size: 2.5em; margin: 25px 0; color: #000; font-weight: bold; }
+
+h3{font-size: 1.5em; color: #900; margin: 10px 0; }
+
+#response { background: #f9f9f9; padding: 5px; width: 550px; text-align: left; border: 1px solid #e4e4e4; margin: 10px auto;}
+#response li { list-style: disc; margin-left: 20px; }
+#message { background: #e9e9e9; padding: 5px; width: 400px; text-align: left; border: 1px solid #d3d3d3; }
+
+.creditos { font-size: .9em; letter-spacing: normal; margin-top: 50px; color: #666;}
diff --git a/views/index.erb b/views/index.erb
@@ -0,0 +1,60 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<html>
+<head>
+	<title>Sinatra and EventMachine</title>
+
+	<link href="/css/style.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+	<div id="top">
+		<h1>Sinatra and EventMachine</h1>
+	</div>
+
+	<div id="conteudo">
+		<h3>Messages</h3>
+
+		<ul id="response"></ul>
+
+		<form name="post-message" method="post">
+			<label>Your message:
+				<input type="text" name="message" id="message" action="/" />
+			</label>
+
+			<input type="submit" value="Send" id="send" />
+		</form>
+	</div>
+
+	<div id="footer">
+		<p class="creditos">Por <a href="http://twitter.com/mateuspontes">@mateuspontes</a></p>
+	</div>
+
+	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
+
+	<script type="text/javascript">
+	$(function () {
+		$("#message").focus();
+
+		ws = new WebSocket("ws://0.0.0.0:8080");
+		ws.onmessage = function(msg) { 
+			$("#response").append("<li>"+msg.data+"</li>"); 
+		};
+
+		ws.onclose = function() { 
+			console.log("closed =/");
+		}
+
+		ws.onopen = function() {
+			console.log("connected! =)");
+		}
+	});
+
+	$("#send").click( function(e) {
+		e.preventDefault();
+
+		var message = $("#message");
+		ws.send(message.val());
+		message.val("");
+	})
+	</script>
+</body>
+</html>