位置: 编程技术 - 正文

AngularJS+Node.js实现在线聊天室(angular.min.js)

编辑:rootadmin

推荐整理分享AngularJS+Node.js实现在线聊天室(angular.min.js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:angular node,angularjs web application development cookbook,nodejs angularjs,angular nodejs,angularjs1.5,angularjs2,angularjs1.5,angular node,内容如对您有帮助,希望把文章链接给更多的朋友!

不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍,对于基本的使用依然有很多说不清道不明的疑惑,于是决定通过做一个在线聊天室帮助理解。DEMO可以戳→chat room,代码可以戳→ChatRoom-AngularJS。

清晰图可以戳 npm install 安装依赖模块。

接下来,我们在根目录下新建app.js,在其中写Server端代码。再新建public文件夹,存放client端代码。

app.js中主要内容如下:

在上面的代码中,我们为以下事件添加了监听:

-addUser,有新用户进入聊天室

该事件由客户端输入昵称后触发,服务端收到后对昵称是否已存在进行判断,如果已存在,通知客户端昵称无效:

反之,通知客户端昵称有效以及当前所有已连接的用户信息,并把新用户信息广播给其他已连接用户:

其中需要注意'socket.emit'与'socket.broadcast.emit'的区别,可以查看这篇博文socket.io emit的几种用法解释:

-addMessage,有用户发送新消息

在此事件监听里,需要分成两类情况处理:

1.私信如果消息是发给特定用户A,那么就需要获取A对应的socket实例,然后调用其emit方法。所以每当一个客户端连接到Server端时,我们得把其socket实例保存起来,以备后续之需。

需要发私信时,取出socket实例做操作即可:

2.群发群发就比较简单了,用broadcast方法即可:

-disconnect,有用户退出聊天室需要做三件事情:

1.通知其他用户“某用户下线”

2.将用户从保存了所有用户的数组中移除

3.将其socket实例从保存了所有客户端socket实例的数组中移除

运行一下服务端代码,观察有无错误:

若没什么问题,继续编写客户端的代码。

客户端

AngularJS+Node.js实现在线聊天室(angular.min.js)

在public目录下新建'index.html',客户端需要用到bootstrap、angularjs、socket.io、jQuery以及我们自己的js和css文件,先把这些文件用标签引入。

我们并不立即深入逻辑细节,把框架搭好先。首先,在body上加上ng-app属性,标记一下angularjs的“管辖范围”。这个练习中我们只用到了一个控制器,同样将ng-controller属性加到body标签。

接下来在js中,我们来创建module及controller。

注意这里,我们用内联注入添加了socket和randomColor服务依赖。这里我们不用推断式注入,以防部署的时候用uglify或其他工具进行了混淆,变量经过了重命名导致注入失效。在这个练习中,我们自定义了两个服务,socket和randomColor,前者是对socket.io的包装,让其事件进入angular context,后者是个可以生成随机色的服务,用来给头像指定颜色。

注意socket服务中连接的语句“var socket = io();”,我们并没有传入任何url,是因为其默认连接部署这个网站的服务器。

考虑到聊天记录以及在线人员列表都是一个个逻辑及结构重复的条目,且html结构较复杂,为了其复用性,我们把它们封装成两个指令:

注意这里两个指令都注入了'$timeout'依赖,其作用后文会解释。

这样一个外层框架就搭好了,现在我们来完成内部的细节。

登录

页面刚加载时只显示登录界面,只有当输入昵称提交后且收到服务端通知昵称有效方可跳转到聊天室。我们将ng-show指令添加到登录界面和聊天室各自的dom节点上,来帮助我们显示或隐藏元素。用'hasLogined'的值控制是显示或隐藏。

JS部分

这里监听了socket连接上的'userAddingResult'事件,接收服务端的通知,确认是否登录成功。

socket连接监听

成功登录以后,我们还监听socket连接上的其他事件:

接收到事件以后,做相应的刷新动作,这里的socket是socket.io经过包装的服务,内部仅包装了我们需要用到的两个函数on和emit。我们在事件监听里对model做的修改,都会在AngularJS内部得到通知和处理,UI才会得到及时刷新。监听内做的事情太具体和琐碎了,这里就不列出了,接下来介绍一下message指令。

message 指令

最后分享一下我在写message指令时遇到的问题。首先看一下其代码:

以及其模板message.html:

模板中我们用ng-switch指令监听info.type变量的值,根据其值的不同显示不同内容。比如,当info.type值为"welcome"时,创建第一个dom节点,删除下方另外两个div。另外,普通消息下,为了在UI上区分自己发出去的和收到的消息,需要给他们应用不同的样式,这里用ng-class指令实现。

当'self===info.from'返回true时,应用'self'类,否则,应用'others'类。在此指令中,我们创建了独立作用域,并绑定了三个属性,绑定完后还必须在父作用域的HTML标签上添加相应属性。

在link函数中,执行一个动作:每当一个message被加到页面上时,将聊天记录滚动到最下方,一开始我是这样写的:

结果发生了一个很奇怪的现象,总是滚动到上一条位置,而不是最新这条。调试之后发现是因为'scrolltothis'函数执行的时候,DOM还没渲染,所以在函数内部获取scrollHeight的时候获得的总是添加DOM节点之前的状态。这时候,可以把代码放到$timeout里延迟0秒执行,延迟0秒并不意味着会立即执行,因为js的单线程特性,代码实际会等到dom渲染完再执行。

完整代码可以戳我的GitHub→ChatRoom-AngularJS,DEMO可以戳→chat room

有任何不妥之处或错误欢迎各位指出,不胜感激~

异步JavaScript编程中的Promise使用方法 异步?我在很多地方都看到过异步(Asynchronous)这个词,但在我还不是很理解这个概念的时候,却发现自己常常会被当做已经很清楚(* ̄ ̄)。如果你也有类

举例讲解Node.js中的Writable对象 只要有玩过nodejs,那就一定接触过Writable。http模块的请求回调参数中的res参数就是一个Writable对象。我们经常会往上面write一堆东西,最后调用个end方法

node.js操作mysql(增删改查) 最近这段时间研究Node感觉不错,自己做了一个增删改查,虽然有些简陋,但是思想是想通的,其实所有项目都是增删改查,有助于初学者快速掌握Node首

标签: angular.min.js

本文链接地址:https://www.jiuchutong.com/biancheng/379484.html 转载请保留说明!

上一篇:node文字生成图片的示例代码(node.js 生成pdf)

下一篇:异步JavaScript编程中的Promise使用方法(javascript异步编程)

  • 资金账簿印花税怎么算
  • 企业银行贷款报表要求
  • 预缴增值税附加税费申报明细表
  • 土地摊销全部计入成本吗
  • 前期费用包括哪些,占总投资的比例
  • 机械设备买回来怎么消毒
  • 季末资产总额的计算
  • 跨地区经营企业代码表从哪里找
  • 发票冲红需要什么手续
  • 稽查补缴增值税做账
  • 短期筹资方式有没有股票
  • 交易性金融资产的入账价值
  • 多计提的工资怎么处理?
  • 收客户逾期利息账务处理怎么做?
  • 旧设备变现损失抵减所得税怎么算
  • 没有对公账户的公司怎么注销
  • 高速公路通行费怎么计算的
  • 个人从上市公司取得的分红个税怎么申报
  • 收回债权会计分录
  • 个人独资企业股权能出让吗
  • 定额发票存根联丢失如何处罚
  • 专家费收取多少合适
  • 进口货物内销的增值税处理
  • 没有走公户的发票费用怎么做账
  • 发票金额大于开票金额
  • 国际重复征税的解决方法公式
  • 关于临时工工资标准的规定
  • 应交增值税的会计科目
  • 贷款计入哪个会计科目
  • 什么是CMOS什么是BIOS
  • 动态路由协议rip配置实验心得
  • win11 pin失效
  • 存放同业属于什么业务
  • timit数据集
  • 子公司财务管理策略有哪些
  • 企业进项税大于销项税财务怎么做分录
  • phpcrawl
  • 做了几年前端基础还是很差
  • 第十届蓝桥杯大赛个人赛省赛结果
  • php支付宝现实支付要收费吗
  • 国际货运代理公司有哪些?
  • 大小周是否违反劳动法
  • c+c#
  • 企业年金管理费专票能抵扣吗
  • 非本公司员工能上班吗
  • 职工薪酬在利润表哪里看
  • 承兑汇票兑现与贴现的区别
  • 装修的工程款账务处理
  • 入伙和退伙的法律效力
  • 一般纳税人怎么开3个点普票
  • 非广告性质的赞助支出
  • 收回投资收到的现金占比大说明
  • 捐赠支出的账务处理
  • 以前年度损益调整借贷方向
  • 每月增值税怎么做账
  • 本月取得的发票入账后次月对方能红冲吗
  • 进出口总额用什么字母表示
  • 工会经费按照什么计算缴纳
  • sql数据分类
  • mysql 5.7.11 winx64.zip安装配置方法图文教程
  • 我用u盘装系统
  • ubuntu命令行中文乱码怎么解决
  • 苹果mac 最新系统
  • win7系统打开服务
  • win8.1技巧
  • rmxp4droid for 天敏电视盒子
  • cocos2dx游戏开发教程
  • 安卓网页开发工具
  • 搭建gitbook
  • python中列表删除
  • 用nodejs做的项目
  • python functools.wraps
  • three.js碰撞检测
  • javascript基础教程教材答案
  • 每天一篇文章锻炼口才的文章
  • javascript中window对象的子对象不包含
  • js 原型方法
  • android adt
  • 江苏电子税务局官网登录入口
  • 零申报印花税的应税凭证名称怎么填写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设