dev.enekoalonso.com » demo

More WebSockets, now with Python!

Eneko Alonso — Sun, 23 May 2010 06:41:27 +0000

A couple of weeks ago, Tim and I worked on a little game/demo using WebSockets and C# (I haven’t been able to put it online since I do not have a Windows server). It was a lot of fun and we were able to see the potential of WebSockets and how much internet ~~can~~ will change in the next few years because of them.

Today I spent a couple of hours researching and implementing a WebSocket solution that I could run in my linux servers, and I found this very nice tutorial for creating a Python WebSockets server: http://yz.mit.edu/wp/web-sockets-tutorial-with-simple-python-server/

So I took that code and modified to create a very, very basic chat, that broadcasts received messages to all connected clients. You can try it here (as long as the python server is still up): http://enekoalonso.com/research/html5/websockets/python/

Here is the client code:

var form = document.getElementById('form');
var msg = document.getElementById('msg');
var output = document.getElementById('serveroutput');
var s = new WebSocket("ws://"+window.location.hostname+":9876/");
s.onopen = function(e) {
console.log("opened");
out('Connected.');
}
s.onclose = function(e) {
console.log("closed");
out('Connection closed.');
}
s.onmessage = function(e) {
console.log("got: " + e.data);
out(e.data);
}
form.onsubmit = function(e) {
e.preventDefault();
msg.value = '';
window.scrollTop = window.scrollHeight;
}
function sendMsg() {
s.send(msg.value);
}
function out(text) {
var el = document.createElement('p');
el.innerHTML = text;
output.appendChild(el);
}
msg.focus();

And the server code:

#!/usr/bin/env python
import socket, threading
# httphost = "localhost:8888"
# sockethost = "localhost:9876"
httphost = "enekoalonso.com"
sockethost = "enekoalonso.com:9876"
def handle(s, addr):
handsake = "HTTP/1.1 101 Web Socket Protocol Handshake\r\nUpgrade: WebSocket\r\nConnection: Upgrade\r\nWebSocket-Origin: http://%s\r\nWebSocket-Location: ws://%s/\r\nWebSocket-Protocol: sample\r\n\r\n" % (httphost, sockethost)
s.send(handsake)
data = s.recv(1024)
lock = threading.Lock()
while 1:
data = s.recv(1024)
if not data: break
print 'Data from', addr, ':', data
lock.acquire()
[conn.send(data) for conn in clients]
lock.release()
print 'Client closed:', addr
lock.acquire()
clients.remove(s)
lock.release()
s.close()
def start_server():
s = socket.socket()
s.setsockopt(socket.SOL_SOCKET, socket.SO_REUSEADDR, 1)
s.bind(('', 9876))
s.listen(1)
while 1:
conn, addr = s.accept()
print 'Connected by', addr
clients.append(conn)
threading.Thread(target = handle, args = (conn,addr)).start()
clients = []
start_server()

Check the live demo (be aware WebSockets are only supported by Google Chrome right now): http://enekoalonso.com/research/html5/websockets/python/
Open a few tabs and send some text. You should see it appearing in all of them. It will also work if you open the page in multiple browser windows or even if you open the page in different computers.

May 3, 2010 -- Playing with WebSockets (2)
May 6, 2010 -- Tech talks at LEVEL Studios (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
July 1, 2010 -- Little tricks: editing strings by index in Javascript and Python (1)

Having fun with Mooml & Twitter

Eneko Alonso — Fri, 19 Feb 2010 20:43:54 +0000

Mooml is a templating engine for Mootools. With it, you can create HTML from Javascript using a very clean syntax. Plus, it is extremely useful when you have to generate repeating elements, since Mooml automatically renders arrays of data multiple times. Let’s see an example.

Searching Twitter

Nowadays there are a lot of APIs out there that support JSON or JSONP, which we can use directly from the front end using Javascript. Also, there are other APIs that return tons of JS data, like Google Maps. In this example we are going to be searching Twitter and displaying the search results in a container div, properly rendered as HTML.

The url for searching Twitter is http://search.twitter.com/search.json?q=mootools&show_user=true (searching for Mootools in this case). Check the output:

{
"results":[
{
"profile_image_url":"http://a3.twimg.com/profile_images/547672997/twitterProfilePhoto_normal.jpg",
"created_at":"Fri, 19 Feb 2010 17:08:55 +0000",
"from_user":"digitalr3bel",
"to_user_id":1212494,
"text":"@davidwalshblog Hi David – im a big fan of your site! Can you recommend a good MooTools tutorial for someone who can already program? thx",
"id":9343656026,
"from_user_id":23704390,
"to_user":"davidwalshblog",
"geo":null,
"iso_language_code":"en",
"source":"//apiwiki.twitter.com/" rel="nofollow">API"
}
// More results here…
],
"max_id":9343656026,
"since_id":0,
"refresh_url":"?since_id=9343656026&q=mootools",
"next_page":"?page=2&max_id=9343656026&q=mootools",
"results_per_page":15,
"page":1,
"completed_in":0.0352710000000001,
"query":"mootools"
}

We want to render each result inside out container div. On this example, we will just render the user name, user image and message text. Here is our Mooml template:

Mooml.register('twitter-search-result', function(entry) {
div({id: "tweet-" + entry.id},
img({src: entry.profile_image_url, alt: entry.from_user}),
span(entry.from_user),
p(entry.text)
);
});

Since all results are returned into an array, we can pass it directly to Mooml which will render all of the elements in it:

// Data is the JSON response from Twitter
Mooml.render('twitter-search-result', data.results);

So, let’s do a live test. Type something you want to search for and hit the search button to see Mooml in action :)

Search:

How cool is that?

The code

Ok, so here is the whole code I have used in this post for this mini-demo:

<script type="text/javascript" src="http://enekoalonso.com/lib/mootools-1.2.4-core-nc.js">script>
<script type="text/javascript" src="http://enekoalonso.com/lib/mooml.js">script>
<script type="text/javascript">
Mooml.register('twitter-search-result', function(entry) {
div({id: "tweet-" + entry.id},
img({src: entry.profile_image_url, alt: entry.from_user}),
span(entry.from_user),
p(entry.text)
);
});
function searchTwitter() {
new Element('script', {
type:'text/javascript',
src:'http://search.twitter.com/search.json?q={text}&show_user=true&callback=renderData'.substitute({
text:$('twitter-mooml-search').get('value')
})
}).inject(document.head);
}
function renderData(data) {
$('mooml-twitter-demo').empty().adopt(Mooml.render('twitter-search-result', data.results));
}
$('twitter-mooml-search-btn').addEvent('click', searchTwitter);
searchTwitter();

As you can see, the code is very basic and so is the Mooml template. The coolest thing here is that you don’t need to iterate over the results to render each element.

Have fun!

April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (0)
March 24, 2010 -- Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates (0)
March 15, 2010 -- More updates to Mooml coming soon (0)
February 1, 2010 -- Mooml.globalize(): Mooml template functions going global (0)

Repulsive force in Javascript with Mootools draggables

Eneko Alonso — Mon, 05 Jan 2009 00:05:24 +0000

A couple of days ago I was reading about the Boids demo made by Ben from Coderholic. I though that was very interesting, specially since I hadn’t heard about boids before.

I wanted to create my own version but instead I decided to play only with the repulsive force, making it interactive using Mootools drag & drop functionality. When the demo loads, 20 elements will be created and they will start moving on their own, trying to keep the minimum distance with any other element. This distance is configurable, as it is the option to keep the element speed or to make them slow down until they stop. At any time, the user can move elements on the screen dragging them with the mouse.

See the demo in action.

Source code

var Item = new Class({
Implements: Options,
options: {
radius: 10,
position: { x: window.clientWidth/2, y: window.clientHeight/|>2 },
speed: { x: 0, y: 0 },
color: '#333'
},
initialize: function(options) {
this.setOptions(options);
this.addToDOM();
var self = this;
this.dragController = new Drag(this.element, {
onStart: function() {
self.dragging = true;
},
onDrag: function() {
self.options.position = self.element.getPosition();
},
onComplete: function() {
self.options.position = self.element.getPosition();
self.speed = {x:0,y:0};
self.dragging = false;
}
});
this.dragging = false;
},
destroy: function() {
this.element.destroy();
delete this;
},
addToDOM: function() {
this.element = new Element('div', { 'class': 'item' });
this.element.setStyles({
background: this.options.color,
height: 2*this.options.radius,
width: 2*this.options.radius,
left: this.options.position.x,
top: this.options.position.y,
'-moz-border-radius': Math.round(this.options.radius) + 'px',
'-webkit-border-radius': Math.round(this.options.radius) + 'px',
'border-radius': Math.round(this.options.radius) + 'px'
}).inject(document.body);
},
moveTo: function(x, y) {
if (this.dragging) return;
this.options.position.x = x;
this.options.position.y = y;
// Check bounds
if (this.options.position.x < 0) {
this.options.position.x = 0;
this.options.speed.x = 0;
}
if (this.options.position.x > window.getWidth() – 2*this.options.radius) {
this.options.position.x = window.getWidth() – 2*this.options.radius;
this.options.speed.x = 0;
}
if (this.options.position.y < $('header').getHeight()) {
this.options.position.y = $('header').getHeight();
this.options.speed.y = 0;
}
if (this.options.position.y > window.getHeight() – 2*this.options.radius) {
this.options.position.y = window.getHeight() – 2*this.options.radius;
this.options.speed.y = 0;
}
// Slow down
if ($('chk-slowdown').get('checked')) {
this.options.speed.x *= 0.7;
this.options.speed.y *= 0.7;
}
if (this.options.speed.x < 0.001) this.options.speed.x = 0;
if (this.options.speed.y < 0.001) this.options.speed.y = 0;
},
draw: function() {
if (this.dragging) return;
this.element.setStyles({
left: Math.round(this.options.position.x),
top: Math.round(this.options.position.y)
});
}
})
var ItemController = new Class({
Extends: Thread,
items: [],
initialize: function(options) {
this.parent(options);
},
addItem: function(options) {
this.items.push(new Item(options));
},
execute: function(){
this.compute();
this.draw();
},
compute: function() {
var self = this;
self.items.each(function(item1, index1) {
self.items.each(function(item2, index2) {
if (index1 != index2) {
var distance = {}
distance.x = (item2.options.position.x + item2.options.radius) -
(item1.options.position.x + item1.options.radius);
distance.y = (item2.options.position.y + item2.options.radius) -
(item1.options.position.y + item1.options.radius);
distance.total = Math.sqrt(Math.pow(distance.x, 2) + Math.pow(distance.y, 2));
if (distance.total < $('distance').get('value')) {
var angle = Math.atan2(distance.y, distance.x);
var speed = 1000 / distance.total;
item1.options.speed.x += -speed * Math.cos(angle);
item1.options.speed.y += -speed * Math.sin(angle);
}
}
});
if (item1.options.speed.x || item1.options.speed.y) {
item1.moveTo(item1.options.position.x + item1.options.speed.x * (self.options.interval/1000),
item1.options.position.y + item1.options.speed.y * (self.options.interval/1000));
}
});
},
draw: function() {
this.items.each(function(item) { item.draw(); });
},
addRandom: function() {
this.addItem({
position: { x: Random.get(100,500), y: Random.get(100,400) },
color: 'rgb('+Random.get(0,255)+','+Random.get(0,255)+','+Random.get(0,255)+')'
});
}
});
window.addEvent('domready', function() {
window.system = new ItemController({autostart: true, interval: 50});
for (var i=0;i<20;i++)
system.addRandom();
$('btnAddRandom').addEvent('click', function(){
system.addRandom();
});
});

The code is very similar to the Gravity demo, although in this case the attraction becomes repulsion.

February 19, 2010 -- Having fun with Mooml & Twitter (0)
May 22, 2010 -- More WebSockets, now with Python! (1)
April 28, 2010 -- Mooml 1.2.3 – Bye, bye, with() (0)
April 14, 2010 -- Getting unique timestamps in Javascript (0)

dev.enekoalonso.com » demo

More WebSockets, now with Python!

Related Posts:

Having fun with Mooml & Twitter

Searching Twitter

The code

Related Posts:

Repulsive force in Javascript with Mootools draggables

Source code

Related Posts: