乐趣区

关于前端:vue3-express-socketio-快速搭建响应式-web-即时聊天应用

jiezi

这是一款响应式开源的 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导入即可

  • 导入聊天记录表

    • 抉择 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 官网理解下

  1. 创立存储桶 – 官网教程

  2. 获取 secretId 和 secretKey

    • 创立好存储桶后，登录 棱束链集体核心，关上 性能设置 区域的 API 开启状态，即可取得密钥

  3. 获取 地区 和 端点

    • 登录 棱束链存储桶列表，点击指标存储桶右侧的 配置 按钮，即可在桶配置页的桶信息区域取得相应桶的 地区 和 端点

  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

退出移动版