当前位置：首页 > 文章列表 > 数据库 > MySQL > vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用

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

来源：SegmentFault 2023-01-12 11:56:57 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用》，聊聊MySQL、前端、Node.js、typescript、element-ui，我们一起来看看吧！

这是一款响应式开源的 web 即时聊天应用，该应用使用全新技术构建，前端使用
git clone https://gitee.com/lingshulian/vue3-socket-chat
基本目录
cd vue3-socket-chat/chat-client
安装依赖
npm install
运行项目
npm run dev
打包项目（动态表情占14M多，代码体积不到1M)
npm run build
数据库
这里我们使用的是
cd vue3-socket-chat/chat-service
安装依赖
npm install
配置数据库
进入
// 数据库配置
  dbConfig: {
      host: "localhost", 
      user: "lingshulian", // 数据库登录用户
      password: "lingshulian.com", // 数据库登录密码
      database: "lingshulian" // 数据库名称
  }
配置对象存储（不使用发送文件功能可跳过该步骤）
项目所使用的存储平台为棱束链对象存储，该存储平台最大的优点就是存储成本低，不管是存储空间还是使用流量都远低于市场所有对象存储平台，活动期间对象存储空间低至
  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
今天关于《vue3 + express + socket.io 快速搭建响应式 web 即时聊天应用》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！