SpringBoot + Vue + Electron 開發 QQ 版聊天工具

在這裏插入圖片描述

一、簡介

這是一款基於 JS 實現的超輕量級桌面版聊天軟件。主要適用於私有云項目內部聊天,企業內部管理通訊等功能,主要通訊協議websocket。也支持web網頁聊天實現。文字聊天,互傳文件,離線消息,羣聊,斷線重連等功能。

先看一下效果,下圖左邊是web版,右邊爲PC版。

二、本地搭建

2.1 技術棧

後端技術棧:

  • springboot: 讓開發人員快速開發的一款Java的微服務框架。
  • tio: 是百萬級網絡框架
  • oauth2.0: OAuth 2.0 是一個行業的標準授權協議。OAuth 2.0 專注於簡化客戶端開發人員,同時爲 Web 應用程序,桌面應用程序,手機和客廳設備提供特定的授權流程。

前端技術棧:

  • vue: 套用於構建用戶界面的漸進式前端框架。
  • iview: 一套基於 Vue.js 的開源 UI 組件庫,主要服務於 PC 界面的中後臺產品。
  • electron: 用HTML,CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。

2.2 啓動後端服務

下載項目

使用gitBash 工具下載項目到本地

git clone https://gitee.com/lele-666/V-IM.git

這裏說明一下,項目的前後端代碼這樣就一次下載下來了。

  • V-IM-PC: 前端代碼
  • V-IM-Server: 後端代碼

修改配置文件application.properties

這裏主要修改數據庫連接和文件上傳的路徑:

#server.port=8081

spring.mvc.static-path-pattern=/**
#上傳的文件路徑
web.upload-path=D:/Temp

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vim?useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
...

注: 後端服務的端口根據自己的需要進行設置即可,默認 8080

初始化數據庫

數據庫初始化腳本在V-IM-Server\doc\init-20181231.sql,通過Navicat數據庫可視化工具導入數據庫腳本即可。

運行VServerApplication.java

將項目導入到Idea,自動下載項目的相關依賴後,直接運行項目VServerApplication類的main方法,就可以開發環境啓動後端服務了。

2.3 啓動 web 前端服務

下載依賴

一次執行下面命令,就可下載前端項目所需的所有依賴包。

cd V-IM-PC #切換目錄
npm install #npm安裝依賴
yarn #yarn 

本地運行

本地運行兩種方式,分別是 WebPC。命令如下:

npm run serve #以web方式運行
npm run electron:serve #以客戶端方式運行

注: web啓動時,前端項目訪問的端口是8080,會與後端的端口相同,所以將前端的訪問的端口修改下就可以了。修改的文件爲index.js:

export default {
  app_name: "V-IM",
  http_protocol: "http",
  http_port: 8080, #修改這個地方
  ws_port: 9326,
  init: "/api/user/init",
  his_url: "/api/message/list",
  chat_users_url: "/api/user/chatUserList",
  token_path: "/oauth/token",
  register_url: "/register",
  ws_protocol: "ws",
  getHostUrl: function() {
    return (
      this.http_protocol +
      "://" +
      localStorage.getItem("host") +
      ":" +
      this.http_port
    );
  },
  ...

web版的效果:

PC版的效果:

打包命令

本地測試功能問題,就可以進行項目打包了,打包命令也有兩個:

npm run build #打包爲web形式
npm run electron:build #打包爲可執行文件

2.4 啓動 PC 前端

安裝PC版

這裏有兩種方式,直接下載作者已經打包好的*.exe文件,或者使用上面的命令自己構建PC版本。
我這裏直接下載的PC版本。

下載地址:https://gitee.com/lele-666/V-IM/raw/master/v-im%20Setup%200.5.3.exe
本地運行

安裝好PC版後,雙擊運行即可。效果如下圖:
這裏配置一下服務就可連接到對應的後臺服務了。

三、最後

按照這樣的步驟走下來,幾分鐘就可以搭建QQ版聊天工具了。本篇講了開發環境搭建聊天工具的步驟。當然服務器部署也特別簡單的。如果你對這款聊天工具有興趣,不妨動動手指哦!


我有個公衆號叫:不安分的猿人 每週都會有技術乾貨分享給大家,關注我第一時間獲取哦!
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章