socket.io+angular.js+express.js做个聊天应用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了socket.io+angular.js+express.js做个聊天应用相关的知识，希望对你有一定的参考价值。
接着上一篇
使用angularjs构建聊天室的client
<!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')
})一个简陋的聊天室完毕。
以上是关于socket.io+angular.js+express.js做个聊天应用的主要内容，如果未能解决你的问题，请参考以下文章
socket.io+angular.js+express.js做个聊天应用
如何使用 Angular 和 Jasmine 模拟 socket.io