easyQQ

??項目基本介紹

easyQQ是基于electron(vue2)和nodejs實現的簡單聊天軟件,其中用websocket和http進行通訊傳遞,數據庫使用了mysql數據庫,該項目功能簡單,界面簡潔,每個功能都會添加相應的邏輯

🧧 作者自己的配置環境

數據庫

nodejs

npm

🧨 部分用戶遇到的問題

雙擊chat.exe出現閃退

這里大概率就是你的數據庫配置有問題,你需要去修改config.json將里面的內容修改成你自己mysql的配置信息

啟動項目出現問題

問題分析

數據庫配置出現錯誤

問題解決方案

檢測當前目錄下的config.json文件,看數據庫配置是否與自己的本機的數據庫配置一致

數據庫無法連接

問題分析

可能用戶新裝的mysql,沒有設置數據庫訪問權限

問題解決方案

1. 進入到你的數據庫

mysql -u root -p

2. 輸入以下命令

use mysql;
update user set Host="%" where User="root";
flush privileges;
exit;

3. 使用連接工具嘗試連接mysql數據庫(navicat)

mysql8后端無法連接成功,navicat能連接？

問題分析

MySQL 8 默認情況下不允許使用舊的身份驗證插件，而某些 Node.js MySQL 驅動程序（例如 mysql 模塊）可能仍在使用這些插件。如果您遇到這個問題，可以在 MySQL 8 中啟用舊的身份驗證插件。您可以使用以下命令在 MySQL 8 中啟用舊的身份驗證插件：

解決方案

1. 進入到你的數據庫

mysql -u root -p

2. 輸入以下命令

use mysql;
update user set Host="%" where User="root";
ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '你的密碼';
flush privileges;
exit;

前端安裝依賴出現問題

問題分析

這個是因為沒有管理員權限

解決方案

在win+S搜索框輸入cmd或者powershell后，右鍵以管理員身份運行

electron安裝報錯？

問題分析

報錯信息提到用了淘寶鏡像，復制url到瀏覽器，這個鏡像已經找不到了

解決方案

將鏡像換為electron官方鏡像，運行如下3行代碼

npm config delete ELECTRON_CUSTOM_VERSION
npm config delete ELECTRON_MIRROR
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

后端安裝依賴出現問題(node-gyp)

問題分析

node-pty需要python依賴,這個只能根據錯誤去一個一個查找問題

問題解決方案

錯誤可忽略,不影響程序運行

前端依賴安裝成功結果

后端依賴安裝成功結果

🧨項目目前存在的問題

• 目前視頻通話存在畫質模糊問題
• 如果想使用需要將chat.exe放在windows上運行
• 還沒有實現文件斷點續傳功能
• 與new bing的AI對話功能未實現

🥑已修復的bug

1. 文件下載出現了白屏
2. 聊天框沒有置底

👻注意事項

1. 打開軟件第一時間修改服務器地址

格式必須為https://你的ip地址

🎉已完成功能

• 登錄賬號
• 修改服務器地址
• 注冊賬號
• 忘記密碼
• 查詢好友和群聊
• 添加好友和群聊
• 一對一聊天
• 發送表情包,圖片,文字,文件(50mb以內)
• 支持一對一語音通話,一對一視頻通話
• 群聊
• 修改好友備注
• 邀請好友進入群聊
• 群視頻

🖼? 項目截圖

🪵前端框架和技術介紹

前端主要是由vue2和electron配合elementuiUI框架實現的頁面

vue2

Vue.js是一款流行的前端JavaScript框架，它由尤雨溪(Yuxi You)開發并維護，第一個版本發布于2014年2月。Vue.js 的目標是通過盡可能簡單的 API 實現響應式的數據綁定和組合視圖組件。

Vue.js的核心庫只關注視圖層，易于上手，同時也可以輕松與其他第三方庫或現有項目集成。Vue.js 可以通過簡單的模板語法和可重用組件來實現快速開發，它也支持許多高級特性，例如計算屬性、指令、路由、狀態管理等。

Vue.js在2016年發布了Vue.js 2.0版本，Vue.js 2.x的性能得到了很大提升，并增加了許多新特性。Vue.js 2.x使用虛擬DOM（Virtual DOM）進行高效的DOM更新，還支持服務端渲染（SSR）和單文件組件（SFC）等功能。Vue.js 2.x也提供了更好的TypeScript支持，使得開發更加友好。

Vue.js還有一些周邊生態，例如Vue Router、Vuex、Vue CLI、Vue Devtools等，這些庫可以進一步擴展Vue.js的功能和性能，以提高開發效率。

electron

Electron（前身為Atom Shell）是由 GitHub 開發的一款跨平臺桌面應用程序開發框架，它基于 Chromium 和 Node.js 構建，允許開發者使用 web 技術（如 HTML、CSS 和 JavaScript）構建原生的跨平臺桌面應用程序。Electron 的目標是讓開發人員使用簡單的前端技術構建跨平臺桌面應用程序，并且可以像開發網頁一樣進行調試。

Electron 采用了多進程架構，應用程序主進程使用 Node.js 運行，用于管理應用程序的生命周期和處理系統級別的操作，如菜單、對話框、剪貼板等。而渲染進程則是一個 Chromium 瀏覽器實例，用于渲染應用程序的 UI。

Electron 提供了豐富的 API 和開發工具，例如可以通過 Electron-Builder、Electron-Packager 等工具將應用程序打包成可執行文件，并支持跨平臺發布和自動更新。此外，Electron 還支持許多第三方模塊和插件，如 Spectron、electron-devtools-installer、electron-store 等，用于進一步擴展應用程序的功能。

Electron 已經被廣泛應用于許多知名的跨平臺應用程序，如 Visual Studio Code、GitHub Desktop、Slack、Atom、Discord 等。

elementui

Element UI 是一款基于 Vue.js 2.0 的桌面端組件庫，由餓了么前端團隊開發并維護。它提供了豐富的 UI 組件，包括表單、表格、彈窗、菜單、導航等，可以滿足大部分企業級應用的 UI 需求。

Element UI 設計風格簡潔、美觀，同時還具備響應式設計，可以適應不同屏幕尺寸的設備。Element UI 的組件可高度定制，允許通過修改主題、樣式、屬性等實現自定義的外觀和功能。

Element UI 還提供了豐富的文檔和示例，便于開發人員快速學習和上手，同時也提供了豐富的 API 文檔和源代碼，方便開發者進行二次開發和定制。

除了 Vue.js，Element UI 還支持其他常用的前端框架，例如 React、Angular 等，可以與這些框架輕松集成。Element UI 是一款開源的組件庫，采用 MIT 許可證，可以在任何商業和非商業項目中免費使用。

目錄介紹

核心文件介紹

components的vueImageVerify.vue

這個文件主要是生成驗證碼圖片

utils的cookie.js

這個文件主要是幫你存儲你的登錄信息,個人信息到緩存里

utils的file.js

這個文件主要是獲取從一個url里獲取文件名和判斷你的文件類型是圖片還是zip或者其他的

utils的request.js

這個文件主要就是向后端發送請求并獲取相應的數據,axios

views的Login

這個目錄核心就是負責登錄,注冊,忘記密碼,修改服務器地址,代碼基本上一樣,如果看懂其中一個頁面其他頁面的代碼基本上就都看懂了,以下是實現登錄的核心邏輯,簡單吧!!

views的index目錄

這個目錄偏核心一點,主要就是我們登錄后的界面,界面主要分為三大塊,側邊欄,列表欄,聊天欄,側邊只會影響列表欄并不會影響聊天欄

前端邏輯

1. 用戶打開應用后,頁面具有四個功能,登錄,注冊,找回密碼,設置服務器地址,二個次要功能自動登錄和記住密碼,填入正確的用戶名和密碼后會直接跳轉到首頁,如果填入失敗則會提示響應的錯誤

2. 登錄成功或者注冊成功后,我們將進入到主頁面,主頁面主要由側邊欄,列表欄,聊天欄組成,側邊欄主要可以進行個人信息的修改,選擇聊天和聯系人,當我們點擊其中一個圖片,我們會進行相對于的tag修改,然后通過vue的路由跳轉實現響應的界面展示

3. 當我們選擇一個好友時,我們獲取房間號和好友名稱來建立一個websocket,后端會發送所有與之相關的所有歷史記錄,前端會根據消息的類型來進行相對應的展示,(音視頻記錄不會展示,可以做但是不想做😼😼😼),當發送或接收一條消息會自動更新列表欄的數據

   

后端項目

后端主要是由nodejs配合express和express-ws實現簡單的后端搭建,通過mysql對數據的存儲,代碼已經實現創建各個表,無需執行sql文件,代碼簡單且邏輯基本上類似

nodejs

Node.js是一個基于Chrome V8引擎的JavaScript運行時環境，使JavaScript可以在服務器端運行。Node.js采用事件驅動、非阻塞I/O模型，因此可以處理大量并發連接，且處理速度快、性能高。Node.js的模塊化設計使得開發者可以方便地組織代碼和管理依賴項。

Node.js最初由Ryan Dahl在2009年開發，目的是構建高性能、可擴展的網絡應用程序。Node.js的優點在于可以使用JavaScript編寫服務器端代碼，并且可以方便地與前端JavaScript框架進行集成，如React、Angular、Vue.js等。

Node.js擁有豐富的內置庫和第三方模塊，可用于構建Web應用程序、命令行工具、網絡服務器、流處理應用程序等。Node.js提供了許多有用的工具和工具庫，如npm、Express、Socket.IO等，使得開發和維護應用程序變得更加輕松和高效。

Node.js具有跨平臺的特性，可在Windows、Linux、macOS等不同操作系統上運行。由于其強大的性能和便捷的開發體驗，Node.js被越來越多的開發者和企業所采用，并且在大型公司和開源社區中得到了廣泛的應用。

express

Express是一個流行的基于Node.js的Web應用程序框架，提供了一組簡單的API，可以幫助開發者更快地構建Web應用程序。Express采用MVC（模型-視圖-控制器）的軟件設計模式，使得開發者可以將應用程序的邏輯、數據和UI分離開來，從而使得代碼更加模塊化和易于維護。

Express框架提供了許多有用的功能和中間件，如路由、模板引擎、HTTP工具、數據庫集成等，可幫助開發者快速構建Web應用程序。同時，Express也是高度可定制的，允許開發者根據需求自定義中間件和插件，以滿足特定的開發需求。

Express非常流行，因為它具有簡單、輕量級、易于學習的特點，同時也可以通過第三方模塊擴展其功能，例如body-parser、cookie-parser、multer等。Express也被廣泛應用于許多開源項目和企業級應用程序中，包括GitHub、PayPal、IBM等。

express-ws

Express-ws是一個基于Express框架的WebSocket插件，用于在Express應用程序中添加WebSocket功能。WebSocket是一種網絡協議，允許客戶端和服務器之間進行雙向通信，可以在Web應用程序中實現實時數據傳輸和通信。

Express-ws提供了WebSocket相關的API，可幫助開發者快速添加WebSocket功能，同時也與Express的中間件機制兼容，使得WebSocket和HTTP請求可以在同一應用程序中共存。使用Express-ws，開發者可以在Express應用程序中實現實時通信、在線游戲、聊天室等功能。

Express-ws支持標準的WebSocket協議和Socket.IO協議，可以通過簡單的API進行配置和使用。Express-ws也可以與其他Express中間件和插件集成，例如Express-session、Passport等，以實現更加復雜的功能。

總的來說，Express-ws是一個非常有用的工具，使得在Express應用程序中添加WebSocket功能變得更加容易和快速，可以大大提高Web應用程序的實時通信能力。

目錄介紹

🎙?WebRTC

代碼邏輯

1. 邀請人先創建麥克風并初始化PC源

2. 發送創建房間的指令到當前房間,后端接受到指令后,給當前房間的所有用戶發送響應的指令

3. 被邀請人點擊同意后,獲取自己的視頻流,初始化PC源,PC添加音視頻流,創建offer,獲取自己的音視頻流,并通過setLocalDescription函數存儲自己的音視頻流,并發送new_peer指令(攜帶自己的音視頻)告訴房間的人,我要進入房間
   

4. 邀請人接收到有新人進入房間,則發送視頻流和offer指令給新人

5. 新人接受到對方同意的指令后,將對方的音視頻流通過setRemoteDescription函數進行存儲,存儲完后新人創建answer來獲取自己的音視頻流,通過setLocalDescription函數存儲自己的音視頻流,并發送answer指令(攜帶自己的音視頻)告訴對方要存儲邀請人的音視頻
   

6. 設置邀請方發來的音頻源

6.雙方建連成功后,會相互發送ice_candidate,我們需要將其發送給雙方

7.雙方收到后,addIceCandidate添加到pc中

8. 如何驗證成功了,一般是查看pc.onaddstream是否監聽到數據,如果有大概率就是ok的

🕹?數據庫

用戶表(user)

這是一個MySQL數據庫中的用戶表，其中包含以下字段：

• id：用戶ID，用于標識每個用戶，是自動增加的整數類型。
• username：用戶名，必填字段，用于登錄和身份驗證，是一個長度為255的字符串，使用utf8mb4編碼和Unicode排序規則，使用B樹索引來保證唯一性。
• password：用戶密碼，必填字段，用于登錄驗證，是一個長度為255的字符串，使用utf8mb4編碼和Unicode排序規則，不需要索引。
• avatar：用戶頭像，可選字段，用于顯示用戶的個人信息，是一個長度為255的字符串，使用utf8mb4編碼和Unicode排序規則，可以為NULL。
• phone：用戶電話，可選字段，用于聯系用戶，是一個長度為50的字符串，使用utf8mb4編碼和Unicode排序規則，可以為NULL。
• name：用戶昵稱，可選字段，用于顯示用戶的個人信息，是一個長度為255的字符串，使用utf8mb4編碼和Unicode排序規則，可以為NULL。
• signature：用戶簽名，可選字段，用于顯示用戶的個人信息，是一個長文本類型，使用utf8mb4編碼和Unicode排序規則，可以為NULL。
• created_at：用戶創建時間，用于記錄用戶的創建時間，是一個日期時間類型，使用當前時間戳作為默認值，可以為NULL。

好友表(friend)

• id: 該字段為自增主鍵，表示每個朋友記錄的唯一標識符。
• user_id: 該字段表示朋友所屬的用戶 ID。
• username: 該字段表示朋友的用戶名。
• online_status: 該字段表示朋友的在線狀態，取值為 online 或 offline。
• remark: 該字段表示朋友的備注，可以為 NULL。
• group_id: 該字段表示朋友所屬的朋友分組 ID，可以為 NULL。
• room: 該字段表示朋友所在的聊天室，可以為 NULL。
• unread_msg_count: 該字段表示未讀消息數量，初始值為 0。
• created_at: 該字段表示記錄創建時間，類型為 timestamp。
• updated_at: 該字段表示記錄最后一次更新時間，類型為 timestamp，并且設置了 ON UPDATE 觸發器以自動更新時間。
• PRIMARY KEY: 指定主鍵為 id 字段。
• INDEX: 指定索引為 group_id 字段。
• CONSTRAINT: 指定外鍵約束，將 group_id 字段與 friend_group 表中的 id 字段關聯，實現級聯更新和級聯刪除。該約束名稱為 friend_ibfk_1。

好友組表(friend_group)

• id: 主鍵，自動遞增的整數。
• user_id: 外鍵，引用user表的id字段，整數類型。
• username: 用戶名，最大長度為255個字符，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• name: 組名，最大長度為50個字符，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• created_at: 記錄創建時間，時間戳類型，默認值為當前時間戳。
• updated_at: 記錄更新時間，時間戳類型，默認值為當前時間戳，在記錄更新時自動更新。
• 此外，該表還定義了一個名為idx_user_id的索引，用于加速對user_id字段的查詢。并且定義了一個名為friend_group_ibfk_1的外鍵約束，當刪除user表中的記錄時，會級聯刪除與之關聯的friend_group表中的記錄。

群聊表(group_chat)

• id: 主鍵，自動遞增的整數。
• name: 群聊名稱，最大長度為50個字符，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• creator_id: 外鍵，引用user表的id字段，整數類型。
• avatar: 群聊頭像，最大長度為255個字符，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• announcement: 群公告，文本類型，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• room: 房間號，最大長度為255個字符，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• created_at: 記錄創建時間，時間戳類型，默認值為當前時間戳。
• updated_at: 記錄更新時間，時間戳類型，默認值為當前時間戳，在記錄更新時自動更新。
• 此外，該表還定義了一個名為idx_creator_id的索引，用于加速對creator_id字段的查詢。并且定義了一個名為group_chat_ibfk_1的外鍵約束，當刪除user表中的記錄時，會級聯刪除與之關聯的group_chat表中的記錄。

群聊成員表(group_numbers)

• id: 主鍵，自動遞增的整數。
• group_id: 外鍵，引用group_chat表的id字段，整數類型。
• user_id: 用戶ID，整數類型。
• nickname: 用戶在群聊中的昵稱，最大長度為50個字符，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• created_at: 記錄創建時間，時間戳類型，默認值為當前時間戳。
• updated_at: 記錄更新時間，時間戳類型，默認值為當前時間戳，在記錄更新時自動更新。
• 此外，該表還定義了兩個索引：一個名為idx_user_id的索引用于加速對user_id字段的查詢；另一個名為idx_group_id的索引用于加速對group_id字段的查詢。并且定義了一個名為group_members_ibfk_1的外鍵約束，當刪除group_chat表中的記錄時，會級聯刪除與之關聯的group_members表中的記錄

消息表(message)

• id: 主鍵，自動遞增的整數。
• sender_id: 外鍵，引用user表的id字段，整數類型。
• receiver_id: 接收者ID，整數類型。
• content: 消息內容，長文本類型，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• room: 房間號，最大長度為255個字符，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• type: 消息類型，枚舉類型，可選值為’private’和’group’。
• media_type: 媒體類型，枚舉類型，可選值為’text’、‘image’、‘video’和’file’。
• status: 消息狀態，整數類型，默認值為0。
• created_at: 記錄創建時間，時間戳類型，默認值為當前時間戳。
  此外，該表還定義了一個名為sender_id的索引，用于加速對sender_id字段的查詢。并且定義了一個名為message_ibfk_1的外鍵約束，當刪除user表中的記錄時，會級聯刪除與之關聯的message表中的記錄。

消息統計表(message_statistics)

• id: 主鍵，自動遞增的整數。
• room: 房間號，最大長度為255個字符，使用utf8mb4字符集和utf8mb4_unicode_ci排序規則。
• total: 消息總數，整數類型。
• created_at: 記錄創建時間，時間戳類型，默認值為當前時間戳。
• updated_at: 記錄更新時間，時間戳類型，默認值為當前時間戳，在記錄更新時自動更新。
  該表沒有定義外鍵約束和索引。

AI密鑰存儲表(ai_conversation)

• id: 主鍵，自動遞增的整數。
• username: 用戶名，非空字符串。
• room: 房間名稱，非空字符串。
• conversation_id: 會話 ID，非空字符串。
• conversation_signature: 會話簽名，非空字符串。
• client_id: 客戶端 ID，非空字符串。
• count: 統計使用次數，默認值為 0。
• created_at: 記錄創建時間，默認值為當前時間戳。
• updated_at: 記錄更新時間，默認值為當前時間戳，在更新時自動更新。

此外，該表還包含一個外鍵約束，它引用了 user 表中的 username 字段，并在刪除或更新時級聯操作。
表使用 InnoDB 引擎，并使用 utf8mb4 字符集和 utf8mb4_unicode_ci 校對規則。

AI消息存儲表(ai_conversation)

• id: 主鍵，自動遞增的整數。

• sender_id: 發送者 ID，非空整數。

• receiver_id: 接收者 ID，非空整數。

• content: 消息內容，非空長文本。

• link_list: 鏈接列表，JSON 格式，默認值為 NULL。

• room: 房間名稱，非空字符串。

• conversation_id: 會話 ID，非空字符串。

• conversation_signature: 會話簽名，非空字符串。

• client_id: 客戶端 ID，非空字符串。

• invocation_id: 調用ID，非空整數。

• created_at: 記錄創建時間，默認值為當前時間戳。

注意electron打包會出現的問題

打包前必須做的事

• 進入到下面目錄C:\Users\自己的用戶名\AppData\Local\electron-builder\Cache
  

• 創建目錄winCodeSign和nsis
  

• 將electron必須安裝包目錄下的winCodeSign-2.6.0.7z解壓到C:\Users\自己的用戶名\AppData\Local\electron-builder\Cache\winCodeSign目錄下

• 進入到C:\Users\自己的用戶名\AppData\Local\electron-builder\Cache\nsis目錄下,將electron必須安裝包目錄下分別解壓成如下圖所示的樣子
  

前端成功打包結果

后端成果打包結果