基于AngularJS 和Bootstrap 聊天室的设计与实现

摘要：随着互联网和信息技术的发展，如何快速构建高效、强大的动态网站成为很多人研究的热点。该文将结合AngularJS和Bootstrap构建一个HTML5聊天室，体现AngularJs和Bootstrp整合的优点。

关键词：AngularJS；Bootstrap；聊天室

中图分类号：TP311 文献标识码：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公司开发的基于JavaSript的MVC框架，主要用于动态应用程序开发工作，能有效的简化开发过程的复杂度，提高测试和开发效率[1]。AngularsJS使用Javascript语言进行开发，大大降低了前端开发人员的学习曲线，使得程序的开发、维护和测试更好的简洁。

1.1 AnglarJS的特点

1）数据双向绑定：可以实现View层与model层数据的同步，一方的改变会影响另一方[2]。2）代码模块化。3）提供依赖注入，可以大大降低模块之间的耦合度。4）支持测试驱动开发。

2 Bootstrap简介

Bootstrap是一款由Twitter公司开发的前端框架，其主要目的在于提高Web开发的速度，它基于HTML、CSS、JAVASCRIPT，可以灵活、快速的构建Web应用[3]。

2.1Bootstrap 特点

1）对移动设备的良好支持：Bootstrap的设计之初，就考虑到移动设备上的应用，对于不同分辨率的移动设备都有良好的支持[4]。2）栅格布局：Bootstrap支持栅格系统，使得布局效果更加灵活方便，能够满足各种需求。3）响应式设计：针对不同设备和不同分辨率能够良好的支持，并具有一致的用户体验。4）全面支持HTML5和CSS3[5]。

3 技术框架

3.1 服务端技术

考虑到聊天室的功能相对比较简单，且数据处理的密度也不大。所以考虑使用目前比较流行的nodejs来完成服务端的基本功能，服务端整体的设计框架如下：

在nodejs基础上使用express插件可以高效的开发web应用，目前也是nodejs下非常重要的一个插件。数据库选择了mongoDB，mongoDB是目前比较流行的非关系型数据库，具有灵活，稳定特性，且符合OO思想。为何更好的对数据库进行建模，本项目还选择使用mongoose。

3.2 客户端技术

客户端将利用Bootstrap来对页面进行构建，利用AngularJS实现数据的访问，整体结构如下：

3 聊天室整体设计

聊天室整体设计包括需求设计、用例设计和模块设计三个部分，其中需求设计主要是对聊天室基本功能进行分析，用例设计使用UML语言描述需求的信息，最后模块设计从整体角度对聊天室的功能进行模块划分。

3.1 需求分析

3.1.1 用户登录

该模块主要实现用户身份认证，通过对用户名和密码的验证，判断用户所具有的权限，并对后面的操作进行控制和管理。

3.1.2用户注册

该模块主要实现新用户的创建，任意使用者可以通过该模块注册一个用户帐号，后面可以通过登录模块，进行聊天室的其他操作。

3.1.3网上聊天

该模块是整个系统的核心模块，实现聊天信息的和浏览，任意注册用户都可以在该模块中聊天信息，并且可以对自己的聊天信息进行编辑和管理。

3.1.4聊天记录

该模块主要实现对聊天记录的管理，聊天内容者可以编辑自己的的聊天信息，并且可以实现导出功能。

3.1.5 后台管理

该模块主要实现对聊天室的管理和维护，包括用户管理，聊天数据管理等，是聊天室管理员操作的主要模块。

3.2 用例设计

整个聊天室系统包括两类使用者，一类是普通用户，一类是管理员。

3.2.1用户用例图

通过用例图可以看出用户能够完成注册、登录、聊天等基本功能，其中聊天过程可以建立聊天群，进行群聊或者进行私聊。

3.2.2用户用例图

通过用例图可以看出管理员主要负责对后台数据进行维护，包括用户信息，聊天信息和系统的日志信息。

3.3 模块设计

聊天室系统共有5个基本模块组成，分别是登录模块、注册模块、聊天室模块和管理模块。如图3所示。

登录模块负责用户和管理员登录验证。注册模块负责新用户创建。聊天室模块完成用户的聊天信息和浏览，管理员模块负责对整个聊天室进行数据管理和维护。

4 代码实现

整个聊天室由客户端和服务端两个部分组成，其中服务端主要负责聊天数据的存储和交换，客户端主要负责聊天数据的显示和浏览。

4.1服务端

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客户端

var bubbles = 1；

var maxBubbles = 8；

var server；

function sendMessage（） {

server.sendMyChatMessage（$（"#msgText"）.val（））；

$（"#msgText"）.val（""）；}

$（window）.load（function （） {

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

server.onConnect（function （） {

server.joinMyChat（）；}）；

server.myChatMessagesInform = function （p） {

addBubble（p.avatar， p.message）；}；}）；

4.3 AngularJS实现聊天数据的获取

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 = ""；}；}

页面部分代码：