dev.enekoalonso.com » test

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 (4)
May 6, 2010 -- Tech talks at LEVEL Studios (0)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
May 18, 2011 -- location.hash is dead (on html5 browsers) (0)

Tech talks at LEVEL Studios

Eneko Alonso — Thu, 06 May 2010 15:51:16 +0000

Today we have a Tech Meeting at LEVEL Studios and I’ll be doing a quick demo of some tools we have been using in our current project, to help during our development:

Using Closure Compiler to detect Javascript syntax errors and remove warnings.
Using QUnit to test a REST api
The power of WebSockets and how the way browsers and servers interact with each other will change in the future.

May 22, 2010 -- More WebSockets, now with Python! (9)
March 15, 2010 -- More updates to Mooml coming soon (0)
January 28, 2010 -- Things to do (0)
March 14, 2011 -- Staying busy (0)

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() (3)
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)

dev.enekoalonso.com » test

More WebSockets, now with Python!

Related Posts:

Tech talks at LEVEL Studios

Related Posts:

Having fun with Mooml & Twitter

Searching Twitter

The code

Related Posts: