Websocket Example

by exe1

HTML

<div ng-app="websocketApp" ng-controller="MessagesCtrl">
    <form ng-submit="sendMessage()">
        <input type="text" ng-model="message">
        <button type="submit">Send</button>
    </form>
    <hr>
    <ul>
        <li ng-repeat="m in messages">{{m.message}}</li>
    </ul>
</div>

JavaScript

var app = angular.module('websocketApp',[]);

app.factory('Websocket', function($rootScope) {
    var socket = new WebSocket("ws://192.168.78.130:8081/");
    var messages = [];
    
	socket.onmessage = function(msg) {
        messages.push(JSON.parse(msg.data));
        $rootScope.$broadcast('new_message');
    }
    
    return {
        getMessages: function() {
            return messages;
        },
        sendMessage: function(message) {
            var data = JSON.stringify({message:message})
            socket.send(data);
        }
    }
});

app.controller('MessagesCtrl',function($scope,Websocket) {
    $scope.messages = [{message:'Hello'}];
    $scope.$on('new_message',function() {
        $scope.$apply(function() {
            $scope.messages = Websocket.getMessages();
        });
    });
    
    $scope.sendMessage = function() {
        Websocket.sendMessage($scope.message);
        $scope.message = '';
    };
});