A super-simple chat app with AngularJS, SockJS and node.js
We're planning to move to a more advanced JavaScript library at PythonAnywhere. jQuery has been good for us, but we're rapidly reaching a stage where it's just not enough.
There are a whole bunch of JavaScript MVC frameworks out there that look tempting -- see TodoMVC for an implementation of a simple app in a bunch of them. We're asking the people we know and trust which ones are best, but in the meantime I had a look at AngularJS and knocked up a quick chat app to see how easy it would be. The answer was "very".
Here's the client-side code:
<html ng-app>
<head>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script>
var sock = new SockJS('http://192.168.0.74:9999/chat');
function ChatCtrl($scope) {
$scope.messages = [];
$scope.sendMessage = function() {
sock.send($scope.messageText);
$scope.messageText = "";
};
sock.onmessage = function(e) {
$scope.messages.push(e.data);
$scope.$apply();
};
}
</script>
</head>
<body>
<div ng-controller="ChatCtrl">
<ul>
<li ng-repeat="message in messages">{{message}}</li>
</ul>
<form ng-submit="sendMessage()">
<input type="text" ng-model="messageText" placeholder="Type your message here" />
<input type="submit" value="Send" />
</form
</div>
</body>
</html>
Then on the server side I wrote this server (in node.js because
I've moved to Shoreditch and have ironic facial hair it was easy to copy,
paste and hack from the SockJS docs -- I'd use Tornado if this was on
PythonAnywhere):
var http = require('http');
var sockjs = require('sockjs');
var connections = [];
var chat = sockjs.createServer();
chat.on('connection', function(conn) {
connections.push(conn);
var number = connections.length;
conn.write("Welcome, User " + number);
conn.on('data', function(message) {
for (var ii=0; ii < connections.length; ii++) {
connections[ii].write("User " + number + " says: " + message);
}
});
conn.on('close', function() {
for (var ii=0; ii < connections.length; ii++) {
connections[ii].write("User " + number + " has disconnected");
}
});
});
var server = http.createServer();
chat.installHandlers(server, {prefix:'/chat'});
server.listen(9999, '0.0.0.0');
And that's it! It basically does everything you need from a simple chat app. Definitely quite impressed with AngularJS. I'll try it in some of the other frameworks we evaluate and post more here.
Some old JavaScript
I was digging around in my archives and discovered some old JavaScript demos I wrote back in 1999 -- long enough ago that I thought of them as "DHTML pages". It turns out that they only needed a few minor tweaks to make them work on modern browsers; the bulk of that was removing the browser-sniffing code, and then in each case where I was deciding what to do based on whether the browser was Netscape 4 or Internet Explorer 4 (!), deleting one or the other case. Looks like it was about 50/50 as to which browser won.
Anyway, without much further ado, I bring you the holding page for my old personal/political blog, before it went live (and you can really see how this would have pulled the readers in), and a page in the style of 1980s/early 90s Amiga demos. The latter is particularly worthy of note because when I originally posted it, I made sure it only appeared in 640x480 windows -- because anything larger would make even fast machines grind to a halt, all those years ago back in 1999. The tagline really made sense, back then.
Excuse me, I just need to go into a corner and feel old...
[UPDATE] I kept track of the changes required to convert 1999-vintage DHTML to modern JavaScript in a Git repo, if anyone's interested in doing a similar conversion then let me know in the comments and I'll put together something.
Fun with the Audio Data API
The latest beta version of Firefox 4 has an API for reading and writing audio data -- right down to the sample level, right from JavaScript. JavaScript is, of course, totally the wrong language to write DSP-style code in, so that's what I decided to do :-)
If you fancy downloading FF4 beta and trying out some of the demos, here they are. There are lots of (much better) demos by other people here.
And if you try out the musical temperament example and have any thoughts on which chords sounded nicest, leave a comment below!
(Update: the Mozilla Audio API no longer works, as far as I can tell -- a different Web Audio API wound up becoming the standard -- maybe I'll port the examples over to that!)
A bit of fun
This week's unofficial meme on the Unofficial Planet Python seems to be to name the programming languages you've learned. Here's Eric Florenzano's list (hat tip) -- it looks like the meme was started by Corey Goldberg -- and here's my list:
- BASIC (an odd ICL dialect, then Spectrum, Commodore, Amstrad, BBC, and QuickBasic)
- Z80 Assembler
- Pascal
- C
- Hypertalk (remember that?
Answer 'Are you sure?' with 'Yes' or 'No'. If it is 'Yes' then...) - Logo
- Prolog
- LISP
- C++
- ML
- Modula-3
- Neil (proprietary, probably still in use at IST)
- Java
- JavaScript
- C#
- Python
Hmm. It looks like I've slowed down. Time to pick up that Erlang tutorial again...