位置: 编程技术 - 正文
AngularJS+Node.js实现在线聊天室(angular.min.js)
发布时间：2024-02-27推荐整理分享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实例的数组中移除
运行一下服务端代码，观察有无错误：
若没什么问题，继续编写客户端的代码。
客户端
在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 转载请保留说明！
