共计 2815 个字符,预计需要花费 8 分钟才能阅读完成。
这是一款响应式开源的 web 即时聊天利用,该利用应用全新技术构建,前端应用
element-plus
+vue3
+vite
+ts
+pinia
+socket.io
+unocss
等开发,后端应用nodejs
+express
+socket.io
+express-jwt
等开发,数据库应用mysql
,可自定义聊天主题,反对图片、视频等文件发送,文件存储方面还反对对接兼容 AWS s3 的对象存储平台,只需批改相应配置即可将文件存储到对象存储,可能很不便的进行二次开发和集成,也很适宜老手交流学习
我的项目地址
- gitee:https://gitee.com/lingshulian/vue3-socket-chat
- github:https://github.com/lingshulian/vue3-socket-chat
我的项目列表
客户端我的项目
- chat-client 反对发送图片、视频、token 权限登录,响应式聊天页面,可自定义主题,代码构造清晰、易上手
服务端我的项目
- chat-service 反对 jwt 认证,聊天权限认证,s3 对象存储,提交数据校验等,代码构造清晰、易上手
数据库
- chat-db
我的项目截图
性能列表
主性能 | 性能阐明 | web |
---|---|---|
登录 | jwt token 受权认证 | √ |
注册 | 发送主动获取验证码注册 | √ |
音讯揭示 | 声音、弹窗提醒 | √ |
用户列表 | 目前获取的是所有用户列表 | √ |
切换主题 | 可随心批改和切换主题 | √ |
发送视频 | 反对对象存储 | √ |
发送表情 | 动静、动态表情 | √ |
发送图片、查看大图 | 反对对象存储 | √ |
标记未读音讯 | 主动标记 | √ |
技术栈
前端 | 形容 | 学习网站 |
---|---|---|
Vue3 | 渐进式 JavaScript 框架 | https://v3.cn.vuejs.org/ |
TypeScript | JavaScript 的一个超集 | https://www.tslang.cn/ |
Vite | 前端开发与构建工具 | https://cn.vitejs.dev/ |
Element Plus | 基于 Vue 3,面向设计师和开发者的组件库 | https://element-plus.gitee.io/zh-CN/ |
Pinia | 新一代状态管理工具 | https://pinia.vuejs.org/ |
Vue Router | Vue.js 的官网路由 | https://router.vuejs.org/zh/ |
Uno css | 即时按需原子 CSS 引擎 | https://github.com/unocss/unocss |
后端 | 形容 | 学习网站 |
---|---|---|
express | 基于 Node.js 平台,疾速、凋谢、极简的 Web 开发框架 | https://www.expressjs.com.cn/ |
socket.io | 反对及时、双向与基于事件的交换 | https://socket.io/ |
环境筹备
- 服务端:node.js(版本倡议:>= v14.17.3)、兼容 s3 的对象存储(用于存储图片、视频等文件)
- web 端:node.js(版本倡议:>= v14.17.3)
- 数据库:mysql(版本倡议:>= v8.0,可导入 sql 文件即可)
拉取我的项目
git clone https://gitee.com/lingshulian/vue3-socket-chat
根本目录
vue3-socket-chat
├──chat-client // web 端我的项目
├──chat-service // 服务端我的项目
├──chat-db // 数据库
启动我的项目
web 端
采纳按需导入组件、css、icon 的形式进行构建,首次运行时编译工夫可能较长,但该形式不仅可能进步开发效率,在打包后还可能大大减少我的项目体积,是一种很好的开发方式
- 进入 web 端目录
cd vue3-socket-chat/chat-client
- 装置依赖
npm install
- 运行我的项目
npm run dev
- 打包我的项目(动静表情占 14M 多,代码体积不到 1M)
npm run build
数据库
这里咱们应用的是 MySQL Front
导入数据表,具体可依据您的应用习惯来导入相应数据表
- 创立并连贯好数据库
-
导入用户表
- 进入 MySQL Front 抉择
文件 -> 导入 ->SQL 文件
- 抉择
vue3-socket-chat/chat-db/user.sql
导入即可
- 进入 MySQL Front 抉择
-
导入聊天记录表
- 抉择
vue3-socket-chat/chat-db/chat.sql
导入即可
- 抉择
服务端
- 进入服务端我的项目
cd vue3-socket-chat/chat-service
- 装置依赖
npm install
- 配置数据库
进入 vue3-socket-chat/chat-service/config.js
进行如下配置
// 数据库配置
dbConfig: {
host: "localhost",
user: "lingshulian", // 数据库登录用户
password: "lingshulian.com", // 数据库登录明码
database: "lingshulian" // 数据库名称
}
- 配置对象存储(不应用发送文件性能可跳过该步骤)
我的项目所应用的存储平台为 棱束链对象存储,该存储平台最大的长处就是存储成本低,不论是存储空间还是应用流量都远低于市场所有对象存储平台,流动期间对象存储空间低至
0.06 元 /GB
,流量更是低至0.05 元 /GB
,领有稳固牢靠的存储能力,传输速度快,而且境外传输免流,是各大站长、企业、集体不二之选,有趣味的话可戳 www.lingshulian.com 官网理解下
- 创立存储桶 – 官网教程
-
获取
secretId
和secretKey
- 创立好存储桶后,登录 棱束链集体核心,关上 性能设置 区域的
API 开启状态
,即可取得密钥
- 创立好存储桶后,登录 棱束链集体核心,关上 性能设置 区域的
-
获取
地区
和端点
- 登录 棱束链存储桶列表,点击指标存储桶右侧的
配置
按钮,即可在桶配置页的桶信息区域取得相应桶的地区
和端点
- 登录 棱束链存储桶列表,点击指标存储桶右侧的
s3Config: {
config: {
credentials: {
accessKeyId: 'ff6c3c04ea43b9811ef1f9132a5a05fe', // 上述获取的 secretId
secretAccessKey: 'e0a4095791261062f478767c60fdc9684f21524a0b5f9f0f4c2e0d39cecb6ba4' // 上述获取的 secretKey
},
endpoint: 'https://s3-us-east-1.ossfiles.com', // https:// + 上述获取的的端点
region: 'us-east-1' // 上述获取的地区
},
path: 'chat', // 上传的目录,可自定义
bucket: "lingshuliantest" // 上述创立的存储桶
}
- 启动服务
node app.js
测试
关上浏览器输出 http://localhost:3000 即可,以下提供几个默认测试账号
- 账号:123@lingshulian.com,明码:123456
- 账号:456@lingshulian.com,明码:123456
- 账号:789@lingshulian.com,明码:123456
浏览器反对
本地开发举荐应用 Chrome 80+
浏览器
反对古代浏览器, 不反对 IE