一款極簡的聊天應用

Java陈序员發表於2024-04-30

大家好，我是 Java陳序員。

今天，給大家介紹一個開源的聊天應用程式，支援PC端和移動端。

關注微信公眾號：【Java陳序員】，獲取開源專案分享、AI副業分享、超200本經典計算機電子書籍等。

專案介紹

HasChat —— 一個基於 Vue3 + Socket.io 的聊天應用，同時支援PC端和移動端。

功能特性：

技術棧：

  • PC 網頁版前端：Vue3 + Vite + TypeScript + Pinia + Naive UI + Socket.io
  • 移動版前端：uni-app + Socket.io
  • 後端：Express.js

專案預覽

PC 網頁端

移動端






本地部署

環境準備：

  • Node.Js 15+
  • Mysql 5.7.0+

1、拉取程式碼

  • 前端PC端
git clone https://gitee.com/howcode/has-chat.git
  • 前端移動端
git clone https://gitee.com/howcode/has-chat-app.git
  • 後端 MySQL 版本
git clone -b main https://gitee.com/howcode/has-chat-service.git
  • 後端 Json 版本
git clone -b master https://gitee.com/howcode/has-chat-service.git

2、安裝依賴

npm install

由於後端是基於 Express.js 開發，因此也要安裝依賴。

3、初始化資料庫（MySQL版本）

執行後端專案 store 資料夾下的 sql 檔案，並修改 config.js 檔案中的資料庫配置。

const db = mysql.createConnection({
  host: "", // 主機地址 （預設：localhost）
  user: "", // 使用者名稱
  password: "", // 密碼
  database: "", // 資料庫
});

4、配置郵箱（MySQL版本）

修改 config.js 檔案中的資料庫配置。

emailConfig: { //郵箱配置
    host: "smtp.qq.com",//郵箱伺服器  這裡我用的QQ郵箱
    port: 465,//郵箱使用埠
    secure: true,//是否使用預設的465埠
    auth: {
      user: "", // 傳送方郵箱地址
      pass: "" // smtp 驗證碼
    }
  }

5、啟動專案

  • 啟動前端
npm run dev
  • 啟動後端
node app.js

最後

推薦的開源專案已經收錄到 GitHub 專案，歡迎 Star：

https://github.com/chenyl8848/great-open-source-project

或者訪問網站，進行線上瀏覽：

https://chencoding.top:8090/#/

大家的點贊、收藏和評論都是對作者的支援，如文章對你有幫助還請點贊轉發支援下，謝謝！

相關文章