【AngularJS/socket.io】を用いてウェブソケットアプリを構築する際。

ioのコネクションインスタンスをdiで注入してやらないと正常に動作しないので注意。

下記のようなファクトリーを定義してやればOK。

coreApp.factory('coreSocket', function($rootScope) {
    var socket = io.connect();
    return {
        on: function(eventName, callback) {
            socket.on(eventName, function() {
                var args = arguments;
                $rootScope.$apply(function() {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function(eventName, data, callback) {
            socket.emit(eventName, data, function() {
                var args = arguments;
                $rootScope.$apply(function() {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            });
        }
    };
});
1

これを適宜コントローラーに注入してやればOK。

コントローラーはかきのような感じ。(適当に書いたやつまんまコピペ

1
coreCtrls.controller('indexCtrl', function($scope, coreSocket, $timeout) {
    
    var chatContainer = angular.element('.messages-container');
    $scope.chatStage = '';
    
    $scope.remark = function($event) {
        if ($event.type == 'keypress' && $event.which != 13) {
            return false;
        }
        coreSocket.emit('chatPosted', $scope.message);
        $scope.message = null;
    }
    
    coreSocket.on('chatPosted', function(msg) {
        $scope.chatStage += msg + '\n';
        $timeout(function() {
            chatContainer.scrollTop(chatContainer[0].scrollHeight);
        });
    });
    
    coreSocket.on('disconnect', function() {
        coreSocket.disconnect();
    });
    
});

サーバーサイドはこんな感じ。

io.on('connection', function(socket) {
    
    console.log('a user connected');
    
    socket.on('disconnect', function() {
        
        console.log('user disconnected');
    });
    
    socket.on('chatPosted', function(msg) {
        console.log(msg);
        io.emit('chatPosted', msg);
    });
    
});

ログインユーザーとかルームとかの概念はまだまだ調査ガ必要だなぁ。