不得不说，上手AngularJS比我想象得难多了，把官网提供的PhoneCat例子看完，又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍，对于基本的使用依然有很多说不清道不明的疑惑，于是决定通过做一个在线聊天室帮助理解。DEMO可以戳→chat room，代码可以戳→ChatRoom-AngularJS。
清晰图可以戳 /UpFiles/2017/5/30/201508281040051.gif
功能
着手开发之前，首先明确一下需要实现的功能：
新用户登入，广播通知其他用户
用户下线，广播通知其他用户
可显示在线人数及列表
可群聊，可私信
用户若发送群消息，广播通知其他所有用户
用户若发送私信，单独通知收方界面
因为自己是个审美渣，所以全靠bootstrap了，另外还模仿了下微信聊天记录里的气泡设计。
界面分左右两个板块，分别用于显示在线列表和聊天内容。
在左侧的在线列表中，点击不同项可以切换右侧板块的聊天对象。
右侧显示与当前聊天对象的对话记录，不过仅显示最近的30条。每一条聊天记录内容包括发送人的昵称及头像、发送时间、消息内容。关于头像，这里做简单处理，用填充了随机色的方块代替。另外，自己发出去的消息与收到的消息样式自然要做不同设计，所有效果可以看下图。
清晰图可以戳 /UpFiles/2017/5/30/201508281040052.png
服务端
服务端我们用Node.js以及混入express、socket.io来开发，在程序根目录打开终端，执行：
根据提示，生成一个package.json文件。打开并配置依赖项：
"dependencies": {
"express": "^4.13.3",
"socket.io": "^1.3.6"
}
</div>
之后执行 npm install 安装依赖模块。
接下来，我们在根目录下新建app.js，在其中写Server端代码。再新建public文件夹，存放client端代码。
app.js中主要内容如下：
var express = require('express');
var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
app.use(express.static(__dirname + '/public'));
app.get('/', function (req, res) {
res.sendfile('index.html');
});
io.on('connection',function(socket){
socket.on('addUser',function(data){ //有新用户进入聊天室
});
socket.on('addMessage',function(data){ //有用户发送新消息
});
socket.on('disconnect', function () { //有用户退出聊天室
);
});
http.listen(3002, function () {
console.log('listening on *:3002');
});
</div>
在上面的代码中，我们为以下事件添加了监听：
-addUser，有新用户进入聊天室
该事件由客户端输入昵称后触发，服务端收到后对昵称是否已存在进行判断，如果已存在，通知客户端昵称无效：
反之，通知客户端昵称有效以及当前所有已连接的用户信息，并把新用户信息广播给其他已连接用户：
socket.emit('userAddingResult',{result:true});
allUsers.push(data);//allUsers保存了所有用户
socket.emit('allUser',allUsers);//将所有在线用户发给新用户
socket.broadcast.emit('userAdded',data);//广播欢迎新用户,除新用户外都可看到
</div>
其中需要注意'socket.emit'与'socket.broadcast.emit'的区别，可以查看这篇博文socket.io emit的几种用法解释：
// send to current request socket client
socket.emit('message', "this is a test");
// sending to all clients except sender
socket.broadcast.emit('message', "this is a test");
</div>
-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文件，先把这些文件用标签引入。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="./assets/style/app.css"/> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="//cdn.bootcss.com/angular.js/1.4.3/angular.min.js"></script> <script src="./assets/js/app.js"></script> </head> <body></body> </html></div>
我们并不立即深入逻辑细节，把框架搭好先。
首先，在body上加上ng-app属性，标记一下angularjs的“管辖范围”。