In my previous article I described how to plug WebSockets into AMQP using Tornado and pika. As a follow-up, I’ll show you how this can be used to write the simplest chat client.
First we create a web handler for Tornado that will return a web page containing the Javascript code that will connect and converse with our WebSockets endpoint following the WebSockets API.
class MainHandler(tornado.web.RequestHandler): def get(self): username = "User%d" % random.randint(0, 100) self.write("""<html> <head> <script type='application/javascript' src='/static/jquery-1.4.2.min.js'> </script> <script type='application/javascript'> $(document).ready(function() { var ws = new WebSocket('ws://localdomain.dom:8888/ws'); ws.onmessage = function (evt) { $('#chat').val($('#chat').val() + evt.data + '\\n'); }; $('#chatform').submit(function() { ws.send('%(username)s: ' + $('#message').val()); $('#message').val(""); return false; }); }); </script> </head> <body> <form action='/ws' id='chatform' method='post'> <textarea id='chat' cols='35' rows='10'></textarea> <br /> <label for='message'>%(username)s: </label><input type='text' id='message' /> <input type='submit' value='Send' /> </form> </body> </html> """ % {'username': username}) |
Every time, the user enters a message and submits it too our WebSockets endpoint which, in return, will forward any messages back to the client. These will be appended to the textarea.
Internally, each client gets notified of any message through AMQP and the bus. Indeed the WebSockets handler are subscribed to a channel that will be notified every time the AMQP server pushes data to the consumer. A side effect of this is that the Javascript code above doesn’t update the textarea when it sends the message the user has entered, but when the server sends it back.
Let’s see how we had to change the Tornado application to support that handler as well as the serving of jQuery as a static resource (you need the jQuery toolkit in the same directory as the Python module).
if __name__ == '__main__': application = tornado.web.Application([ (r"/", MainHandler), (r"/ws", WebSocket2AMQP), ], static_path=".", bus=bus) http_server = tornado.httpserver.HTTPServer(application) http_server.listen(8888) bus.subscribe("main", poll) WS2AMQPPlugin(bus).subscribe() bus.start() bus.block() |
The code is here.
Once the server is running, open two browser windows and access http://localhost:8888/. You should be able to type messages in one and see them appears in both windows.
Note:
This has been tested against the latest Chrome release. You will need to either set the “localdomain.dom” or provide the IP address of your network interface in the Javascript above since Chrome doesn’t allow for localhost nor 127.0.0.1.