从零用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-editor
              ref="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()
					}
				}

就可以捕捉到 10之后的操作是 更新最后一次系统消息 以及更新角标

后面我们实现文章搜索功能

代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs