• Stars
    star
    193
  • Rank 201,081 (Top 4 %)
  • Language Vue
  • License
    Other
  • Created almost 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

him-vue

him-vue him-netty QQ群

vue netty spring-boot

him-vue

使用前先阅读开源协议: 中文版 , English version , 协议出处 Anti-996-License-1.0

前端: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;

功能列表

  • 单聊
  • 群聊
  • protobuf 编解码
  • 客户端心跳
  • 客户端断开重连
  • 异地登录, 通知下线
  • 移动端/PC端适配
  • 离线消息 (消息通过 ack 机制, 实现可达性)
  • 第三方QQ登录
  • 自带 emoji 表情
  • 文本消息
  • 声音提示
  • 图片消息
  • 音频消息
  • 视屏消息
  • 分布式部署
  • PHP 版本的 (Workerman 版本)

环境要求

git

这个版本管理肯定需要安装的

node

node 版本最新的即可

vue

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

下载

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

安装

npm install

编译

npm run serve 本地测试版

him-vue 前往 和 him-netty 前往 都启动后访问 http://localhost:8080

npm run build 编译命令

注意默认使用 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/him-vue/blob/master/pic/WechatIMG10.jpeg 改为 https://github.com/lmxdawn/him-vue/raw/master/pic/WechatIMG10.jpeg

我这里直接用的 七牛云的, 因为怕 GitHub 的访问太慢

protobuf 杂谈

说明: 目前所有文件都生成好了,不需要在生成,下面简单说明下

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);
    };
}

More Repositories

1

vue-admin-html

Vue-cli3.0 + Element UI + Spring Boot2.0 + 响应式的后台管理系统 https://lmxdawn.github.io/vue-admin
JavaScript
490
star
2

him-netty

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

vue-admin-java

spring boot + mybatis + vue + element-ui 实现后台管理API接口 https://lmxdawn.github.io/vue-admin-java
Java
206
star
4

vue-admin-html-java

spring boot + mybatis + vue + element-ui 实现后台管理API接口
Vue
140
star
5

exchange

Java 交易所源码,前端APP使用uniapp开发,后端使用java开发,采用 Spring Cloud Alibaba 微服务架构,撮合引擎使用`Disruptor`高效内存队列,所有服务可以实现分布式部署,websocket推送通过增加一层路由服务实现分布式部署
Java
90
star
6

wallet

虚拟币钱包服务,转账/提现/充值/归集(Pro 版本,可以在 Issues 联系我,Pro 版本很完善,商用版本,目前我自己本身的所有项目的钱包服务都是用的 Pro 版本,已验证过)
Go
75
star
7

exchange-uniapp

交易所APP代码
Vue
39
star
8

test

This is a self-learning test of the project, very messy miscellaneous
JavaScript
25
star
9

PHP-RSA

登陆认证、web api接口调用、支付接口调用等场合经常涉及到: rsa算法
JavaScript
17
star
10

sharding-spring-boot-mybatis-example

Sharding-Sphere examples 分库分表
Java
14
star
11

netty-demo

netty 的测试项目
Java
6
star
12

flutter-elm

🔥🔥🔥 Flutter imitates elm . flutter 做的兼容 Android + IOS 的饿了么应用
Dart
5
star
13

mahjong-hupai

四川麻将的胡牌算法
Java
5
star
14

think-admin

基于thinkPHP5.0 的后台管理系统
JavaScript
3
star
15

cityselect

城市联动
CSS
3
star
16

im-java

Java
3
star
17

sync-kline

同步各大交易所K线的程序
Go
3
star
18

wxa-demo

微信小程序封装 request 的demo
JavaScript
3
star
19

contracts-collect

收集的合约
Solidity
2
star
20

PHP-Linux

仅供我自己参考
2
star
21

tradingview-kline-demo

tradingview K线 Demo
Vue
2
star
22

wallet-v2-sdk-php

虚拟币钱包服务,钱包Pro版本,对接PHP的示例sdk
PHP
2
star
23

chengdu-mahjong

成都麻将的简单实现,前端用 vue ,服务端 netty
Vue
1
star
24

region

中国大陆省市表/暂时不包含港澳台
HTML
1
star
25

wallet-admin-vue

充提的vue后台
Vue
1
star
26

echart-test

echart 图表 K线图, 虚拟币交易所K线图 uniapp K线图
Vue
1
star
27

go-chain

Change the mining rules based on the public chain made by go-ethereum
Go
1
star
28

wallet-v2-sdk-go

虚拟币,钱包Pro 服务,golang充提示例项目,注意本示例是老版本,由于太忙未及时更新现目前的最新
Go
1
star
29

coin

Java
1
star