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

2019-05-17 admin

him-vue

him-vuehim-nettyQQ群

前言

一篇文章引发的思考?

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

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

心路历程

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

加好友演示

him-vue

加群演示

him-vue

QQ 互联相关配置

java 代码

him-api/src/main/resources/ 这里的配置文件里面, qq.auth.appidqq.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 新版本的原因直接引入该文件会报错 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权限 + 响应式的后台管理系统

[转载]原文链接:https://segmentfault.com/a/1190000019209226

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65148.html

文章标题:开源的H5即时聊天系统 spring-boot + netty + protobuf + vue ~

相关文章
bootstrap PrintThis打印插件使用详解
bootstrap PrintThis打印效果图: 如图,这个是调用了谷歌的打印,使用很方便,可以自己調样式,需要的可以研究一下,这边贴出使用方法。 附上GitHub:https://github.com/jasonday/printTh...
2017-03-16
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
html5+JavaScript教程-微信打飞机小游戏源码
js // JavaScript Document var c = document.getElementById("dotu"); var cxt = c.getContext("2d&q...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
回到顶部