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

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学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！