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

前言

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

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

项目整体介绍及演示

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

可以看出由这几部分组成 标题内容时间跳转页面

我们创建通知表

bash 复制代码

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中全局引入

bash 复制代码

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

3.在页面使用

bash 复制代码

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

之后正常完成消息创建模块

通知详情

创建通知表后发送后进行消息发送

需要创建发送详情表

bash 复制代码

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='接收消息表';

发送消息后保存接收详情

bash 复制代码

    @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中

bash 复制代码

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就是我们的操作标识

以推送系统消息为例

bash 复制代码

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

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

前端接收到以后

bash 复制代码

	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

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

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

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

项目整体介绍及演示

mavonEditor

通知详情

消息推送优化

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