Javascript

基于nodejs的网络聊天室实现

本文主要是介绍基于nodejs的网络聊天室实现,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、实验选题
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应用软件系统的开发,掌握软件设计的方法和面向对象程序设计的基本技术,提高学生在软件开发方面的综合应用能力。

三、总体设计(含背景知识或基本原理与算法、或模块介绍、设
计步骤等)

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技术在实时通信中的巨大优势,而且收获更多新知识。

这篇关于基于nodejs的网络聊天室实现的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!