likes
comments
collection
share

vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用

作者站长头像
站长
· 阅读数 28
这是一款响应式开源的 web 即时聊天应用,该应用使用全新技术构建,前端使用 element-plus+ vue3 + vite + ts + pinia + socket.io + unocss 等开发,后端使用 nodejs + express + socket.io + express-jwt 等开发,数据库使用 mysql,可自定义聊天主题,支持图片、视频等文件发送,文件存储方面还支持对接兼容 AWS s3 的对象存储平台,只需修改相应配置即可将文件存储到对象存储,能够很方便的进行二次开发和集成,也很适合新手交流学习

项目地址

项目列表

客户端项目

  • chat-client 支持发送图片、视频、token权限登录,响应式聊天页面,可自定义主题,代码结构清晰、易上手

服务端项目

  • chat-service 支持 jwt 认证,聊天权限认证, s3 对象存储,提交数据校验等,代码结构清晰、易上手

数据库

  • chat-db

项目截图

vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用

vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用

vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用

vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用

功能列表

主功能功能说明web
登录jwt token 授权认证
注册发送自动获取验证码注册
消息提醒声音、弹窗提示
用户列表目前获取的是所有用户列表
切换主题可随心修改和切换主题
发送视频支持对象存储
发送表情动态、静态表情
发送图片、查看大图支持对象存储
标记未读消息自动标记

技术栈

前端描述学习网站
Vue3渐进式 JavaScript 框架https://v3.cn.vuejs.org/
TypeScriptJavaScript 的一个超集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 RouterVue.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 + express + socket.io 快速搭建响应式 web 即时聊天应用

  • 选择 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开启状态,即可获得密钥

vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用

  1. 获取 地域端点

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

    vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用

  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 即可,以下提供几个默认测试账号

浏览器支持

本地开发推荐使用 Chrome 80+ 浏览器

支持现代浏览器, 不支持 IE

转载自:https://segmentfault.com/a/1190000042081989
评论
请登录