A super-simple chat app with AngularJS, SockJS and node.js

0 points

We’re planning to transport to a greater superior JavaScript library at PythonAnywhere. jQuery has been properly for us, but we’re swiftly attaining a degree where it’s simply no longer sufficient.

There are a whole bunch of JavaScript MVC frameworks available that appearance tempting — see TodoMVC for an implementation of a simple app in a gaggle of them. We’re asking the human beings we know and accept as true with which of them are pleasant, however inside the interim I had a examine AngularJS and knocked up a short chat app to peer how clean it would be. the solution turned into “very”.

Here’s the client-facet 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 at the server side I wrote this server (in node.js because I’ve moved to Shoreditch and feature ironic facial hair it changed into easy to copy, paste and hack from the SockJS medical doctors — I’d use twister if this become 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 essentially does the whole lot you need from a simple chat app. without a doubt pretty inspired with AngularJS. i’ll strive it in some of the alternative frameworks we examine and publish greater right here.

Submit reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Login

Sign in to alux.com or create an account

Lost password?

Signup

If you already have an account, please sign in

Forgot Password

Please enter your username or e-mail address to recover your password.

Hey there!

In order to submit a post to Alux.com you must be logged in.

Already have an account? Click here to sign in