Skip to content

Instantly share code, notes, and snippets.

@waseem

waseem/Gemfile

Forked from lifo/Gemfile
Created Apr 25, 2011
Embed
What would you like to do?
#require 'vendor/gems/environment'
require 'cramp'
require 'erubis'
require 'usher'
Cramp::Websocket.backend = :thin
module ChatRamp
class HomeAction < Cramp::Action
@@template = Erubis::Eruby.new(File.read('index.erb'))
def start
render @@template.result(binding)
finish
end
end
class SocketAction < Cramp::Websocket
@@users = Set.new
on_start :user_connected
on_finish :user_left
on_data :message_received
def user_connected
@@users << self
end
def user_left
@@users.delete self
end
def message_received(data)
@@users.each {|u| u.render data }
end
end
end
routes = Usher::Interface.for(:rack) do
add('/').to(ChatRamp::HomeAction)
add('/socket').to(ChatRamp::SocketAction)
end
Rack::Handler::Thin.run routes, :Port => 8080
gem 'cramp'
gem 'erubis', '2.6.5'
gem 'usher', "0.6.0"
<!-- Taken from http://dev.eclipse.org/svnroot/rt/org.eclipse.jetty/jetty/trunk/test-jetty-webapp/src/main/webapp/ws/index.html -->
<html>
<head>
<title>WebSocket Chat</title>
<script type='text/javascript'>
if (!window.WebSocket)
alert("WebSocket not supported by this browser");
function $() { return document.getElementById(arguments[0]); }
function $F() { return document.getElementById(arguments[0]).value; }
function getKeyCode(ev) { if (window.event) return window.event.keyCode; return ev.keyCode; }
var room = {
join: function(name) {
this._username=name;
var location = 'ws://<%= request.host_with_port %>/socket'
// document.location.toString().replace('http:','ws:');
this._ws = new WebSocket(location);
this._ws.onopen = this._onopen;
this._ws.onmessage = this._onmessage;
this._ws.onclose = this._onclose;
},
_onopen: function(){
$('join').className = 'hidden';
$('joined').className = '';
$('phrase').focus();
room._send(room._username, 'has joined!');
},
_send: function(user,message){
user=user.replace(':', '_');
if (this._ws)
this._ws.send(user + ':' + message);
},
chat: function(text) {
if (text != null && text.length>0 )
room._send(room._username,text);
},
_onmessage: function(m) {
if (m.data){
var c=m.data.indexOf(':');
var from=m.data.substring(0,c).replace('<','&lt;').replace('>','&gt;');
var text=m.data.substring(c+1).replace('<','&lt;').replace('>','&gt;');
var chat=$('chat');
var spanFrom = document.createElement('span');
spanFrom.className='from';
spanFrom.innerHTML=from+':&nbsp;';
var spanText = document.createElement('span');
spanText.className='text';
spanText.innerHTML=text;
var lineBreak = document.createElement('br');
chat.appendChild(spanFrom);
chat.appendChild(spanText);
chat.appendChild(lineBreak);
chat.scrollTop = chat.scrollHeight - chat.clientHeight;
}
},
_onclose: function(m) {
this._ws=null;
$('join').className='';
$('joined').className='hidden';
$('username').focus();
$('chat').innerHTML='';
}
};
</script>
<style type='text/css'>
div { border: 0px solid black; }
div#chat { clear: both; width: 40em; height: 20ex; overflow: auto; background-color: #f0f0f0; padding: 4px; border: 1px solid black; }
div#input { clear: both; width: 40em; padding: 4px; background-color: #e0e0e0; border: 1px solid black; border-top: 0px }
input#phrase { width:30em; background-color: #e0f0f0; }
input#username { width:14em; background-color: #e0f0f0; }
div.hidden { display: none; }
span.from { font-weight: bold; }
span.alert { font-style: italic; }
</style>
</head>
<body>
<div id='chat'></div>
<div id='input'>
<div id='join' >
Username:&nbsp;<input id='username' type='text'/><input id='joinB' class='button' type='submit' name='join' value='Join'/>
</div>
<div id='joined' class='hidden'>
Chat:&nbsp;<input id='phrase' type='text'/>
<input id='sendB' class='button' type='submit' name='join' value='Send'/>
</div>
</div>
<script type='text/javascript'>
$('username').setAttribute('autocomplete', 'OFF');
$('username').onkeyup = function(ev) {
var keyc=getKeyCode(ev);
if (keyc==13 || keyc==10) {
room.join($F('username'));
return false;
}
return true;
};
$('joinB').onclick = function(event) {
room.join($F('username'));
return false;
};
$('phrase').setAttribute('autocomplete','OFF');
$('phrase').onkeyup = function(ev) {
var keyc=getKeyCode(ev);
if (keyc==13 || keyc==10) {
room.chat($F('phrase'));
$('phrase').value='';
return false;
}
return true;
};
$('sendB').onclick = function(event) {
room.chat($F('phrase'));
$('phrase').value='';
return false;
};
</script>
<p>
This is a demonstration of the <a href="http://m.onkey.org/2010/1/7/introducing-cramp">Cramp Framework</a>'s websocket capabiltiy using HTML from <a href="http://jetty.mortbay.org/">Jetty websocket server</a>.
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.