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

27次阅读

共计 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导入即可
  • 导入聊天记录表

    • 抉择 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. 获取 secretIdsecretKey

    • 创立好存储桶后,登录 棱束链集体核心,关上 性能设置 区域的 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

正文完
 0