从零用java实现 小红书 springboot vue uniapp （9）消息推送功能

前言

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

前面的文章我们主要完成了个人资料修改 消息页优化 这篇文章我们讲解消息推送
推送页面

因为我们的推送消息都在一个页面 所以我们可以复用消息的websokcet推送
首先需要在 点赞表 收藏表 关注表 回复表 都添加未读字段

`MESSAGE_STATUS` tinyint(2) DEFAULT '0' COMMENT '0发送 1已读'

当我们不在任何一个详情页 例如在主页面 我们如何收取别人的推送信息呢
1 我们有一个连接成功的websocket连接
2 别人进行操作时（例如点赞）向我们的websocket推送

    @ApiOperation(value = "点赞笔记")
    @ApiOperationSupport(order = 1)
    @PostMapping("/api/auth/upNote")
    @OperLog(operModule = "点赞笔记",operType = OperType.ADD,operDesc = "点赞笔记")
    public ResultBean upNote(@RequestBody NoteDto noteDto) {
        String followId = String.valueOf(request.getAttribute("authorId"));
        Author follow = authorService.getById(followId);
        Boolean isUp = Boolean.FALSE;
        //查看在不在点赞列表
        UpNotes upNotes = upNotesService.selectOneByFollowId(noteDto.getNoteId(), followId);
        //不在证明是点赞
        if(upNotes==null){
            upNotes = new UpNotes();
            upNotes.setAuthorId(noteDto.getAuthorId());
            upNotes.setAuthorName(noteDto.getAuthorName());
            upNotes.setFollowId(follow.getAuthorId());
            upNotes.setFollowName(follow.getAuthorName());
            upNotes.setNoteId(noteDto.getNoteId());
            upNotes.setNoteTitle(noteDto.getNoteTitle());
            isUp = Boolean.TRUE;
            upNotesService.save(upNotes);

            //发送点赞信息
            TioUtil.sendChatMessageToUser( bootstrap.getServerGroupContext(),noteDto.getAuthorId(),"1",upNotes);

        }else{
            //在则表示取消赞删除数据
            upNotesService.removeById(upNotes);
        }
        return ResultBean.success(isUp);
    };

3 当收到消息时获取所有未读信息（设置角标）
后台代码

    @ApiOperation(value = "查询我的未读消息数量")
    @ApiOperationSupport(order = 1)
    @GetMapping("/api/auth/getUnReadCount")
    @OperLog(operModule = "查询我的未读消息数量",operType = OperType.OTHER,operDesc = "查询我的未读消息数量")
    public ResultBean getUnReadCount() {
        String loginId = String.valueOf(request.getAttribute("authorId"));

        Integer chatUnReadCount = chatService.selectUnReadCount(loginId);
        Integer upNotesUnReadCount = upNotesService.selectUnReadCount(loginId);
        Integer starNotesUnReadCount = starNotesService.selectUnReadCount(loginId);
        Integer replyUnReadCount = replyService.selectUnReadCount(loginId);
        Integer followUnReadCount = followService.selectUnReadCount(loginId);
        Integer totalUnReadCount = 0;
        UnReadCountBean unReadCountBean = new UnReadCountBean(chatUnReadCount,upNotesUnReadCount,starNotesUnReadCount,replyUnReadCount,followUnReadCount,totalUnReadCount);
        unReadCountBean.calculateTotalUnReadCount();
        return ResultBean.success(unReadCountBean);
    };

那消息消息的角标对应的就是 所有未读的消息 totalUnReadCount
各自模块 显示的是相应模块的角标
前端代码

	setMessageTabBarBadge(callback){
		app.get('/auth/getUnReadCount', '', '', (res => {
			if(res.data.totalUnReadCount>0){
				uni.setTabBarBadge({
					index: 3,
					text: res.data.totalUnReadCount.toString()
				})
			}else{
				uni.removeTabBarBadge({
					index: 3
				})
			}
			callback(res.data)
		}))
	},

通过callback回调将数据传入页面 展示未读数量
这样有一个弊端 用户的任意一次操作都会导致对方对服务器发起请求 我们可以接收到相应操作时对数据进行处理
优点就是 实时获取后台结果不容易出错

消息默认是发送状态 但未读 当我们进入相应页面时例如 新增关注页
设置消息为读取状态
以一个聊天消息为例子
读取消息

    @ApiOperation(value = "读取消息")
    @ApiOperationSupport(order = 1)
    @PostMapping("/api/auth/readAuthorMessage")
    @OperLog(operModule = "读取消息",operType = OperType.OTHER,operDesc = "读取消息")
    public ResultBean readAuthorMessage(String authorId) {
        String loginId = String.valueOf(request.getAttribute("authorId"));
        chatService.readMessage(authorId,loginId);
        return ResultBean.success(loginId);
    };

具体的实现

    @Override
    //发送者是对方读取者是我
    public void readMessage(String authorId, String loginId) {
        LambdaUpdateWrapper<Chat> queryWrapper = new LambdaUpdateWrapper();
        queryWrapper.eq(Chat::getFromId,authorId);
        queryWrapper.eq(Chat::getToId,loginId);
        queryWrapper.set(Chat::getMessageStatus,1);
        this.update(queryWrapper);
    }

这样就达到消息读取的操作了
读取后返回 消息页 我们的onshow方法会自动重新获取角标

其它
说说角标的实现方法
页面 父级元素relative 角标元素 absolute

.top-unRead{
	border: 4rpx solid #FFFFFF; position: absolute;right: 5rpx; top:-11rpx;border-radius:35rpx; height:35rpx; width: 35rpx; line-height:35rpx;text-align: center; font-size:22rpx;
}

tabbar

		uni.setTabBarBadge({
					index: 3,
					text: res.data.totalUnReadCount.toString()
		})

需要字符串 不能为数字

h5页面开发 基本告一段落了 后面我们进行后台对用户 笔记的管理

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