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

前言

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

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

因为我们的推送消息都在一个页面所以我们可以复用消息的websokcet推送

首先需要在 点赞表收藏表关注表回复表 都添加未读字段

bash 复制代码

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

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

bash 复制代码

    @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 当收到消息时获取所有未读信息（设置角标 ）

后台代码

bash 复制代码

    @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
各自模块显示的是相应模块的角标
前端代码

bash 复制代码

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

消息默认是发送状态但未读当我们进入相应页面时例如新增关注页

设置消息为读取状态

以一个聊天消息为例子
读取消息

bash 复制代码

    @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);
    };

具体的实现

bash 复制代码

    @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

bash 复制代码

.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

bash 复制代码

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

需要字符串不能为数字

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

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

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

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