AngularJS+Node.js实现在线聊天室

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

清晰图可以戳 http://files.phpstudy.net/file_images/article/201508/201508281040051.gif

功能

着手开发之前，首先明确一下需要实现的功能：

新用户登入，广播通知其他用户
用户下线，广播通知其他用户
可显示在线人数及列表
可群聊，可私信
用户若发送群消息，广播通知其他所有用户
用户若发送私信，单独通知收方界面

因为自己是个审美渣，所以全靠bootstrap了，另外还模仿了下微信聊天记录里的气泡设计。

界面分左右两个板块，分别用于显示在线列表和聊天内容。

在左侧的在线列表中，点击不同项可以切换右侧板块的聊天对象。

右侧显示与当前聊天对象的对话记录，不过仅显示最近的30条。每一条聊天记录内容包括发送人的昵称及头像、发送时间、消息内容。关于头像，这里做简单处理，用填充了随机色的方块代替。另外，自己发出去的消息与收到的消息样式自然要做不同设计，所有效果可以看下图。

清晰图可以戳 http://files.phpstudy.net/file_images/article/201508/201508281040052.png

服务端

服务端我们用Node.js以及混入express、socket.io来开发，在程序根目录打开终端，执行：

// 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");