当前位置: 首页 > news >正文

基于 Vue3 和 WebSocket 实现的简单网页聊天应用

首先附上项目介绍,后面详细解释技术细节


1. chat-websocket

一个基于Vue3和WebSocket的简易网络聊天室项目,包括服务端和客户端部分。
项目地址 websocket-chat
下面是项目的主要组成部分和功能:

项目结构

chat-websocket/
|-- server/ # WebSocket 服务端
|   |-- run.js	# 服务端
|   |-- DBManager.js	#数据库对象管理
|-- src/
|   |-- components/
|   |   |-- ...  # Vue 组件
|   |-- assets/
|   |   |-- ...  # 静态资源
|   |-- views/
|   |   |-- Home.vue  # 主要视图组件
|   |   |-- Login.vue  # 登录视图组件
|   |-- router/
|   |-- App.vue
|   |-- main.js
|-- public/
|-- README.md
|-- ...

功能特性

  • 私聊功能:用户可以选择联系人进行一对一私聊,发送即时消息。
  • 群聊功能:用户可以加入群组,与群组成员进行群聊。
  • 修改用户名:用户可以在界面上直接修改自己的用户名。
  • 显示在线(连接)状态
  • 重新连接: WebSocket 断开连接后,用户可以重新连接服务器, 重新连接后, 会加载之前的聊天记录

技术栈

  • 前端框架: 使用 Vue3 作为前端框架,Element Plus 用于 UI 组件。

  • 后端框架: 后端使用 Node.js + Mysql 实现,使用 WebSocket 库 ws 作为 WebSocket 服务端。

  • WebSocket: 实时通信使用 WebSocket 技术,保证消息的实时性。


上面是项目介绍,下面介绍细节

2. 整体设计思路

  1. 前端使用Vue框架,快速搭建聊天室的原型,同时为了美观,使用Element Plus 用于 UI 组件.
  2. 前端页面 包含登陆页面Login和聊天页面Home
  3. 实时通信使用 WebSocket 技术,客户端发送请求,服务端结合数据库进行返回.
  4. 服务端使用Session机制,记录sessions[clientId],增加定时器定时清除session,用于24H过期机制.
  5. 服务端直接使用ws库建立连接,同时使用DBManager操作数据库对象,完成数据处理和传输.
  6. 为了方便消息分类传输,定义消息对象,客户端和服务端共有相同的消息对象.
    消息对象
    一次简单的登陆到获取消息的流程如图:
服务端返回成功,设置session_id,24H后过期
websocket
进入页面直接建立websocket连接
登陆
聊天页面
点击用户或群组
从服务端得到对应消息列表

一次简单的发送和获取消息的流程如图:

服务端接收,保存消息到数据库,并根据用户和群组进行实时转发
用户A发送消息
用户B收到

3. 前端设计实现

3.1 页面设计实现

聊天室布局参考Element Plus提供的布局
在这里插入图片描述
其中头部展示用户信息状态, 左边是群组和用户选择, 主界面就是聊天界面,展示聊天信息.
最终成品如下:
在这里插入图片描述
一些细节解释

  1. 用户头像根据用户名自动生成,用到了ui组件.

在这里插入图片描述

  1. 可以显示用户当前连接状态,当链接断开后,可以重新连接.

  2. 聊天信息包含三要素: 时间, 用户名, 内容, 如图所示.通过v-if判断消息放在左边还是右边
    在这里插入图片描述

  3. 发送栏固定,且接收和发送消息后聊天窗口(列表)自动到达底部.
    在这里插入图片描述

3.2 登陆逻辑设计实现

进入页面后已经建立websocket连接,单击登陆后发送请求,若成功则接收到username,uid,session_id,这三个参数,直接以cookie的形式保存在本地.

在这里插入图片描述
后续进入页面,服务端都会 验证session,进行持久化访问.

3.3 聊天逻辑设计实现

  1. 前端共享使用相同的socket对象.

在这里插入图片描述
在这里插入图片描述

  1. 每次单击群组或用户,根据当前选择发送请求获取接收不同类型消息

    群组消息在这里插入图片描述
    用户消息
    在这里插入图片描述

  2. 还需要在进入页面后获取用户和群组列表进行初始化
    在这里插入图片描述

  3. 无论是接收到群组还是用户消息,直接放入相同的列表,因为两种消息只需要显示三要素即可,后面分别解析
    在这里插入图片描述

4. 后端设计实现

4.1 数据库设计实现

设计数据库包含如下表:
在这里插入图片描述

表名列名数据类型说明
USERuidINTEGER用户ID(主键,自增)
nameVARCHAR(255)用户名
passwordVARCHAR(255)用户密码
GROUPSgidINTEGER群组ID(主键,自增)
nameVARCHAR(255)群组名
GMESSAGEidINTEGER消息ID(主键,自增)
gidINTEGER群组ID
uidINTEGER发送消息的用户ID
gnameVARCHAR(255)群组名
textTEXT消息内容
UMESSAGEidINTEGER消息ID(主键,自增)
s_uidINTEGER发送消息的用户ID
r_uidINTEGER接收消息的用户ID
textTEXT消息内容
timeTIMESTAMP消息发送时间
GROUP_USERuidINTEGER用户ID
gidINTEGER群组ID

还有与各表对应的管理类:
在这里插入图片描述

各表分别继承管理类

在这里插入图片描述

这里使用 Promise 的方式可以更好地处理异步代码

4.2 服务端设计实现

  1. 导入所需的模块和类

    • entity.js: 包含了用户和消息的实体类定义。
    • DBManager.js: 包含了与数据库交互的相关类。
    • ws: WebSocket 模块。
    • 创建了一些表格和实体对象的实例,用于存储和管理用户、群组、消息等信息。
  2. 常量和变量定义

    • SESSION_EXPIRY_TIME: 定义了会话过期时间,以毫秒为单位,用于定期检查会话是否过期。
    • Ws: WebSocket 模块的别名。
    • clients: 存储WebSocket连接的对象。
    • sessions: 存储用户会话信息。
      在这里插入图片描述
  3. 初始化WebSocket服务器

    • 定义一些事件处理函数,如handleOpenhandleClosehandleConnection等。
    • handleConnection中,处理了用户连接时的事件,包括消息的处理。
      在这里插入图片描述
  4. 消息处理

    • handleMessage函数用于处理收到的消息。根据消息类型进行相应的操作,包括群组聊天、获取初始数据、私聊等。
    • 使用数据库表格对象(如groupTablegmessageTable等)进行消息的存储和查询。
    • 通过WebSocket向指定用户或群组发送消息。
      在这里插入图片描述
  5. 用户登录

    • 当收到类型为MessageType.MESSAGE_LOGIN的消息时,处理用户登录逻辑。
    • 检查用户是否存在于数据库中,若不存在则插入新用户。
    • 为用户分配一个唯一的会话ID,将用户信息存储在sessions对象中。
    • 向客户端发送登录成功消息,并携带用户信息和会话ID。
      在这里插入图片描述

sessions的保存形式如下:

                          sessions[clientId] = {uid: uid,username: msg.data.username,ws: this,creationTime: Date.now(),sessionID: clientId,};

定时器判断是否过期

在这里插入图片描述

5. 展示

群组聊天

在这里插入图片描述
在这里插入图片描述

私聊

在这里插入图片描述

在这里插入图片描述

5. 小结

孟宁老师上课旁征博引,时不时与同学们互动 (指让同学们发数字),无论是前端网络编程,网络协议RPC,还是Linux内核网络协议栈,似乎都信手拈来,相信如果认真听课,加上自己的钻研,绝对受益匪浅.

对于这门课程,完全可以说是师傅领进门,修行看个人了,我们深入其中某个方向,也会有所建树.

此前只是接触过JS和Vue,并未熟练掌握它们,这次由于课程原因,尝试完全使用JS作为前后端代码,没有使用熟悉的Python和Java来构建后端,算是对自己的一次挑战.幸好有chatgpt在细节上的协助,结合各类组件丰富的文档,完成了这次项目.

相关文章:

基于 Vue3 和 WebSocket 实现的简单网页聊天应用

首先附上项目介绍,后面详细解释技术细节 1. chat-websocket 一个基于Vue3和WebSocket的简易网络聊天室项目,包括服务端和客户端部分。 项目地址 websocket-chat 下面是项目的主要组成部分和功能: 项目结构 chat-websocket/ |-- server/ # WebSocket 服…...

【MYSQL】MYSQL 的学习教程(八)之 12 种慢 SQL 查询原因

日常开发中,我们经常会遇到数据库慢查询。那么导致数据慢查询都有哪些常见的原因呢?今天就跟大家聊聊导致 MySQL 慢查询的 12 个常见原因,以及对应的解决方法: SQL 没加索引SQL 索引失效limit 深分页问题单表数据量太大join 或者…...

C语言例题3

1.设x、y、z和k都是int型变量,则执行表达式:x(y4,z16,k32)后,x的值为(32); x(y4,z16,k32),x的值为32 理解逗号运算符在c语言中的工作方式:逗号运算…...

很实用的ChatGPT网站——httpchat-zh.com

很实用的ChatGPT网站——http://chat-zh.com/ 今天介绍一个好兄弟开发的ChatGPT网站,网址[http://chat-zh.com/]。这个网站功能模块很多,包含生活、美食、学习、医疗、法律、经济等很多方面。下面简单介绍一些部分功能与大家一起分享。 登录和注册页面…...

Python函数中的*args,**kwargs作用与用法

前言 最近在使用Python函数的时候,经常碰见函数中使用*args、**kwargs,而且参数的传递也是非常奇特,就特意对Python函数中*args、**kwargs进行了查询,下面就以实例进行说明。 1 Python中的*args、**kwargs 在 Python 中&#x…...

python可视化界面自动生成,python如何做可视化界面

大家好,小编来为大家解答以下问题,python gui可视化操作界面制作,python做出的炫酷的可视化,现在让我们一起来看看吧! 目录 前言 一.环境配置 插件: 1.python 2.Chinese 3.Open In Default Browser 安装pyt…...

力扣热题100道-双指针篇

文章目录 双指针283.移动零11.盛最多水的容器15.三数之和42.接雨水 双指针 283.移动零 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 …...

数据库一般会采取什么样的优化方法?

数据库一般会采取什么样的优化方法? 1、选取适合的字段属性 为了获取更好的性能,可以将表中的字段宽度设得尽可能小。 尽量把字段设置成not null 执行查询的时候,数据库不用去比较null值。 对某些省份或者性别字段,将他们定义为e…...

编程笔记 html5cssjs 015 HTML列表

编程笔记 html5&css&js 015 HTML列表 一、有序列表例1&#xff1a;例2&#xff1a; 二、无序列表例1&#xff1a;例2&#xff1a; 列表是一种特定文字格式&#xff0c;很常用。 HTML 列表。HTML 支持有序、无序和定义列表。 一、有序列表 例1&#xff1a; <!DOCTY…...

【力扣题解】P404-左叶子之和-Java题解

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【力扣题解】 文章目录 【力扣题解】P404-左叶子之和-Java题解&#x1f30f;题目描述&#x1f4a1;题解&#x1f30f;总结…...

elasticsearch 索引数据多了怎么办,如何调优,部署

当Elasticsearch索引的数据量增加时&#xff0c;可能会遇到性能瓶颈&#xff0c;需要进行调优。以下是一些建议和步骤&#xff0c;可帮助你处理数据量增加的情况&#xff1a; 1. 硬件升级&#xff1a; 增加节点数或升级硬件&#xff0c;包括更快的CPU、更大的内存和更快的存储…...

Spring Cloud Gateway之Predicate断言详解

目录 Predicate&#xff08;断言&#xff09;内置Predicate请求参数匹配请求路径匹配Header 属性匹配Cookie 匹配请求方式匹配请求 ip 地址匹配时间匹配组合匹配 Predicate&#xff08;断言&#xff09; 在 Spring Cloud Gateway 中&#xff0c;Predicate&#xff08;断言&…...

JavaScript中的prototype和_proto_的关系是什么

JavaScript中的prototype和_proto_的关系是什么 __proto__ 是 JavaScript 中对象的一个内部属性&#xff0c;它指向该对象的原型。JavaScript 中每个对象都有一个 __proto__ 属性&#xff0c;通过它可以访问对象的原型。prototype 是函数对象特有的属性&#xff0c;每个函数都…...

机器学习(二) -- 数据预处理(3)

系列文章目录 未完待续…… 目录 前言 tips&#xff1a;这里只是总结&#xff0c;不是教程哈。本章开始会用到numpy&#xff0c;pandas以及matplotlib&#xff0c;这些就不在这讲了哈。 “***”开头的是给好奇心重的宝宝看的&#xff0c;其实不太重要可以跳过。 此处以下所有…...

【数学建模美赛M奖速成系列】Matplotlib绘图技巧(三)

Matplotlib绘图技巧&#xff08;三&#xff09; 写在前面7. 雷达图7.1 圆形雷达图7.2 多边形雷达图 8. 极坐标图 subplot9. 折线图 plot10. 灰度图 meshgrid11. 热力图11.1 自定义colormap 12. 箱线图 boxplot 写在前面 终于更新完Matplotlib绘图技巧的全部内容&#xff0c;有…...

手写Spring与基本原理--简易版

文章目录 手写Spring与基本原理解析简介写一个简单的Bean加载容器定义一个抽象所有类的BeanDefinition定义一个工厂存储所有的类测试 实现Bean的注册定义和获取基于Cglib实现含构造函数的类实例化策略Bean对象注入属性和依赖Bean的功能Spring.xml解析和注册Bean对象实现应用上下…...

EasyNTS端口穿透服务新版本发布 0.8.7 增加隧道流量总数记录,可以知晓设备哪个端口耗费流量了

EasyNTS上云平台可通过远程访问内网应用&#xff0c;包含网络桥接、云端运维、视频直播等功能&#xff0c;极大地解决了现场无固定IP、端口不开放、系统权限不开放等问题。平台可提供一站式上云服务&#xff0c;提供直播上云、设备上云、业务上云、运维上云服务&#xff0c;承上…...

python自动合计各部周销

下载依赖 pip install openpyxl -i https://pypi.doubanio.com/simplepip install pandas -i https://pypi.doubanio.com/simple引入依赖 from openpyxl import load_workbook from openpyxl import styles from openpyxl.styles import * import pandas as pd import string…...

Java内存区域与内存溢出异常

Java与C++之间有一堵由内存分配和垃圾收集技术所围成的高墙,墙外面的人想进去,墙里面的人却想出来。 2.1 概述 对于从事C、C++程序开发的开发人员来说,在内存管理领域,他们即是拥有最高权力的“皇帝”,又是从事最基础工作的劳动人民——即拥有每一个对象的“所有权”,又…...

远程网络唤醒家庭主机(openwrt设置)

远程网络唤醒家庭主机&#xff08;openwrt设置&#xff09; 前提&#xff1a; 1.配置好主板bios的网络唤醒功能(网络教程自己百度一下找) 2.电脑开启网络唤醒功能(网络教程自己百度一下找) 3.路由器通过ddns实现域名和动态IP绑定内网穿透方法汇总_不修改光猫进行内网穿透-C…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...