前言
前面的文章我们主要完成了个人资料修改 消息页优化 这篇文章我们讲解消息推送
推送页面
因为我们的推送消息都在一个页面 所以我们可以复用消息的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页面开发 基本告一段落了 后面我们进行后台对用户 笔记的管理