socket.io+angular.js+express.js做个聊天应用(四)

来源：互联网发布：python编辑器 sub 编辑：程序博客网时间：2024/06/08 05:31

接着上一篇

使用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

0 0