【《校园聊天室系统的设计与实现》8100字（论文）】

第VI页校园聊天室系统的设计与实现摘要随着计算机和通信技术的信息系统正在积极发展。网络已经成为了我们了解社会动态的一个重要途径。因此伴随着网络发展，产生的相关软件也越来越多,而能够实现即时通信的聊天系统也是随之诞生，多如牛毛，且深受用户们喜爱。国内主流的通讯软件像QQ，微信等大型聊天软件就已经成为了人们日常生活中的一部分。对当前校园聊天室环境具有重大意义。经过研究当前主流的社交软件，设计思想参照当前主流的聊天软件，结合自身技术水平，设计出具有群聊/私聊，创建群/加入群/退群/模糊搜索群，添加好友/删除好友/模糊搜索用户，消息分页等功能的校园聊天室。希望设计出符合当代大学生需求，符合学校需求的校园聊天室系统。本文中主要阐述的是校园聊天室的设计过程，以及聊天功能的实现。前台采用的Typescript语言和vue框架以及ant-desiginui库来实现校园聊天室的前端的视图构建,后台采用的是nodejs及相关中间件来进行后台系统的搭建，数据存储采用的是Mysql2005数据库用来进行用户信息与聊天记录的存储。关键字：nodejs；即时通讯；mysql；Typescript；聊天室目录212411绪论 页1绪论1.1选题的背景和意义岁月如梭，白驹过隙，在计算机技术飞速发展的今天，我们国家依然高校的校园聊天室系统不完善，这带来了很大的繁杂性，不便于学生的交流学习。1.1.1选题的背景随着计算机和通信技术的信息系统正在积极发展，在当今的校园生活中，网络聊天越来越受到大学生的青睐，如表白墙，寻物启事等都是校园聊天室系统的一种功能体现。校园聊天室系统已经非常成熟并已经拥有非常丰富聊天数据，但是以前的聊天室管理方式严重无法适应当前的快速发展态势,维护和管理中出现了困难，系统没有发挥应有的作用。本文基于Typescript语言的校园聊天室系统，参照当前主流的即时通讯软件和平台，实现了文本信息，图片信息，好友聊天，群聊，表情的发送与接收。实现了校园聊天室的所需的功能。1.1.2选题的意义目前，许多学校内的聊天室系统，数据安全性不高，系统冗余，因此欢迎度不高，通信不畅等问题便随之而来，为了解决校园聊天室的受欢迎程度，通讯不畅等问题，提高系统的受欢迎程度，提高网站访问量，更是为了同学们的学习交流，使校园友谊平台的逐步走向数字化，智能化，现代化。本系统的实现具有重要的现实意义。1.2主要内容及组织结构本文主要是研究基于即时通讯的校园聊天室的实现过程，整个系统采用了Typescript语言的作为前后端开发语言，前端采用了vuecli，vuex，vue-router及ant-desiginui库等技术实现前端网页的构建，后台系统采用nodejs运行环境结合mysql数据库来构建后台系统。文章共分为六部分：介绍课题的相关背景和意义以及开发语言的选取。对主要的开发工具和开发技术进行详细的介绍。从系统的功能角度对系统的需求进行详细的分析[4]。主要介绍了系统的组织结构以及系统数据库的详细描述[7]。对部分重要的功能进行详细的代码描述。对构建的校园聊天室系统进行测试。

2主要开发工具和技术简介2.1Typescript语言Typescript是微软开发的一种开源编程语言。它是通过向JavaScript添加静态类型定义来构建的。它可以在任何浏览器和任何操作系统中使用。2.2nodejs开发环境Nodejs是一种为开发高性能服务器而诞生的技术。它是一种在服务器上运行的脚本语言。它基于V8（谷歌浏览器）。它的单线程特点，使它轻量级和高效。2.3Mysql数据库Mysql数据库是目前最快的SQL语言数据库之一，完全免费。用户可以通过网络直接下载MySQL数据库，无需支付任何费用。它具有体积小，速度快，总拥有成本低，开源等特点。2.4前端开发框架本系统主要采用Vue框架，这是一个渐进式的用户界面构建框架。可以从下到上逐层渲染。它不仅易于上手，而且易于与第三方库或现有项目集成。另一方面，当与现代工具链和各种支持类库相结合时，Vue还可以为复杂的单页应用程序提供驱动程序。3需求分析3.1系统可行性分析近几年，各种校园聊天系统如雨后春笋般发展。校园聊天室自然也要跟上时代发展的步伐，所以需要一个功能现代化的、丰富的、完善的聊天系统。为了适应时代潮流，使浏览器聊天系统成为校内学生群体认可的沟通系统，校园聊天室系统开发是非常有必要，有发展前景的。本文的校园聊天室系统，可以运行于各个浏览器，数据量不大，任何数据库都可以满足要求。在实现过程中，需要熟练使用数据库，并且可以使用SQL语句进行大量的增删查改操作，功能实现起来也是比较复杂。我学过数据库、软件工程等相关的课程，潜心研习过当今流行的前端开发框架与开发语言，掌握Typescript语言我是没有问题的。此外，互联网上的信息特别丰富。可以在网上搜索相关信息。在技术方面，导师可以指导我。所以在技术方面没有问题。本系统使用Typescript语言作为开发语言，使用当下流行的MVVM设计模式[7]，既节约了开发的成本，又降低了后期维护的难度。Web页面使用VUE+ant-desiginui，使用VScode编辑器，数据库服务器使用的是mysql，性能优越。本系统所使用的技术都是免费的，所以本系统在市场上，经济上，技术上，后期维护上都是可行的。3.2系统功能概述通过对系统的分析，系统包括前台系统和后台系统两个模块。前台系统主要分为用户注册模块，用户登录模块，搜索用户/群模块[5]，删除好友模块，退出群聊模块，创建群聊模块。后台管理系统主要分为[6]用户身份验证模块、聊天模块、添加好友模块、添加/创建群模块、用户通用模块。3.2.1前台系统模块前台系统主要分为用户注册模块，用户登录模块，搜索用户/群模块，删除好友模块，退出群聊模块，创建群聊模块。具体描述如下：用户注册模块：用户注册模块是[7]为了给新用户开户的使用的模块，用户输入自己喜欢的账号作为自己的昵称，自定义密码用作登陆时使用，注册id目前只接受大小写字母作为昵称。用户登录模块：用户登录模块是为了给已有帐号的用户登录时使用，用户输入自己的账号与密码，登入到本系统。搜索用户/群模块：搜索用户/群模块可以给已有帐号的用户搜索相关聊天室，用户输入已经存在的用户id或群聊天室名称即可建立链接。删除好友模块：删除好友模块模块可以给已有帐号的用户删除相关好友，用户通过点击删除按钮即可删除此聊天好友。退出群聊模块：退出群聊模块可以给已有帐号的用户选择退出某个当前加入的群聊天室，用户通过点击退出按钮即可推出此群聊天室。创建群聊模块：创建群聊模块可以给已有帐号的用户新建群聊天室，用户通过点击新建按钮即可新建群聊天室。聊天室模块: 聊天室模块是显示聊天信息、输入聊天信息，发送信息的，使用户的主要操作模块[7]3.2.2后台系统模块后台管理系统主要分为用户身份验证模块、聊天模块、添加好友模块、添加/创建群模块、用户通用模块。具体描述如下：用户身份验证模块：用户身份验证模块是处理用户注册和老用户登录的模块。新用户注册时调用此模块为新用户在数据库增加用户id[1]，密码等字段存储用户信息。老用户登陆时调用此模块使后台系统接收到用户的账户密码用于判断是否允许用户登录。聊天模块：聊天模块是处理聊天信息的，所有用户的信息发送与接收都通过此模块进行分发。添加好友模块：添加好友模块是所有用户之间想要形成通讯建立的模块，此模块通过用户在前端页面的好友添加操作，形成数据库关系从而建立通讯。添加/创建群模块：添加/创建群模块是为用户建立群组聊天室使用的，可以容纳多人的即时通讯。用户通用模块：用户通用模块是处理一些公共信息的模块。3.3系统设计目标功能目标:完成上述前后台系统分析相关模块，并在此基础上完善系统，希望能够实现图片和表情的发送。性能目标:网络正常时，可以快速完成页面读取，显示聊天室的所有成员，动作响应迅速，兼容性强，与当前主流浏览器兼容，可适应移动终端。扩张性强，维持性强。其它目标:页面美观大方、操作简单易用、能够得到当代大学生的喜爱。3.4开发及运行要求硬件：PC机(i5cpu,8G内存，6G显卡，1T硬盘)软件：Window10，Typescript,nodejs,Mysql,vscode。此系统对电脑硬件要求不高，而且做到了各个浏览器的兼容，做到了一次开发在哪都能用，因此是非常满足开发与市场需求的。此系统的开发需要开发人员具有nodejs，Typescript，vue框架，vuecli,vuex等相关技能，系统的实现是比较麻烦的的，逻辑错综复杂，技术涉及比较广泛，但是在经过自己的潜心学习与老师的耐心指导，所以说在开发上也是没有问题的。

4系统概要设计4.1系统结构的设计本文的校园聊天室系统包括前台系统和后台系统两个模块[11]。前台系统主要分为用户注册模块，用户登录模块，搜索用户/群模块，删除好友模块，退出群聊模块，创建群聊模块。后台管理系统主要分为用户身份验证模块、聊天模块、添加好友模块、添加/创建群模块、用户通用模块。系统结构图如图4.1所示：图4.1系统结构图4.2数据库的概要结构设计本文的校园聊天室系统主要从聊天信息和用户两个点出发。用户实体具有用户名、用户密码、用户id等属性[12]。聊天信息实体具有信息id、信息内容、用户名、发送时间等属性。具体如下图4.2所示：图4.2总体实体属性图4.3数据库的分析与设计所有的功能的实现离不开数据库的支持，数据库设计是系统设计的必要部分。在这个系统的开发中使用的数据库系统是mysql。数据库中有六个表：好友聊天记录表、聊天群表、聊天群成员表、聊天群信息表、用户表以及用户好友表。该表包含字段名、类型、长度、主键、描述和允许的空值。好友聊天记录表“friend_message”如下表[2]所示：表4.1好友聊天记录表“friend_message”列名数据类型长度允许空是否主键说明idint否是聊天记录编号user_idvarchar255否否信息发布者idfriendldvarchar255否否好友idcontentvarchar255否否信息内容messageTypevarchar255否否信息格式timedouble否否发表时间聊天群表“group”如下表所示：表4.2分类表“group”表名数据类型长度允许空是否主键说明groupIdvarchar36否是群名称userIdvarchar255否否聊天室所有者groupNamevarchar255否否聊天室名称noticevarchar255否否聊天室公共createTimedouble否否创建时间聊天群成员表“group_map”如下表所示：表4.3“group_map”表名数据类型长度允许空是否主键说明_idint否是聊天室编号groupIdvarchar255否否聊天室名称userIdvarchar255否否群成员id聊天群信息表“group_message”如下表所示：表4.4“group_message”表名数据类型长度允许空是否主键说明_idint否是历史信息编号userIdvarchar255否否发表者idgroupIdvarchar255否否群名称contentvarchar255否否信息内容messageTypevarchar255否否信息类型timedouble否否发表时间用户表“user”如下表所示：表4.5“user”表名数据类型长度允许空是否主键说明userIdvarchar36否是用户idusernamevarchar255否否用户昵称passwordvarchar255否否用户密码avatarvarchar255否否头像rolevarchar255否否用户角色statusvarchar255否否用户权限tagvarchar255是否用户标签createTimedouble否否创建时间用户好友表“user_map”如下表所示：表4.5“user_map”表名数据类型长度允许空是否主键说明_idint否是好友编号friendIdvarchar255否否好友iduserIdvarchar255否否用户id4.4数据库的分析与设计4.4.1登录与注册功能设计此窗体是成功启动后出现的第一个界面。已有账号的用户进通过输入账号密码进入本系统，未拥有账号的用户需要通过注册才可以登入本系统主要使用ant-desiginui库实现。登录/注册流程图如下图4.3所示：图4.3登录/注册流程图4.4.2聊天室主功能设计聊天室主功能分为个人模块，聊天列表模块，聊天室模块[10]。个人模块可以使用户退出系统、添加好友、加入和创建群聊，聊天列表模块使用户可以看到当前的好友以及群聊天室，聊天室模块是用户发送和就收信息的模块。聊天室主主功能流程图如下图4.4所示:图4.4聊天室主功能流程图4.4.3添加好友/群聊天室功能设计添加好友/群聊天室模块使用户可以搜索添加好友或群聊，以建立沟通，添加好友/群聊天室流程图如下图4.5所示：图4.5添加好友/群聊天室流程图4.4.4删除好友功能设计删除好友模块使用户可以删除已添加的好友，通过删除操作来增强界面的简洁性，增强用户体验，更好的接近本系统的设计目标。删除好友流程图如下图4.6所示：图4.6删除好友流程图4.4.5退出群聊天室功能设计退出群聊天室模块使用户可以退出已加入的群聊天室，通过退出操作来增强界面的简洁性，增强用户体验，更好的接近本系统的设计目标。退出群聊天室流程图如下图4.7所示：图4.7退出群聊天室流程图

5系统详细设计与实现本文的校园聊天室系统包括前台系统和后台系统两个模块。前台系统主要是用户注册，用户登录，搜索用户/群，删除好友，退出群聊，创建群聊的窗口。系统后台主要根据前台通过特定的网络接口发送请求为用户提高身份验证、聊天信息分发、添加好友、添加/创建群等相应的数据库进行添加和删除，整理数据并返回到前台。5.1前台设计在前端页面开发中，我使用了流行的VUE+ant-desiginui前台页面快速开发解决方案，它基于Vue和ant-desiginui。本项目前端开发属于单页开发，能够适应当前市场主流显示器，移动端兼容。5.1.1登录与注册界面本系统的登陆与注册界面主要由两部分组成。上部分是登录与注册，下部是提交按钮。其功能如下:上层主要使用嵌套的<div></div>标签结合ant-desiginui库，使用弹性盒布局来显示内容，通过Html的form表单收集数据。在下方，通过一个<button/>标签形成提交按钮，用户点击时会调用handleSubmit()方法将用户输入的账号密码提交到后台系统。登陆注册界面图如下图5.1所示：图5.1登陆注册界面图登陆注册界面代码图如下图5.2所示：图5.2登陆注册界面代码图5.1.2聊天室主界面聊天室主界面分为左中右结构，左边是用户头像和相关功能，使用了<div/>标签，使用了弹性盒子布局。中部是搜索框和聊天列表是使用ant-desiginui的搜索组件和Vue的V-for指令在一个循环中呈现，单击好友或群聊时右部聊天框调用观察方法，切换到对应的聊天面板上。右部是聊天面板，采用了<div/>，<img>等标签的嵌套，再发送消息的是会调用throttle()（发送消息节流方法），preSendMessage()（消息发送前校验方法），sendMessage()（消息发送方法）。聊天室主界面图如下图5.3所示：图5.3聊天室主界面图聊天室代码截图如下图5.4所示：图5.4聊天室代码截图5.1.3添加好友/群聊天室界面添加好友/群聊天室界面，采用的是ant-desiginui的弹出框模块，用户在输入信息后点击搜索会调用handleGroupSearch()方法进行好友或群聊天室的搜索。添加好友界面图如下图5.5所示：图5.5添加好友界面图添加聊天室界面图如下图5.6所示：图5.6添加聊天室界面图添加好友代码截图如下图5.7所示：图5.7添加好友代码截图添加群聊天室代码截图如下图5.8所示：图5.8添加群聊天室代码截图5.1.4删除好友界面删除好友界面，采用的是ant-desiginui的弹出框模块，用户在点击删除按钮后会调用exitFriend()方法进行好友的删除。删除好友界面图如下图5.9所示：图5.9删除好友界面图删除好友代码如下图5.10所示：图5.10删除好友代码截图5.1.5退出群聊天室界面删除好友界面，采用的是html的<button/>按钮，用户在点击退出按钮后会调用exitGroup()方法进行群聊天室的退出。退出群聊天室图如下图5.11所示：图5.11退出群聊天室图退出群聊天室代码如下图5.12所示：图5.12退出群聊天室代码截图5.2后台系统设计后台管理系统主要分为用户身份验证系统、聊天系统、添加好友系统、添加/创建群系统、用户通用系统。5.2.1用户身份验证系统用户身份验证系统通过路由函数处理数据并返回前端认证结果。具体如下图5.13所示：图5.13用户身份认证代码截图5.2.2聊天系统聊天系统主要是用来做消息的分发，包括私聊信息的发送，群消息的发送等。聊天系统--群聊系统代码截图如下图5.14所示：图5.14聊天系统--群聊系统代码截图聊天系统--私聊系统代码截图如下图5.15所示：图5.15聊天系统--私聊系统代码截图5.2.3添加好友系统添加好友系统通过路由函数将两个id添加在一个好友表中，处理数据并返回前端添加结果。添加好友系统代码截图如下图5.16所示：图5.16添加好友系统5.2.4添加/创建群系统添加/创建群系统使用户可以添加或单独创建群聊。通过路由函数处理数据并返回前端认证结果。添加群聊代码截图如下图6.17所示：图5.17添加群聊代码截图创建群聊代码截图如下图5.18所示：图5.18创建群聊代码截图5.2.5用户通用系统用户通用系统主要是为了处理用户的昵称和密码修改而构建的，其还包含一些其他的方法。通过路由函数处理数据并返回前端认证结果。具体如下图5.19所示：图5.19用户通用系统代码截图

6系统测试6.1测试目的本次测试主要对用户登录、用户注册、群信息、私聊信息进行了测试。这些模块是聊天室的核心构成，漏洞是不允许存在的，本次主要是采用了人工测试的方法，具体见下表6.1：表6.1系统功能测试场景/条件操作预测结构实际输出结果登录“校园聊天室系统”，进行登录输入账号密码输入正确的用户账号和密码得到预期结果登录“校园聊天室系统”，进行登录输入账号密码输入错误的用户账号和密码得到预期结果注册“校园聊天室系统”，进行注册输入账号密码可以进行账号的注册得到预期结果在“校园聊天室系统”，进行群信息发送发送信息可以完成即时通讯得到预期结果在“校园聊天室系统”，进行私聊信息发送发送信息可以完成即时通讯得到预期结果6.2测试运行结果打开聊天系统的登陆页面输入正确的账号、密码，登录页面如下图6.1所示：图6.1正确的账号密码登录页面输入不符合格式的账号、密码登录页面如下图6.2所示：图6.2新增分类成功的页面在注册页面输入符合条件的账号及密码，账号注册成功界面如下图6.3所示：图6.3账号注册成功界面页在聊天群里让群内好友发送群消息测试自己是否能够收到，群信息接受页面如下图6.4所示：图6.4群信息发送页面给某个好友私聊并等待其回复，信息发送成功及成功接受页面如下图6.5所示：图6.5私聊信息发送成功页面6.3测试总结本次测试主要对用户登录、用户注册、群信息、私聊信息进行了测试，结果总体上是令人满意的，因为自身的能力与技术方面的不足导致页面美观度不高，在以后的学习中会尽可能地完善。结论本系统基于Typescript语言的校园聊天室系统，参照当前主流的即时通讯软件和平台，实现了文本信息，图片信息，好友聊天，群聊，表情的发送与接收。实现了校园聊天室的所需的功能。本次系统是第一次独自书写这么大的系统，且我在几个月的实习期间通过不懈努力，从一开始的一无所知，到一步步熟知，在将其应用至本次系统中，切身的感受到了自己的成长。因为此次写的系统所涉及到的技术为全栈知识，就是所涉及知识覆盖面很广，有我大学期间没有接触过的知识，通过看视频和查看论坛，还有百度来从零学习，还有从各大博客查看优秀的博客，