前言

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

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

心路歷程

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

踩坑指南

iOS版本手機QQ中清空不了 Cookie 的bug (Android 版本的QQ沒試), 其它瀏覽器均正常

手機微信中打開後點擊輸入文字後, 不管點不點擊發送按鈕都會出現短暫的不能點擊的現象(任何按鈕都不能點擊), 後來發現是因爲在微信裏面, 輸入法把輸入框頂上去了, 然後輸入法隱藏後輸入框還在上面!!!! 點擊查看詳情

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

因爲設置了定位，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);
    };
}

GitHub 地址

him-vue 前往

him-netty 前往

擴展閱讀

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

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

前言

心路歷程

踩坑指南

功能列表

環境要求

git

node

jdk

maven

vue

java 安裝

spring boot

下載

SQL的導入

打包

vue 安裝

下載

安裝

編譯

加好友演示

加羣演示

QQ 互聯相關配置

java 代碼

vue 代碼

跨域問題

Him 組件說明

圖牀說明

protobuf 雜談

java 中使用

vue 中使用

頁面中引入

GitHub 地址

him-vue 前往

him-netty 前往

擴展閱讀