vue3 + express + socket.io 快速搭建響應式 web 即時聊天應用

南風未了發表於2022-07-08
VueExpressWeb
這是一款響應式開源的 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

專案截圖

登入

聊天

專案截圖

專案截圖2

功能列表

主功能功能說明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檔案

匯入Mysql

  • 選擇 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. 獲取 secretId 和 secretKey

    • 建立好儲存桶後，登入 稜束鏈個人中心，開啟 功能設定 區域的 API開啟狀態，即可獲得金鑰

獲取稜束鏈金鑰

  1. 獲取 地域 和 端點

    • 登入 稜束鏈儲存桶列表，點選目標儲存桶右側的 配置 按鈕，即可在桶配置頁的桶資訊區域獲得相應桶的 地域 和 端點

    獲取稜束鏈地域和端點

  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

相關文章