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做个聊天应用(三)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...
- 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的环境, 采坑无数,特 ...
- Angular JS + Express JS入门搭建网站
3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...
- socket.io+angular.js+express.js做个聊天应用(二)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27585321 接着上一篇 我用的开发工具 ...
- 【socket.io研究】3.手机网页间聊天核心问题
前面我们已经说了服务器相关的一些内容,且又根据官网给出的一个例子写了一个可以聊天的小程序,但是这还远远不够呀,这只能算是应用前的准备工作.接下来,一起来考虑完善一个小的聊天程序吧. 首先,修改服务器的 ...
- Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室
前言 下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址.项目采用前后端模式,前端使用 Vite + Vue3 + TS:后端使用 Knex + Ex ...
- socket.io+angular.js+express.js做个聊天应用(一)
node,express开发环境等安装如果已经搞好了. justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs$ express -e c ...
- 基于 Sequelize.js + Express.js 开发一套 Web 后端服务器
什么是 Sequelize 我们知道 Web 应用开发中的 Web 后端开发一般都是 Java.Python.ASP.NET 等语言.十年前,Node.js 的出现使得原本仅限于运行在浏览器中的 Ja ...
- 使用Node.js+Socket.IO搭建WebSocket实时应用
Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...
随机推荐
- poj 2728 Desert King(最小比率生成树，迭代法)
引用别人的解释: 题意:有n个村庄,村庄在不同坐标和海拔,现在要对所有村庄供水,只要两个村庄之间有一条路即可, 建造水管距离为坐标之间的欧几里德距离(好象是叫欧几里德距离吧),费用为海拔之差 现在要求 ...
- MVC4入门指南
本系列共10篇文章,翻译自Asp.Net MVC4 官方教程,由于本系列文章言简意赅,篇幅适中,从一个示例开始讲解,全文最终完成了一个管理影片的小系统,非常适合新手入门Asp.Net MVC4,并由此 ...
- 系统变量写在.bash_profile和.bashrc的区别
今天配置一个代理,正儿八经的把我搞蒙了,不就是export http_porxy=xxx.xxx.xxx.xxx:xxxx 然后重启服务service network restart ,依然连接不了外 ...
- Android应用开发提高篇（3）-----传感器（Sensor）编程
链接地址:http://www.cnblogs.com/lknlfy/archive/2012/02/29/2373420.html 一.概述 Android支持的传感器种类越来越多了,这确实是一件可 ...
- C语言的指针变量
C语言的指针变量 在C语言中,变量是固定范围的存储空间,它存储的是赋给他的值, 比如: ; /* 这里是定义一个整型变量a,并把12这个值存储在a的地址空间上 这个地址空间是系统随机分配的,对用户是透 ...
- nginx+uwsgi部署python web(web.py)
1.nginx: nginx 是一个 http 服务器,与 apache.lighttpd.Microsoft IIS 等属于同类产品. 2.uWSGI: uWSGI 是一个快速的.纯C语言开发的.自 ...
- 关于jq操作table下多个type=radio的input的选中
假如有2个table: <table id="table1" border="0"> <tr> <td><input ...
- YII框架下实现密码修改
YII2 实现修改密码功能 主要难点: 1.密码加密 YII2对密码加密生成的结果是不同的,即用相同的初始密码在不同时间得到的加密结果不同,所以我们不能用常用的方法去验证密码是否正确(将密码加密后与数 ...
- PHP学习笔记12-上传文件
上传图片文件并在页面上显示出图片 enctype介绍:enctype属性指定将数据发回到服务器时浏览器使用的编码类型. 取值说明: multipart/form-data: 窗体数据被编码为一条消息, ...
- python初探-collections容器数据类型
collections容器数据类型是对基本数据类型的补充,简单介绍下计数器.有序字典.默认字典.可命名元祖.队列. 计数器(Counter) Counter是对字典类型的补充,用于追踪值得出现次数 c ...