所有文章搬運自我的個人主頁：sheilasun.me
不得不說，上手AngularJS比我想象得難多了，把官網提供的PhoneCat例子看完，又跑到慕課網把大漠窮秋的 AngularJS實戰系列看了一遍，對於基本的使用依然有很多說不清道不明的疑惑，於是決定通過做一個在線聊天室幫助理解。DEMO可以戳→chat room，代碼可以戳→ChatRoom-AngularJS。
清晰圖可以戳 http://sheilasun.sinaapp.com/public/images/chatroom.gif
功能
着手開發之前，首先明確一下需要實現的功能：
- 新用戶登入，廣播通知其他用戶
- 用戶下線，廣播通知其他用戶
- 可顯示在線人數及列表
- 可群聊，可私信
- 用戶若發送群消息，廣播通知其他所有用戶
- 用戶若發送私信，單獨通知收方
界面
因為自己是個審美渣，所以全靠bootstrap了，另外還模仿了下微信聊天記錄里的氣泡設計。
界面分左右兩個板塊，分別用於顯示在線列表和聊天內容。
在左側的在線列表中，點擊不同項可以切換右側板塊的聊天對象。
右側顯示與當前聊天對象的對話記錄，不過僅顯示最近的30條。每一條聊天記錄內容包括發送人的昵稱及頭像、發送時間、消息內容。關於頭像，這里做簡單處理，用填充了隨機色的方塊代替。另外，自己發出去的消息與收到的消息樣式自然要做不同設計，所有效果可以看下圖。
清晰圖可以戳 http://sheilasun.sinaapp.com/public/images/chatroomsc.png
服務端
服務端我們用Node.js以及混入express、socket.io來開發，在程序根目錄打開終端，執行：
npm init
根據提示，生成一個package.json文件。打開並配置依賴項：
"dependencies": {
"express": "^4.13.3",
"socket.io": "^1.3.6"
}
之后執行 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');
});
在上面的代碼中，我們為以下事件添加了監聽：
-addUser，有新用戶進入聊天室
該事件由客戶端輸入昵稱后觸發，服務端收到后對昵稱是否已存在進行判斷，如果已存在，通知客戶端昵稱無效：
socket.emit('userAddingResult',{result:false});
反之，通知客戶端昵稱有效以及當前所有已連接的用戶信息，並把新用戶信息廣播給其他已連接用戶：
socket.emit('userAddingResult',{result:true});
allUsers.push(data);//allUsers保存了所有用戶
socket.emit('allUser',allUsers);//將所有在線用戶發給新用戶
socket.broadcast.emit('userAdded',data);//廣播歡迎新用戶,除新用戶外都可看到
其中需要注意'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");
-addMessage，有用戶發送新消息
在此事件監聽里，需要分成兩類情況處理：
1.私信
如果消息是發給特定用戶A，那么就需要獲取A對應的socket實例，然后調用其emit方法。所以每當一個客戶端連接到Server端時，我們得把其socket實例保存起來，以備后續之需。
connectedSockets[nickname]=socket;//以昵稱作下標，保存每個socket實例,發私信需要用
需要發私信時，取出socket實例做操作即可：
connectedSockets[nickname].emit('messageAdded',data)
2.群發
群發就比較簡單了，用broadcast方法即可：
socket.broadcast.emit('messageAdded',data);//廣播消息,除原發送者外都可看到
-disconnect，有用戶退出聊天室
需要做三件事情：
1.通知其他用戶“某用戶下線”
socket.broadcast.emit('userRemoved', data);
2.將用戶從保存了所有用戶的數組中移除
3.將其socket實例從保存了所有客戶端socket實例的數組中移除
delete connectedSockets[nickname]; //刪除對應的socket實例
運行一下服務端代碼，觀察有無錯誤：
node app.js
若沒什么問題，繼續編寫客戶端的代碼。
客戶端
在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>
我們並不立即深入邏輯細節，把框架搭好先。
首先，在body上加上ng-app屬性，標記一下angularjs的“管轄范圍”。這個練習中我們只用到了一個控制器，同樣將ng-controller屬性加到body標簽。
<body ng-app="chatRoom" ng-controller="chatCtrl">
接下來在js中，我們來創建module及controller。
var app=angular.module("chatRoom",[]);
app.controller("chatCtrl",['$scope','socket','randomColor',function($scope,socket,randomColor){}]);
注意這里，我們用內聯注入添加了socket和randomColor服務依賴。這里我們不用推斷式注入，以防部署的時候用uglify或其他工具進行了混淆，變量經過了重命名導致注入失效。
在這個練習中，我們自定義了兩個服務，socket和randomColor，前者是對socket.io的包裝，讓其事件進入angular context，后者是個可以生成隨機色的服務，用來給頭像指定顏色。
//socket服務
app.factory('socket', function($rootScope) {
var socket = io(); //默認連接部署網站的服務器
return {
on: function(eventName, callback) {...},
emit: function(eventName, data, callback) {...}
};
});
//randomcolor服務
app.factory('randomColor', function($rootScope) {
return {
newColor: function() {
return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);//返回一個隨機色
}
};
});
注意socket服務中連接的語句“var socket = io();”，我們並沒有傳入任何url，是因為其默認連接部署這個網站的服務器。
考慮到聊天記錄以及在線人員列表都是一個個邏輯及結構重復的條目，且html結構較復雜，為了其復用性，我們把它們封裝成兩個指令：
app.directive('message', ['$timeout',function($timeout) {}])
.directive('user', ['$timeout',function($timeout) {}]);
注意這里兩個指令都注入了'$timeout'依賴，其作用后文會解釋。
這樣一個外層框架就搭好了，現在我們來完成內部的細節。
登錄
頁面剛加載時只顯示登錄界面，只有當輸入昵稱提交后且收到服務端通知昵稱有效方可跳轉到聊天室。我們將ng-show指令添加到登錄界面和聊天室各自的dom節點上，來幫助我們顯示或隱藏元素。用'hasLogined'的值控制是顯示或隱藏。
<!-- chat room -->
<div class="chat-room-wrapper" ng-show="hasLogined">
...
</div>
<!-- end of chat room -->
<!-- login form -->
<div class="userform-wrapper" ng-show="!hasLogined">
...
</div>
<!-- end of login form -->
JS部分
$scope.login = function() { //登錄
socket.emit("addUser", {...});
}
//收到登錄結果
socket.on('userAddingResult', function(data) {
if (data.result) {
$scope.hasLogined = true;
} else { //昵稱被占用
$scope.hasLogined = false;
}
});
這里監聽了socket連接上的'userAddingResult'事件，接收服務端的通知，確認是否登錄成功。
socket連接監聽
成功登錄以后，我們還監聽socket連接上的其他事件：
//接收到歡迎新用戶消息，顯示系統歡迎辭，刷新在線列表
socket.on('userAdded', function(data) {});
//接收到所有用戶信息，初始化在線列表
socket.on('allUser', function(data) {});
//接收到用戶退出消息，刷新在線列表
socket.on('userRemoved', function(data) {});
//接收到新消息，添加到聊天記錄
socket.on('messageAdded', function(data) {});
接收到事件以后，做相應的刷新動作，這里的socket是socket.io經過包裝的服務，內部僅包裝了我們需要用到的兩個函數on和emit。我們在事件監聽里對model做的修改，都會在AngularJS內部得到通知和處理，UI才會得到及時刷新。
監聽內做的事情太具體和瑣碎了，這里就不列出了，接下來介紹一下message指令。
message 指令
最后分享一下我在寫message指令時遇到的問題。首先看一下其代碼：
app.directive('message', ['$timeout',function($timeout) {
return {
restrict: 'E',
templateUrl: 'message.html',
scope:{
info:"=",
self:"=",
scrolltothis:"&"
},
link:function(scope, elem, attrs){
$timeout(scope.scrolltothis);
}
};
}])
以及其模板message.html:
<div ng-switch on="info.type">
<!-- 歡迎消息 -->
<div class="system-notification" ng-switch-when="welcome">系統{{info.text}}來啦,大家不要放過他~</div>
<!-- 退出消息 -->
<div class="system-notification" ng-switch-when="bye">系統:byebye,{{info.text}}</div>
<!-- 普通消息 -->
<div class="normal-message" ng-switch-when="normal" ng-class="{others:self!==info.from,self:self===info.from}">
<div class="name-wrapper">{{info.from}} @ {{time | date: 'HH:mm:ss' }}</div>
<div class="content-wrapper">{{info.text}}<span class="avatar"></span></div>
</div>
</div>
模板中我們用ng-switch指令監聽info.type變量的值，根據其值的不同顯示不同內容。比如，當info.type值為"welcome"時，創建第一個dom節點，刪除下方另外兩個div。
另外，普通消息下，為了在UI上區分自己發出去的和收到的消息，需要給他們應用不同的樣式，這里用ng-class指令實現。
ng-class="{others:self!==info.from,self:self===info.from}"
當'self===info.from'返回true時，應用'self'類，否則，應用'others'類。
在此指令中，我們創建了獨立作用域，並綁定了三個屬性，綁定完后還必須在父作用域的HTML標簽上添加相應屬性。
scope:{
info:"=",
self:"=",
scrolltothis:"&"
}
<message self="nickname" scrolltothis="scrollToBottom()" info="message" ng-repeat="message in messages"></message>
關於Isolated Scope的知識，可以查看這兩篇博文AngularJS 作用域與數據綁定機制，Understanding AngularJS Isolated Scope。
在link函數中，執行一個動作：每當一個message被加到頁面上時，將聊天記錄滾動到最下方，一開始我是這樣寫的：
link:function(scope, elem, attrs){
scope.scrolltothis();
}
結果發生了一個很奇怪的現象，總是滾動到上一條位置，而不是最新這條。調試之后發現是因為'scrolltothis'函數執行的時候，DOM還沒渲染，所以在函數內部獲取scrollHeight的時候獲得的總是添加DOM節點之前的狀態。這時候，可以把代碼放到$timeout里延遲0秒執行，延遲0秒並不意味着會立即執行，因為js的單線程特性，代碼實際會等到dom渲染完再執行。
$timeout(scope.scrolltothis);
完整代碼可以戳我的GitHub→ChatRoom-AngularJS，DEMO可以戳→chat room
有任何不妥之處或錯誤歡迎各位指出，不勝感激~