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.