一、实验选题
1.1选题背景及意义
本次课程设计选题为 ：仿QQWeb即时聊天系统。
由于WEB的易用性、实用性，它很快占据了主导地位，目前成为使用最广泛、最有前途、最具魅力的信息传播技术。本次实验就就基于web技术对社交网站开发的初步探索。实验过程，加深对已学的知识，复习和巩固计算机软件设计知识，加深对软件设计方法、软件设计技术和设计思想的理解，如java语言，数据库mysql，web前端技术的实践，掌握软件设计的方法和面向对象程序设计的基本技术，同时自学websocke这一新的技术，提高在软件开发方面的综合应用能力。实验是小组合作，对未来的职业有了小小的体验，对合作交流有了更深的理解，在网上得到了更多不同解决问题的方法和思路。
1.2实验内容
本次课程设计内容为仿QQWeb即时聊天系统。
具体要求是：
? 实现Web的点对点即时的文本消息聊天功能。
? 实现Web的表情的发送、接收和显示功能。
? 实现Web的图片的发送、接收和显示功能。
? 实现本地消息的存储，在离线的时候也能加载和查看历史消息；
? 要求使用WebSocket；
具体工作：
A. 分小组选课题；
B. 注册码云，小组成员加入，在实验的过程中更新码云，上传实验进度；
C.小组成员分析实验内容，搭建好环境，并分任务；
D.成员各自完成自己任务，相互沟通，逐步完成项目需求；
1.3相关技术及工具
开发工具：MyEclipse，eclipse，vscode，gitbash，gitee
数据库设计与创建：MySQL，mysqlyog
服务器：（Web）Socket协议
框架：nodejs下的express和socket.io
二、实验目的
综合实践能力创新实训(1)课程设计是计算机、网络、物联网、软件工程、信息安全等专业的一个综合性实践教学环节，是学习完《Internet与Web编程》课程后进行的一次全面的综合练习。其目的在于促进学生复习和巩固计算机软件设计知识，加深对软件设计方法、软件设计技术和设计思想的理解，并能运用所学软件设计知识和WEB工程技术进行综合软件设计，通过本课程设计让学生进行简单WEB应用软件系统的开发，掌握软件设计的方法和面向对象程序设计的基本技术，提高学生在软件开发方面的综合应用能力。
【课程设计|基于nodejs的网络聊天室实现】三、总体设计（含背景知识或基本原理与算法、或模块介绍、设
计步骤等）
3.1需求概述
1）客户端：提供登录、注册、主窗体及聊天等界面及对应的业务逻辑，向服务器发送相应的服务请求，并接受相应的处理结果。具体的处理交给服务器，而客户端只接收服务器处理的结果并显示给用户。
2）服务器：监控登录信息及在线用户信息，接收客户端的服务请求，并做相应的处理，然后将处理结果发送给客户端。服务器负责负责连接数据库，保存和读取数据。
3.2系统业务流程分析
文章图片
3.3功能分析及系统模块设计
文章图片
3.2系统架构设计
文章图片
四、详细设计
4.1数据库设计
（1）概念结构设计
文章图片
（2）物理结构设计
表结构设计
表1 message
文章图片
表2 usersInformation
文章图片
4.2系统子模块流程设计
(1) 子模块功能及流程
文章图片
(2) 算法描述
（1）用户在浏览器打开网址，由于项目部署在本地，只要输入localhost+端口号就能进入，客户端与服务器建立连接
（2）通过注册登录一系列操作与数据库交互，从而登入聊天系统
（3）服务器与多个客户端连接，通过websocket技术在服务器端与客户端传递数据
（4）实现了实时在线聊天
(3) 关键类说明
（1）public目录为服务器的静态资源，存储html页面以及css/js文件
（2）public下的index.html是前端页面代码文件，与用户交互
（3）node_modules文件夹存储nodejs的库，便于服务器端引用
（4）app.js是服务器端代码文件，处理业务逻辑
4.3关系技术设计及实现
（1）登录技术：采用mysql数据库实现，通过app.js与MySQL数据库连接查询，从而验证用户登录
（2）注册技术：同上登录技术，采用mysql插入语句
（3）权限技术：通过比较用户输入数据与验证查询所得信息是否相符和，限制其权限
4.4运行环境
硬件：64位window系统笔记本电脑
软件：vscode（内嵌node插件）、gitbash(上传本地代码到码云存储)
Gitee网页版（云端存储代码）
五、实验结果与分析
(一) 功能截图及说明
（1）运行说明
先打开命令行程序，打开项目路径，输入一下命令：node app.js。得到提示服务器启动成功。
在浏览器中打开http://localhost:3000/，进入页面，登录用户名
最终进入实时聊天系统页面，使用完删除该页面即可退出系统。
（2）功能截图
图1 登录界面
文章图片
图2 注册界面
文章图片
图3 注册成功
文章图片
图4 进入聊天室
文章图片
图5 图片的发送、接收和显示功能
文章图片
图6 点对点即时的文本消息聊天功能
文章图片
图7 表情的发送、接收和显示功能
文章图片
（二）测试结果分析：
本次实验测试能够大致达到选题要求，文字、图片、表情都能够正常接收发送。唯一美中不足的是私聊功能因进度和学习程度问题而未实现。
此次选题难度较大，websocket技术之前没有接触过，nodejs也比js要更生疏。但是这也是一个优势，相对其他同学的选题该题较为新颖，做完后不仅熟悉了socket通信协议，而且能够理解相较于http ajax轮询技术，socket技术在实时通信中的巨大优势，而且收获更多新知识。
推荐阅读
- 企业面试真题|15 个常见的 Node.js 面试问题及答案
- Koa|koa返回前端响应后，后台静默做其他操作
- 计算机毕业设计|计算机实战项目 含文档+PPT+源码等]精品基于Python实现的本地健康宝微信小程序
- JavaScript|使用JS+socket.io+WebRTC+nodejs+express搭建一个简易版远程视频聊天
- Node.js工程师养成计划某课含源码ppt
- Node.js|Mac如何彻底卸载Node含brew---kalrry
- node.js|计算机毕业设计node.js+vue在线日程管理系统
- HTML5|猿创征文 | 基于H5实现跨文档通信 & websocket
- vue|Vue项目的记录（四）