大家好，我是 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/#/

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