vue3 + express + socket.io quickly build a responsive web instant chat application

This is a responsive open source web instant chat application built with new technology, front-end using element-plus + vue3 + vite + ts + pinia + socket.io + unocss开发， nodejs + express + socket.io + express-jwt and other development, the database uses mysql , can customize the chat theme, support the sending of pictures, videos and other files, and the file storage also supports docking compatible with AWS s3 It only needs to modify the corresponding configuration to store files in the object storage platform, which can easily carry out secondary development and integration, and is also very suitable for novice communication and learning.

project address

• gitee: https://gitee.com/lingshulian/vue3-socket-chat
• github: https://github.com/lingshulian/vue3-socket-chat

project list

client project

• chat-client supports sending pictures, videos, token permissions to log in, responsive chat page, customizable themes, clear code structure, easy to use

server project

• chat-service supports jwt authentication, chat authority authentication, s3 object storage, submitted data verification, etc. The code structure is clear and easy to use

database

• chat-db

Project screenshot

function list

main function	Function Description	web
Log in	jwt token authorization authentication	√
register	Send automatic verification code registration	√
message notification	Sound, pop-up prompt	√
user list	Currently getting a list of all users	√
switch themes	Modify and switch themes at will	√
send video	Support for object storage	√
send emoji	Dynamic and static expressions	√
Send pictures, view larger pictures	Support for object storage	√
Mark unread messages	auto-tagging	√

technology stack

front end	describe	learning website
vue3	Progressive JavaScript Framework	https://v3.cn.vuejs.org/
TypeScript	A superset of JavaScript	https://www.tslang.cn/
Vite	Front-end development and build tools	https://cn.vitejs.dev/
Element Plus	Based on Vue 3, a component library for designers and developers	https://element-plus.gitee.io/zh-CN/
Pinia	A new generation of state management tools	https://pinia.vuejs.org/
Vue Router	Official routes for Vue.js	https://router.vuejs.org/zh/
Uno css	Instant on-demand atomic CSS engine	https://github.com/unocss/unocss

rear end	describe	learning website
express	Based on the Node.js platform, a fast, open and minimalist web development framework	https://www.expressjs.com.cn/
socket.io	Supports timely, two-way and event-based communication	https://socket.io/

Environmental preparation

• Server: node.js (version recommendation: >= v14.17.3), s3 compatible object storage (used to store pictures, videos and other files)
• Web side: node.js (version recommendation: >= v14.17.3)
• Database: mysql (version recommendation: >= v8.0, you can import sql files)

pull project

 git clone https://gitee.com/lingshulian/vue3-socket-chat

base directory

 vue3-socket-chat     
├──chat-client    // web端项目
├──chat-service   // 服务端项目
├──chat-db        // 数据库

Startup project

web side

Using the method of importing components, css, and icons on demand for construction may take a long time to compile at the first run, but this method can not only improve the development efficiency, but also greatly reduce the size of the project after packaging, which is a good development method.

• Enter the web directory

 cd vue3-socket-chat/chat-client

• Install dependencies

 npm install

• run the project

 npm run dev

• Packaged project (dynamic expressions account for more than 14M, and the code volume is less than 1M)

 npm run build

database

Here we use the MySQL Front import data table, you can import the corresponding data table according to your usage habits

• Create and connect to the database

• import user table

  • Enter MySQL Front and select 文件 -> 导入 ->SQL文件

• Select vue3-socket-chat/chat-db/user.sql Import

• Import chat history table

  • Select vue3-socket-chat/chat-db/chat.sql to import

Server

• Enter the server project

 cd vue3-socket-chat/chat-service

• Install dependencies

 npm install

• configuration database

Enter vue3-socket-chat/chat-service/config.js to configure the following

 // 数据库配置
  dbConfig: {
      host: "localhost", 
      user: "lingshulian", // 数据库登录用户
      password: "lingshulian.com", // 数据库登录密码
      database: "lingshulian" // 数据库名称
  }

• Configure Object Storage (skip this step without sending files)

The storage platform used by the project is Prism Chain Object Storage . The biggest advantage of this storage platform is its low storage cost. Both storage space and usage traffic are far lower than all object storage platforms in the market. During the event, the object storage space is as low as 0.06元/GB , the flow rate is as low as 0.05元/GB , with stable and reliable storage capacity, fast transmission speed, and free flow for overseas transmission, it is the best choice for webmasters, enterprises and individuals. If you are interested, please click www.lingshulian.com official website to understand

1. Create a Bucket - Official Tutorial

2. Get secretId and secretKey

   • After the bucket is created, log in to the Prism Chain personal center and open API开启状态 in the function setting area to get the key

3. Get 地域 and 端点

   • Log in to the Prismatic Chain bucket list , click the 配置 button on the right side of the target bucket, you can get the corresponding buckets 地域 and 端点 in the bucket information area of the bucket configuration page 端点

   

 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" // 上述创建的存储桶
  }

• start the service

 node app.js

test

Open the browser and enter http://localhost:3000 . Several default test accounts are provided below.

• Account: [e-mail] , password: 123456
• Account: [e-mail] , Password: 123456
• Account: [e-mail] , password: 123456

Browser support

Recommended for local development Chrome 80+ Browser

Modern browsers are supported, IE is not supported