開源的H5即時聊天系統 spring-boot + netty + protobuf + vue ~

前言

一篇文章引起的思考？

一次讀公號推文, 發現一篇文章寫得特好, 勾起了好奇心

《羣聊比單聊，爲何複雜這麼多？》, @沈大大.

GitHub 地址

him-vue 前往 him-netty 前往

心路歷程

• 第一階段, 剛看完文章時, 特別興奮, 開始着手, 花了一個月把聊天界面基本弄, 而後着手於後端, 通過些簡單的調研, 決定用 netty 搭建一個, 後面發現裏面的複雜邏輯, 再加上心中的火彷佛已經熄滅, 最後...
• 第二階段, 最近刷公文時又刷到這篇相似的文章, 因而決定不能退縮, 因此有了接下來的事

踩坑指南

• 1. iOS版本手機QQ中清空不了 Cookie 的bug (Android 版本的QQ沒試), 其它瀏覽器均正常
• 1. 手機微信中打開後點擊輸入文字後, 無論點不點擊發送按鈕都會出現短暫的不能點擊的現象(任何按鈕都不能點擊), 後來發現是由於在微信裏面, 輸入法把 輸入框頂上去了, 而後輸入法隱藏後輸入框還在上面!!!! 點擊查看詳情

  。找到一個解決輸入框的方法: @blur="chatTextBlur" 監聽失去焦點的事件(vue 寫法), 而後在事件裏面執行 window.scroll(0, 0);

• 1. 由於設置了定位，overflow: scroll 原生滾動，iOS下會不流暢，解決辦法：換成 -webkit-overflow-scrolling: touch;

功能列表

• [x] 單聊
• [x] 羣聊
• [x] protobuf 編解碼
• [x] 客戶端心跳
• [x] 客戶端斷開重連
• [x] 異地登陸, 通知下線
• [x] 移動端/PC端適配
• [x] 離線消息 (消息經過 ack 機制, 實現可達性)
• [x] 第三方QQ登陸
• [x] 自帶 emoji 表情
• [x] 文本消息
• [ ] 聲音提示
• [ ] 圖片消息
• [ ] 音頻消息
• [ ] 視屏消息
• [ ] 分佈式部署
• [ ] PHP 版本的 (Workerman 版本)

環境要求

git

這個版本管理確定須要安裝的

node

node 版本最新的便可

jdk

JDK 8

maven

3.6.1

vue

構建工具用 vue 目前使用的 2.x 版本

java 安裝

spring boot

2.1.2

下載

git clone https://github.com/lmxdawn/him-netty.git

cd him-netty

SQL的導入

建立數據庫，名稱： him， 把 根目錄下 scripts 裏面的 him.sql 導入進去

打包

mvn -Dmaven.test.skip=true clean package

java -jar him-api/target/him-api-0.0.1-SNAPSHOT.jar

若是要加環境配置 --spring.profiles.active=pro 便可， 默認是 dev 環境。
特別要注意：配置文件裏面有跨域配置，這個必定要注意

vue 安裝

下載

git clone https://github.com/lmxdawn/him-vue.git
cd him-vue

安裝

npm install

編譯

npm run serve 本地測試版 | npm run build 編譯命令

him-vue 前往 和 him-netty 前往 都啓動後訪問 http://localhost:8080

注意 默認使用 QQ登陸, 這個須要去申請QQ互聯, 若是不想去申請, 則能夠直接設置 Cookie, 兩個值 UID 和 SID, 這兩個值能夠經過接口 /api/user/login/byPwd 獲取, 具體請看java 代碼

加好友演示

加羣演示

QQ 互聯相關配置

java 代碼

him-api/src/main/resources/ 這裏的配置文件裏面, qq.auth.appid 和 qq.auth.appkey 配置上便可

vue 代碼

詳細配置 根目錄下的
.env.development
.env.production
.env.stage 這三個文件是配置, 分別表明 本地測試,生產環境,線上測試環境

名稱	描述
VUE_APP_API_BASE	API接口地址
VUE_APP_WEBSOCKET_URL	websocket地址
VUE_APP_USER_QR_CODE_URL	生成用戶的二維碼地址(用來加好友的)
VUE_APP_GROUP_QR_CODE_URL	生成羣二維碼的地址(用來加羣的)
VUE_APP_ROUTER_BASE	若是用了 NGINX 作代理, 而且有二級路徑, 則須要配置此項

跨域問題

NGINX 作了端口的代理後, header 頭 設置了跨域, 可是仍是獲取不了, 不知道爲啥, 歡迎大神來指導

最後個人解決辦法, 所有用一個域名, 而後 NGINX 作路徑的轉換,下面貼一下個人配置

# 前端路徑, 注意這裏配置了二級目錄後, 須要 vue 的路由裏面也須要配置
# 我是寫在配置文件裏面的 VUE_APP_ROUTER_BASE 這個配置項來控制的
location /h5 {
   try_files $uri $uri/ /h5/index.html;
}
# API 路徑
location /api
{
  proxy_pass http://127.0.0.1:9000/api;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "Upgrade";
  proxy_set_header X-Real-IP $remote_addr;
}
# ws 路徑
location /ws
{
  proxy_pass http://127.0.0.1:9001;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "Upgrade";
  proxy_set_header X-Real-IP $remote_addr;
}

Him 組件說明

參數	說明	類型	可選值	默認值
isShow	是否顯示界面	boolean	—	true
width	寬度	string	—	100%
height	高度	string	—	100%
top	定位的頂部位置	string	—	—
left	定位的左邊位置	string	—	—
bottom	定位的底部位置	string	—	—
right	定位的右邊位置	string	—	—
apiBaseUrl	api 接口的地址	string	—	—
webSocketUrl	websocket 的鏈接地址	string	—	—
userQRCodeUrl	用戶二維碼的生成地址	string	—	—
groupQRCodeUrl	羣二維碼的生成地址	string	—	—
isAutoInit	是否自動初始化（若是爲 false 須要執行）	boolean	—	true
webSocketReconnectMaxCount	嘗試從新鏈接的最大次數	number	—	5

圖牀說明

把圖片放入 git 版本控制裏, 上傳到 GitHub 上, 而後 在 GitHub 裏打開這個圖片 把裏面的 blob 改成 raw

例如: https://github.com/lmxdawn/hi... 改成 https://github.com/lmxdawn/hi...

我這裏直接用的 七牛雲的, 由於怕 GitHub 的訪問太慢

protobuf 雜談

說明： 目前全部文件都生成好了，不須要在生成，下面簡單說明下

java 中使用

下載好 him-netty 後在 protocol 目錄下

生成 java 類須要安裝 安裝 protoc 下載地址： https://github.com/protocolbu...，

目前下載的 v3.7.1，解壓到任意目錄 ，而後把這個目錄添加到環境變量 Path 中

而後 windows 版本執行 proto.bat 便可，Linux/Max 運行 sh proto.sh

vue 中使用

目前我是安裝好了 protobufjs 了，proto 文件放在 /src/proto 目錄。
運行命令 pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto 便可
因爲我添加到了 package.json 中，直接運行 npm run protojs 也能夠

頁面中引入

上面的執行完成後，會在 src/proto 目錄下生成 proto.js 文件， 因爲 webpack 新版本的緣由直接引入該文件會報錯
[]( https://github.com/protobufjs... Cannot assign to read only property'exports'of object'
須要修改最後一行代碼爲： export default $root;

import protoRoot from "@/proto/proto"
const WSBaseReqProto = protoRoot.lookup("protocol.WSBaseReqProto");
const WSBaseResProto = protoRoot.lookup("protocol.WSBaseResProto");
// 編碼
function (payload) {
    // 加入登陸驗證
    payload.uid = parseInt(this.getUid());
    payload.sid = this.getSid();
    console.log("發送的信息：");
    let errMsg = WSBaseReqProto.verify(payload);
    console.log("buff 解析錯誤信息：", errMsg);
    // Create a new message
    const wsData = WSBaseReqProto.create(payload); // or use .fromObject if conversion is necessary
    // Encode a message to an Uint8Array (browser) or Buffer (node)
    return WSBaseReqProto.encode(wsData).finish();
}
// 解碼
function (data, cb) {
    let reader = new FileReader();
    reader.readAsArrayBuffer(data);
    reader.onload = () => {
        const buf = new Uint8Array(reader.result);
        const response = WSBaseResProto.decode(buf);
        // 成功回調
        cb(response);
    };
}

擴展閱讀

Vue-cli3.0 + Element UI + ThinkPHP5.1 + RBAC權限 + 響應式的後臺管理系統