socket.io+angular.js+express.js做個聊天應用(四)

edagarli發表於2014-06-02
AngularJSExpress

接著上一篇

使用angularjs構建聊天室的客戶端


<!doctype html>
<html ng-app="justChatting">
<head>
    <meta charset="UTF-8">
    <title>justChatting</title>
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/stylesheets/room.css">
    <script type="text/javascript" src="/socket.io/socket.js"></script>
    <script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/bower_components/angular/angular.js"></script>
</head>
<body>
<script type="text/javascript">
   var socket=io.connect('/');
    socket.on('connected',function(){
        alert('connected to justChatting!');
    });

</script>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">justChatting</a>
        </div>
    </div>
</div>
<div class="container" style="margin-top:100px;">
    <div class="col-md-12">
        <div class="panel panel-default room" ng-controller="RoomCtrl">
            <div class="panel-heading room-header">justChatting</div>
            <div class="panel-body room-content">
                <div class="list-group messages" auto-scroll-to-bottom>
                    <div class="list-group-item message" ng-repeat="message in messages">
                        某某: {{message}}
                    </div>
                </div>
                <form class="message-creator" ng-controller="MessageCreatorCtrl">
                    <div class="form-group">
                        <textarea required class="form-control message-input" ng-model="newMessage" ctrl-enter-break-line="createMessage()" placeholder="Ctrl+Enter to quick send"></textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="javascripts/node.js"></script>
</body>
</html>


修改node.js

angular.module('justChatting', [])

angular.module('justChatting').factory('socket', 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)
                    }
                })
            })
        }
    }
})

angular.module('justChatting').directive('ctrlEnterBreakLine', function() {
    return function(scope, element, attrs) {
        var ctrlDown = false
        element.bind("keydown", function(evt) {
            if (evt.which === 17) {
                ctrlDown = true
                setTimeout(function() {
                    ctrlDown = false
                }, 1000)
            }
            if (evt.which === 13) {
                if (ctrlDown) {
                    element.val(element.val() + '\n')
                } else {
                    scope.$apply(function() {
                        scope.$eval(attrs.ctrlEnterBreakLine);
                    });
                    evt.preventDefault()
                }
            }
        });
    };
});

angular.module('justChatting').controller('MessageCreatorCtrl', function($scope, socket) {
    $scope.createMessage = function () {
        socket.emit('messages.create', $scope.newMessage)
        $scope.newMessage = ''
    }
})

angular.module('justChatting').directive('autoScrollToBottom', function() {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(
                function() {
                    return element.children().length;
                },
                function() {
                    element.animate({
                        scrollTop: element.prop('scrollHeight')
                    }, 1000);
                }
            );
        }
    };
});

angular.module('justChatting').controller('RoomCtrl', function($scope, socket) {
    $scope.messages = []
    socket.on('messages.read', function (messages) {
        $scope.messages = messages
    })
    socket.on('messages.add', function (message) {
        $scope.messages.push(message)
    })
    socket.emit('messages.read')
})


一個簡陋的聊天室完成。


專案原始碼地址：https://github.com/edagarli/chattingnode

相關文章