从零用java实现小红书 springboot vue uniapp （10）系统消息模块接收推送消息优化

前言

移动端演示 http://8.146.211.120:8081/#/

管理端演示 http://8.146.211.120:8088/#/

项目整体介绍及演示

前面的文章我们主要完成了后台客服系统的完成和管理端的搭建今天我们完成通知消息及推送相关优化
首先我们参考小红书的通知页面

可以看出由这几部分组成 标题内容时间跳转页面
我们创建通知表

CREATE TABLE `business_notice` (`NOTICE_ID` varchar(32) NOT NULL COMMENT '通知id',`NOTICE_TITLE` varchar(500) DEFAULT NULL COMMENT '通知标题',`NOTICE_CONTENT` text COMMENT '通知内容',`REDIRECT_URL` varchar(500) DEFAULT NULL COMMENT '跳转url',`VERSION` bigint(10) DEFAULT '0' COMMENT '乐观锁字段',`DELETED` tinyint(2) DEFAULT '0' COMMENT '0正常 1删除',`SHOP_ID` varchar(32) DEFAULT NULL COMMENT '门店id',`SHOP_NAME` varchar(255) DEFAULT NULL COMMENT '门店名',`CREATE_NAME` varchar(255) DEFAULT NULL COMMENT '创建人',`CREATE_TIME` datetime DEFAULT NULL COMMENT '创建时间',`CREATE_ID` varchar(32) DEFAULT NULL COMMENT '创建人id',`UPDATE_TIME` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',`UPDATE_NAME` varchar(255) DEFAULT NULL COMMENT '修改人',`UPDATE_ID` varchar(32) DEFAULT NULL COMMENT '修改人id',`NOTICE_TYPE` tinyint(2) DEFAULT '0' COMMENT '通知类型',PRIMARY KEY (`NOTICE_ID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='通知公告表';

内容有样式编辑所以我们需要集成markdowm编辑器

mavonEditor

1.下载依赖 npm install mavon-editor --save
2.在main.js中全局引入

//引入markdown
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use markdown
Vue.use(mavonEditor)

3.在页面使用

            <mavon-editorref="md"placeholder="请输入文档内容...":boxShadow="false"style="z-index:1;border: 1px solid #d9d9d9;height:50vh"v-model="temp.noticeContent":toolbars="toolbars"/>

在这里插入图片描述
之后正常完成消息创建模块

通知详情

创建通知表后发送后进行消息发送
需要创建发送详情表

CREATE TABLE `business_receive` (`RECEIVE_ID` varchar(32) NOT NULL COMMENT '接收id',`AUTHOR_ID` varchar(32) DEFAULT NULL COMMENT '博主id',`AUTHOR_NAME` varchar(255) DEFAULT NULL COMMENT '博主名',`NOTICE_ID` varchar(32) DEFAULT NULL COMMENT '通知id',`NOTICE_TITLE` varchar(500) DEFAULT NULL COMMENT '通知标题',`DELETED` tinyint(2) DEFAULT '0' COMMENT '0正常 1删除',`CREATE_TIME` datetime DEFAULT NULL COMMENT '创建时间',`UPDATE_TIME` datetime DEFAULT NULL ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',`RECEIVE_STATUS` tinyint(2) DEFAULT '0' COMMENT '0 发送 1已读',PRIMARY KEY (`RECEIVE_ID`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='接收消息表';

发送消息后保存接收详情

    @ApiOperation(value = "发送通知")@ApiOperationSupport(order = 3)@PostMapping("/admin/notice/sendNotice")public ResultBean<Notice> sendNotice(@RequestBody @Validated SendNoticeDto sendNoticeDto) {System.out.println(sendNoticeDto);if(CollectionUtil.isNotEmpty(sendNoticeDto.getAuthorList())){Notice notice = noticeService.getById(sendNoticeDto.getNoticeId());List<Author> authorList = sendNoticeDto.getAuthorList();List<Receive> receiveList = new ArrayList<>();authorList.stream().forEach(author -> {Receive receive = new Receive();receive.setNoticeId(notice.getNoticeId());receive.setAuthorId(author.getAuthorId());receive.setAuthorName(author.getAuthorName());boolean add = receiveList.add(receive);//给指定用户发送if(add){TioUtil.sendChatMessageToUser(bootstrap.getServerGroupContext(),author.getAuthorId(),HANDLER_NOTICE_COUNT,receive);}});receiveService.saveBatch(receiveList);}else{throw new ApiException("请选择发送对象~");}return ResultBean.success();}

发送后向移动端推送消息通知
移动端收到通知后前端进行页面接收
在这里插入图片描述

在这里插入图片描述
其他方面和收到点赞消息一致
进入页面读取所有未读消息
滑动到页面进行加载更多下拉刷新数据
通知消息模块开发完毕如果想快速给某个作者发消息在作者管理加接口
后续有其它通知也可以硬编码实现

消息推送优化

之前我们请求未读条数更新消息角标的方式是每次进入页面进行刷新
这样极大浪费了我们的服务器资源
我们可以把所有的通知操作整合到websocket中

package com.dd.admin.business.webSocket;public class WsConst {//点赞public final static String HANDLER_UP = "1";//收藏public final static String HANDLER_STAR = "2";//回复public final static String HANDLER_REPLY = "3";//关注public final static String HANDLER_FOLLOW = "4";//聊天public final static String HANDLER_CHAT = "5";//客服public final static String HANDLER_SERVE = "6";//客服public final static String HANDLER_READ_CHAT = "7";//客服public final static String HANDLER_CHAT_COUNT = "8";//客服public final static String HANDLER_TOTAL_COUNT = "9";//客服public final static String HANDLER_NOTICE_COUNT = "10";
}

hanlderType就是我们的操作标识
以推送系统消息为例

   boolean add = receiveList.add(receive);//给指定用户发送if(add){TioUtil.sendChatMessageToUser(bootstrap.getServerGroupContext(),author.getAuthorId(),HANDLER_NOTICE_COUNT,receive);}

后台操作发送系统消息后向前端推送handlerType = 10的操作
前端接收到以后

	wsClient.onSocketMessageCallback = (res) => {console.log('我是message页面收到消息的提示')console.log(res)if(res.handlerType=='1'||res.handlerType=='2'||res.handlerType=='3'||res.handlerType=='4'){//点赞收藏 回复 关注app.getTotalUnReadCount()}if(res.handlerType=='5'){this.getMessageList()app.getTotalUnReadCount()}//获取总数if(res.handlerType=='9'){app.setMessageTabBarBadge(res.body.totalUnReadCount)this.unReadData = res.body}//获取if(res.handlerType=='10'){this.getReceiveLast()app.getTotalUnReadCount()}}