接着上一篇

使用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')
})

一个简陋的聊天室完毕。

项目源代码地址:https://github.com/edagarli/chattingnode

socket.io+angular.js+express.js做个聊天应用(四)的更多相关文章

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

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...

  2. soket.io.js + angular.js + express.js(node.js)

    soket.io.js + angular.js + express.js(node.js) 今天搭建个soket.io.js + angular.js + express.js的环境, 采坑无数,特 ...

  3. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

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

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27585321 接着上一篇 我用的开发工具 ...

  5. 【socket.io研究】3.手机网页间聊天核心问题

    前面我们已经说了服务器相关的一些内容,且又根据官网给出的一个例子写了一个可以聊天的小程序,但是这还远远不够呀,这只能算是应用前的准备工作.接下来,一起来考虑完善一个小的聊天程序吧. 首先,修改服务器的 ...

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

    node,express开发环境等安装如果已经搞好了. justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs$ express -e c ...

  7. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  8. (转)使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  9. 转载:node.js socket.io

    本文转自:http://www.xiaocai.name/post/cf1f9_7b6507  学习node.js socket.io 使用 用node.js(socket.io)实现数据实时推送 在 ...

随机推荐

  1. 【JAVA并发编程实战】12、使用condition实现多线程下的有界缓存先进先出队列

    package cn.study.concurrency.ch14; import java.util.concurrent.locks.Condition; import java.util.con ...

  2. 之一:CABasicAnimation - 基本动画

    嗷呜嗷呜嗷呜 // 将视图作为属性方便后面执行多个不同动画 _myView = [[UIView alloc] init]; _myView.layer.position = CGPointMake( ...

  3. HDU4714+三分

    题意:给定N个点,每个点有初始位置和初始速度. 问:在哪个时刻 使得所有的点的最大距离值最小. 分析:一开始枚举两两之间的最大值,然后在最大值中求一个最小值...(WA:题意严重理解不清..) 由两点 ...

  4. 武汉科技大学ACM :1003: A+B for Input-Output Practice (III)

    Problem Description Your task is to Calculate a + b. Input Input contains multiple test cases. Each ...

  5. 专访OPPO李紫贵:ColorOS用户过千万 软硬融合生态版图初现

    专访OPPO李紫贵:ColorOS用户过千万 软硬融合生态版图初现 专访OPPO李紫贵:ColorOS用户过千万 软硬融合生态版图初现

  6. struts OGNL数据标签

    OGNL对象图导航语言,类似于el表达式,strut的底层就是用这个写的在导入struts-core的时候会导入ognl.jar public class Test { public static v ...

  7. linux 单网卡绑定两个ip

    一.ubuntu系统: #vi /etc/network/interfaces  OR  $ sudo vi /etc/network/interfaces Modify as follows: au ...

  8. linux下curl的地址使用双引号引用的原因

    只知道这么使用,加上双引号,原因不太清楚 原因在于加上双引号可以防止转义,在linux中使用&会使进程后台运行,必须对&进行转义,加反斜杠的方式比较麻烦,故使用双引号模式最方便.

  9. 基于 PHP 的数据爬取(QueryList)

    基于PHP的数据爬取 官方网站站点 简单. 灵活.强大的PHP采集工具,让采集更简单一点. 简介: QueryList使用jQuery选择器来做采集,让你告别复杂的正则表达式:QueryList具有j ...

  10. HTML(四)Form标签

    <form>…</form>    定义供用户输入的 HTML 表单 例子 <html> <body> <form method="ge ...