转载

开源的H5即时聊天系统 spring-boot + netty + protobuf + vue ~

前言

一篇文章引发的思考？

一次读公号推文, 发现一篇文章写得特好, 勾起了好奇心

《群聊比单聊，为什么复杂这么多？》 , @沈大大 .

心路历程

第一阶段, 刚看完文章时, 特别兴奋, 开始着手, 花了一个月把聊天界面基本弄, 然后着手于后端, 经过些简单的调研, 决定用 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 代码

加好友演示

开源的H5即时聊天系统 spring-boot + netty + protobuf + vue ~

加群演示

开源的H5即时聊天系统 spring-boot + netty + protobuf + vue ~

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 做路径的转换,下面贴一下我的配置

# 前端路径, 注意这里配置了二级目录后, 需要 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);
    };
}