基于AngularJS 和Bootstrap 聊天室的設(shè)計(jì)與實(shí)現(xiàn)

陳濤

摘要：隨著互聯(lián)網(wǎng)和信息技術(shù)的發(fā)展，如何快速構(gòu)建高效、強(qiáng)大的動(dòng)態(tài)網(wǎng)站成為很多人研究的熱點(diǎn)。該文將結(jié)合AngularJS和Bootstrap構(gòu)建一個(gè)HTML5聊天室，體現(xiàn)AngularJs和Bootstrp整合的優(yōu)點(diǎn)。

關(guān)鍵詞：AngularJS；Bootstrap；聊天室

中圖分類號：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號：1009-3044（2015）09-0091-02

Abstract：With the development of Internet and information technology， how to construct efficient， powerfuldynamic website has become the focus of many people's research. This paper will construct a HTML5 chat room with AngularJS and Bootstrap， AngularJs and Bootstrp integration advantage.

Key words： AngularJS； Bootstrap； chat room

1 AngularJS簡介

AngularJS是一款由Google公司開發(fā)的基于JavaSript的MVC框架，主要用于動(dòng)態(tài)應(yīng)用程序開發(fā)工作，能有效的簡化開發(fā)過程的復(fù)雜度，提高測試和開發(fā)效率[1]。AngularsJS使用Javascript語言進(jìn)行開發(fā)，大大降低了前端開發(fā)人員的學(xué)習(xí)曲線，使得程序的開發(fā)、維護(hù)和測試更好的簡潔。

1.1 AnglarJS的特點(diǎn)

1）數(shù)據(jù)雙向綁定：可以實(shí)現(xiàn)View層與model層數(shù)據(jù)的同步，一方的改變會(huì)影響另一方[2]。2）代碼模塊化。3）提供依賴注入，可以大大降低模塊之間的耦合度。4）支持測試驅(qū)動(dòng)開發(fā)。

2 Bootstrap簡介

Bootstrap是一款由Twitter公司開發(fā)的前端框架，其主要目的在于提高Web開發(fā)的速度，它基于HTML、CSS、JAVASCRIPT，可以靈活、快速的構(gòu)建Web應(yīng)用[3]。

2.1Bootstrap 特點(diǎn)

1）對移動(dòng)設(shè)備的良好支持：Bootstrap的設(shè)計(jì)之初，就考慮到移動(dòng)設(shè)備上的應(yīng)用，對于不同分辨率的移動(dòng)設(shè)備都有良好的支持[4]。2）柵格布局：Bootstrap支持柵格系統(tǒng)，使得布局效果更加靈活方便，能夠滿足各種需求。3）響應(yīng)式設(shè)計(jì)：針對不同設(shè)備和不同分辨率能夠良好的支持，并具有一致的用戶體驗(yàn)。4）全面支持HTML5和CSS3[5]。

3 技術(shù)框架

3.1 服務(wù)端技術(shù)

考慮到聊天室的功能相對比較簡單，且數(shù)據(jù)處理的密度也不大。所以考慮使用目前比較流行的nodejs來完成服務(wù)端的基本功能，服務(wù)端整體的設(shè)計(jì)框架如下：

在nodejs基礎(chǔ)上使用express插件可以高效的開發(fā)web應(yīng)用，目前也是nodejs下非常重要的一個(gè)插件。數(shù)據(jù)庫選擇了mongoDB，mongoDB是目前比較流行的非關(guān)系型數(shù)據(jù)庫，具有靈活，穩(wěn)定特性，且符合OO思想。為何更好的對數(shù)據(jù)庫進(jìn)行建模，本項(xiàng)目還選擇使用mongoose。

3.2 客戶端技術(shù)

客戶端將利用Bootstrap來對頁面進(jìn)行構(gòu)建，利用AngularJS實(shí)現(xiàn)數(shù)據(jù)的訪問，整體結(jié)構(gòu)如下：

3 聊天室整體設(shè)計(jì)

聊天室整體設(shè)計(jì)包括需求設(shè)計(jì)、用例設(shè)計(jì)和模塊設(shè)計(jì)三個(gè)部分，其中需求設(shè)計(jì)主要是對聊天室基本功能進(jìn)行分析，用例設(shè)計(jì)使用UML語言描述需求的信息，最后模塊設(shè)計(jì)從整體角度對聊天室的功能進(jìn)行模塊劃分。

3.1 需求分析

3.1.1 用戶登錄

該模塊主要實(shí)現(xiàn)用戶身份認(rèn)證，通過對用戶名和密碼的驗(yàn)證，判斷用戶所具有的權(quán)限，并對后面的操作進(jìn)行控制和管理。

3.1.2用戶注冊

該模塊主要實(shí)現(xiàn)新用戶的創(chuàng)建，任意使用者可以通過該模塊注冊一個(gè)用戶帳號，后面可以通過登錄模塊，進(jìn)行聊天室的其他操作。

3.1.3網(wǎng)上聊天

該模塊是整個(gè)系統(tǒng)的核心模塊，實(shí)現(xiàn)聊天信息的發(fā)布和瀏覽，任意注冊用戶都可以在該模塊中發(fā)布聊天信息，并且可以對自己的聊天信息進(jìn)行編輯和管理。

3.1.4聊天記錄

該模塊主要實(shí)現(xiàn)對聊天記錄的管理，聊天內(nèi)容發(fā)布者可以編輯自己的發(fā)布的聊天信息，并且可以實(shí)現(xiàn)導(dǎo)出功能。

3.1.5 后臺(tái)管理

該模塊主要實(shí)現(xiàn)對聊天室的管理和維護(hù)，包括用戶管理，聊天數(shù)據(jù)管理等，是聊天室管理員操作的主要模塊。

3.2 用例設(shè)計(jì)

整個(gè)聊天室系統(tǒng)包括兩類使用者，一類是普通用戶，一類是管理員。

3.2.1用戶用例圖

通過用例圖可以看出用戶能夠完成注冊、登錄、聊天等基本功能，其中聊天過程可以建立聊天群，進(jìn)行群聊或者進(jìn)行私聊。

3.2.2用戶用例圖

通過用例圖可以看出管理員主要負(fù)責(zé)對后臺(tái)數(shù)據(jù)進(jìn)行維護(hù)，包括用戶信息，聊天信息和系統(tǒng)的日志信息。

3.3 模塊設(shè)計(jì)

聊天室系統(tǒng)共有5個(gè)基本模塊組成，分別是登錄模塊、注冊模塊、聊天室模塊和管理模塊。如圖3所示。

登錄模塊負(fù)責(zé)用戶和管理員登錄驗(yàn)證。注冊模塊負(fù)責(zé)新用戶創(chuàng)建。聊天室模塊完成用戶的聊天信息發(fā)布和瀏覽，管理員模塊負(fù)責(zé)對整個(gè)聊天室進(jìn)行數(shù)據(jù)管理和維護(hù)。

4 代碼實(shí)現(xiàn)

整個(gè)聊天室由客戶端和服務(wù)端兩個(gè)部分組成，其中服務(wù)端主要負(fù)責(zé)聊天數(shù)據(jù)的存儲(chǔ)和交換，客戶端主要負(fù)責(zé)聊天數(shù)據(jù)的顯示和瀏覽。

4.1服務(wù)端

public static class MyChatImpl

{ [InvokeAt（InvokeAtType.Initialize）]

public static void Initialize（）

{MyChatProtocol.JoinMyChat += new RequestHandler（OnJoinChat）；

MyChatProtocol.SendMyChatMessage += new RequestHandler（OnSendMessage）；

Service.ClientDisconnect += new ClientDisconnectEventHandler（OnClientDisconnect）；}

public static ConcurrentList PeopleInChat = new ConcurrentList（）；}

4.2客戶端

4.3 AngularJS實(shí)現(xiàn)聊天數(shù)據(jù)的獲取

function NgChatCtrl（$scope） {

var server = new ServerChannel（'http：//127.0.0.1：8002'）；

var side = 'left'；

$scope.messages = []；

$scope.sendMessage = function （） {

server.sendNgChatMessage（$scope.messageText）；

$scope.messageText = ""；}；}

頁面部分代碼：

{{m.text}}

5 總結(jié)

通過對網(wǎng)絡(luò)聊天室功能的實(shí)現(xiàn)，可以看出AngularJS和Bootstrap技術(shù)可以大大提高動(dòng)態(tài)網(wǎng)站的開發(fā)速度和效率，滿足程序員對實(shí)際開發(fā)的要求。

參考文獻(xiàn)：

[1] 武健. 網(wǎng)絡(luò)用戶訪問模式挖掘算法研究[J]. 計(jì)算機(jī)工程與應(yīng)用，2006（21）.

[2] 陳 璇. 響應(yīng)式自助微課學(xué)習(xí)平臺(tái)的設(shè)計(jì)[J]. 浙江科技學(xué)院學(xué)報(bào)，2015（1） .

[3] 吳曦德. 構(gòu)建共享型校企合作的Web應(yīng)用開發(fā)課程實(shí)訓(xùn)平臺(tái)的探索與研究[J]. 科技風(fēng)，2015（1） .

[4] 李小遐. 企業(yè)網(wǎng)站構(gòu)建技術(shù)探究[J]. 電子測試， 2014（24） .

[5] 于萬國. 用jQuery UI創(chuàng)建表單日期[J]. 河北北方學(xué)院學(xué)報(bào)，2014（6） .