程序员debug必备神器—每日Bug看板(附源码)
本文以开源Demo——每日bug看板为开发实例,手把手教大家如何使用环信MQTT消息云实现在线通知功能,并见证一下MQTT+即时通知在项目开发管理中是如何敏捷而出色地满足多人云协作需求的!
随着数字化服务的发展,应用系统与终端用户之间需要构建稳定消息通道,且消息的灵活性与实效性决定了消息的价值,尤其对于下述场景,皆需要即时下发业务状态变更通知。
方案背景
→开发测试:
Bug创建、认领、修复等记录通知
→在线选座:
在线选座、预定、取消等状态变更通知
→会议室预定
会议室预定、释放等状态变更通知
→工单处理
工单录入、认领、处理等流程通知
→个人待办
未完成、进行中、已完成等办理状态通知
综上所述,当接入端在近百万、千万级的情况下,需要选择一种安全,稳定,可靠的在线推送方案。
产品设计
基于MQTT订阅/发布模型,可以快速实现一对多在线推送功能,并且推送内容可根据自己业务自定义。
本次项目选择实现任务看板中的消息推送,推送内容包括:任务创建、任务认领、任务释放、任务完成等消息,从而快速实现团队云协作。
技术优势
针对一对多在线推送场景,选择MQTT订阅/发布模型具备以下优势:
高并发,可以允许海量客户端同时在线;
低延时,通过中间件进行分发,减少消息复制成本;
高可用,服务器支持水平扩展,满足性能要求;
易集成,已具备多端开源SDK,可快速上线;
轻量级,MQTT客户端SDK简洁,连接消耗低(保活心跳报文2个字节)
功能介绍
(任务看板视频演示)
1)创建Bug
直接在输入框输入Bug描述信息
回车即可添加到未解决目录下
创建成功后团队其他用户均可收到创建提醒
同时所有打开Bug看板的成员均会自动更新看板
2)认领/取消认领Bug
认领Bug
查看未解决的Bugs
选择要认领的Bug,点击认领
认领后可以看到该Bug上显示自己用户名
团队其他用户均可收到认领提醒(该项不需要可以关闭)
取消认领bug
查看未解决的Bugs
选择要取消认领的Bug,点击自己用户名标签
取消认领后即可释放该Bug,用户名标签自动改回认领
团队其他用户均可收到释放提醒
同时所有打开Bug看板的成员均会自动更新看板
解决Bug
查看未解决的Bugs
选择自己已解决的Bug
点击前面的方框,将其状态改为已解决
该Bug将从未解决列表转移到已解决列表
团队其他用户均可收到解决提醒(该项不需要可以关闭)
同时所有打开Bug看板的成员均会自动更新看板
Bug复测不过
对于复测不过的Bug,需要将其从已解决列表移回未解决列表
在已解决列表选择复测不通过的Bug
点击前面勾选状态的方框,将其状态改为未解决
团队其他用户均可收到提醒
同时所有打开Bug看板的成员均会自动更新看板
删除Bug
对于录入错误或复测通过的Bug,可执行删除操作
选择要删除的Bug
点击最后的删除框,将其从列表删除
团队其他用户均可收到删除提醒
同时所有打开Bug看板的成员均会自动更新看板
异常提示
认领他人Bug
已被认领的Bug不允许认领
提示“已被xxx认领…”,须释放后才能认领
该操作仅本人提示,不会推送给认领人
解决未认领Bug
未认领的Bug不允许改为已完成
提示“请先认领…”,认领后才可解决
该操作仅本人提示,不会推送给他人
技术实现
本次MQTT服务器选择环信MQTT消息云,服务器除了消息路由外,还支持消息存储、在线状态查询、客户端消息轨迹查询等功能。
除此以外,还提供了长期免费版,节省了自己搭建服务器的时间(目前市面上没有免费的MQTT服务器,薅羊毛,不薅白不薅~)
在环信注册成功后,即可登录环信MQTT消息云控制台,【创建应用】并开通MQTT服务,获取图中关键信息。
示例说明
连接环信MQTT服务并发送消息
function mqttConnect(){
var options = {
// timeout : 3,//timeout,mqttVersion : 4,//mqttVersion,cleanSession : true,//cleanSession,useSSL : false,//useTLS,userName : user,
password : token,
onSuccess: function(message){
console.log('服务器连接成功');mqttSubscribe()},
onFailure: function (message) {
console.log('服务器连接失败');
console.log(message);
// setTimeout(mqttConnect(), reconnectTimeout);}}mqtt.connect(options);
}
MQTT服务订阅
function mqttSubscribe(){mqtt.subscribe(topic, { qos: 2 });
console.log('订阅成功');
}
MQTT服务取消订阅
function mqttUnsubscribe(){mqtt.unsubscribe(topic)
console.log('取消订阅成功');
}
发送消息
function mqttSend(topic,message){
if(!mqtt.isConnected()){mqttConnect();}mqttSubscribe();message = new Paho.MQTT.Message(message)message.destinationName = topicmqtt.send(message);
console.log('消息发送成功');
}
部署说明
修改配置
登录环信MQTT消息云控制台,获取上面 技术实现 图中的关键信息,配置在index.js以下参数即可:
var mqtt
// 设置当前用户的接入点域名,进入console控制台获取
const host = 'xxxxxx.cn1.mqtt.chat'
// WebSocket 协议服务端口,如果是走 HTTPS,设置443端口
const port = 80
// 从console控制台获取
const appId = 'xxxxxx'
// MQTT 用户自定义deviceID
var deviceId = 'xxxxx'+user
// clientId 格式 deviceID@AppID
var clientId = deviceId +'_'+ new Date().getTime()+'@' + appId
const client_id = 'xxxxxxxxxxx-xxxxxx-xxxxxx'
const client_secre = 'xxxxxxxx_xxxxxxxxx_xxxxxxxxxxxxxxxxx'
// 是否走加密 HTTPS,如果走 HTTPS,设置为 true
const useTLS = false
// cleansession标志
const cleansession = true
// 超时重连时间
const timeout = 3
const reconnectTimeout = 4000
const mqttVersion = 4
const baseUrl = "http://a3.easemob.com"
const orgName = "xxxxxxxxxxxxxxxxxxx"
const appName = "xxxx"
// 用户密码为第一步中申请的token
var password = ''
// 需要订阅或发送消息的topic名称
var topic = 't/xxxxx'
服务部署
直接放到Nginx、Apache、IIS等web容器即可访问,目前已部署在服务器上,可直接打开链接访问。
在线体验地址:任务看板登录入口
代码下载
上文介绍了在线通知的实现和部署,这里附上整个方案的代码供大家学习参考,源码下载
总结
在任务管理这个场景中,会出现创建Bug、认领Bug、完成Bug等多个状态的频繁变更,所以高效、稳定的通知给所有关注者(订阅者)是关键。
接入基于订阅/发布模式的环信MQTT消息云,不仅可以支持海量客户端同时在线,还支持消息分发,减少消息复制成本,实时向在线客户端发送消息。另外开发过程中也不需要再关心弱网络环境、断线重连、异常处理、海量并发、系统高可用等复杂的技术问题,极大程度上降低了开发成本,一两天即可搭建一套完整的任务看板功能。
参考网址及交流群
1、MQTT其他场景介绍
MQTT消息云服务 - 环信
2、MQTT文档介绍
产品概述 [IM开发文档]
3、交流群
程序员debug必备神器—每日Bug看板(附源码)相关推荐
- 程序员如何用“心“表白(结尾附源码)
写在前面:博主是一只经过实战开发历练后投身培训事业的"小山猪",昵称取自动画片<狮子王>中的"彭彭",总是以乐观.积极的心态对待周边的事物.本人的技 ...
- ❤️七夕佳节,用Python制作表白神器,程序员也应该拥有爱情!【附源码,建议收藏】❤️
程序员表白 开发工具 Python版本: 3.6.4 相关模块: requests模块: argparse模块: pyquery模块: jieba模块: pyecharts模块: wordcloud模 ...
- 程序员过情人节,实用表白网页附源码
又是一年情人节快到了,虽然我已经结婚,但是浪漫还是要有的.虽然是些老酒,但是对于一些朋友来说,或许是需要的.有没有对象的先收藏起来,留着以后用上. 大家都是 程序员,怎么修改使用自己研究去吧.另外,你 ...
- 小程序云开发实现登录与注册(附源码)
小程序云开发实现登录与注册(附源码) 1. 看效果 2.wxss <view class="v1"><!-- v2父容器 子view使用绝对布局 -->&l ...
- html爱情表白神器,回忆纪念册(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 相关界面 2.效果和源码 2.1 动态效果 2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csdn.net/wei ...
- 程序员看片必备神器!包邮送一台!!
为回馈广大读者粉丝们的大力支持,本号主特地选了这款 27寸4K显示器作为抽奖礼品送给大家.这礼物呢,可手捧追剧玩游戏,也可写字撰文搞创作.无论是自己玩,还是当礼物送人,都是理想佳品. 赠送规则 本次活 ...
- 程序员欢呼:微软Bing开始支持搜索源码、可直接运行
日常生活中,程序员们经常会遇见这样那样的问题,比如忘记了代码该怎么写,又或者需要实现一些特殊的算法和功能.这时候,你就可以去找微软 Bing 帮忙啦! 微软最近联合 HackerRank 一起研发了一 ...
- 【Python】中秋节快到了,这才是程序员该赏的“月亮”(3D+音频+源码)
目录 导语 一.做月饼 二.赏"月" 1. 引言 2. 下载ursina库 3.实现思路 4.资源的获取 总结 导语 送一个圆圆的饼,寄一个圆圆的请,献一颗圆圆的心,圆一个圆圆的 ...
- c语言220程序,电赛必备220个C语言实例源码分享
找了很多地方都不全,最后在CSDN上用积分下载了这个,准备电赛的朋友可能会用的上的.同时供C语言初学者可以参考.包括五子棋游戏.图书管理系统等.附件内容包括C语言源码和turbo C exe文件. 清 ...
最新文章
- SpringBoot笔记:SpringBoot集成MinIO分布式文件系统
- tomcat顶层架构
- Calico数据路径:IP路由和iptables
- pyecharts显示所有x轴_基于Pyecharts可视化大屏案例一(1)
- Unity 和腾讯游戏成立联合创新实验室:从技术创新探索游戏产品新模式和概念
- 菊子曰测试草稿{29C28FD771BA4B0D8693}
- 运筹优化(十九)--决策论基础及其最优化求解
- 记录一次苏宁电商延保服务的体验
- 第6篇 熊猫烧香专杀工具编写
- PHPWAMP出现无响应的解决方案,PHPWAMP集成环境在某些系统无响应什么办?
- SCU4487 king's trouble I(深搜DFS)
- matlab中将数据存为dat格式,matlab中将数据保存为txt或dat格式四种方案
- 2020 消息中间件MQ与RabbitMQ面试题大全
- 常用的数据统计分析软件
- java8 Stream分组求和reducing分组求最大值
- Chrome插件扩展程序的默认安装目录
- 大学十年---林锐(转)
- Go语言基础教程:版本选择
- python包装好后在pycharm IED中无法导入
- 数据仓库设计规范文档
热门文章
- FH5080E是5V升压充电8.4V双节锂电池串联升压充电管理IC
- linux怎么运行炒股软件,在Deepin 20系统下运行东方财富股票软件的方法
- java面向对象设计_Java面向对象设计 构造函数设计
- 机器人抓取—— 相机参数与标定 camera_calibration
- n个人围成一圈 报数java_n个人围成一圈报数,报到3的人退出,依次直到剩下一人,这人是第几个人?用java,不知道哪里错...
- 基于R的数据挖掘方法与实践(3)——决策树分析
- 复习JAVA高级部分
- 电视动态测试软件,动态清晰度客观测试
- 系统运维:北京某金融公司中级系统运维笔试题-2020年9月份
- B站入股服装品牌,投资变“周常”事件,背后是盘什么棋?