uni-app 99群公告推送功能（一）

接口

router.js

// 推送群公告
  router.post('/group/remark',controller.group.remark);      

app/controller/group.js

'use strict';

const Controller = require('egg').Controller;

class GroupController extends Controller {
  // 获取群聊列表
  async list() {
        const { ctx, app } = this;
        let current_user_id = ctx.authUser.id;

        let page = ctx.params.page ? parseInt(ctx.params.page) : 1;
        let limit = ctx.query.limit ? parseInt(ctx.query.limit) : 10;
        let offset = (page - 1) * limit;

        let rows = await app.model.Group.findAll({
            where: {
                status: 1
            },
            include: [{
                model: app.model.GroupUser,
                where: {
                    user_id: current_user_id
                }
            }]
        });

        return ctx.apiSuccess(rows);
    }
    
  // 创建群聊
  async create() {
    const { ctx,app } = this;
    // 拿到当前用户id
    let current_user_id = ctx.authUser.id;
    // 验证参数
    ctx.validate({
        ids:{
            require:true,
            type:'array'
        }
    });
    let { ids } = ctx.request.body;
    // 验证是否是我的好友
    let friends = await app.model.Friend.findAll({
        where:{
            user_id:current_user_id,
            friend_id:ids
        },
        include:[{
            model:app.model.User,
            as:'friendInfo',
            attributes:['nickname','username']
        }]
    });
    if (!friends.length) {
        return ctx.apiFail('请选择需要加入群聊的好友');
    }
    // 创建群聊
    let name = friends.map(item=>item.friendInfo.nickname || item.friendInfo.username);
    name.push(ctx.authUser.nickname || ctx.authUser.username); // 将自己的数据加入
    let group = await app.model.Group.create({
        name:name.join(','),
        avatar:'',
        user_id:current_user_id
    });
    // 加入群聊用户
    let data = friends.map(item=>{
         return {user_id:item.friend_id,group_id:group.id}
     });
     data.unshift({
         user_id:current_user_id,
         group_id:group.id
     });
     await app.model.GroupUser.bulkCreate(data);
    // 消息推送
     let message = {
        id:(new Date()).getTime(), // 唯一id，后端生成唯一id
        from_avatar:ctx.authUser.avatar,// 发送者头像
        from_name:ctx.authUser.nickname || ctx.authUser.username,// 发送者昵称
        from_id:current_user_id, // 发送者id
        to_id:group.id,// 接收人id
        to_name:group.name,// 接收人/群 名称
        to_avatar:group.avatar,// 接收人/群 头像 
        chat_type:'group', // 接收类型
        type:'system', // 消息类型
        data:'创建群聊成功，可以聊天了', // 消息内容
        options:{}, // 其他参数
        create_time:(new Date()).getTime(),// 创建时间
        isremove:0, // 是否撤回
        group:group
    }
    data.forEach(item =>{
        ctx.sendAndSaveMessage(item.user_id,message);
    });
    ctx.apiSuccess('ok');
  }
  // 查看群资料
  async info() {
        const { ctx, app } = this;
        let current_user_id = ctx.authUser.id;
        // 验证参数
        ctx.validate({
            id: {
                required: true,
                type: 'int',
                desc: "群组id"
            }
        });
        let { id } = ctx.params;
        // 群组是否存在
        let group = await app.model.Group.findOne({
            where: {
                status: 1,
                id
            },
            include: [{
                model: app.model.GroupUser,
                attributes: ['user_id', 'nickname'],
                include: [{
                    model: app.model.User,
                    attributes: ['id', 'nickname', 'avatar', 'username']
                }]
            }]
        });

        if (!group) {
            return ctx.apiFail('该群聊不存在或者已被封禁');
        }

        // 当前用户是否是该群成员
        let index = group.group_users.findIndex(item => item.user_id === current_user_id);
        if (index === -1) {
            return ctx.apiFail('你不是该群成员，没有权限');
        }

        ctx.apiSuccess(group);
    }
  // 修改群名称
  async rename(){
      const { ctx,app } = this;
      let current_user_id = ctx.authUser.id;
      // 参数验证
      ctx.validate({
          id:{
              required:true,
              type:'int',
              desc:'群组id'
          },
          name:{
              required:true,
              type:'string',
              desc:'群名称'
          }
      });
      let { id,name } = ctx.request.body;
      // 是否存在 
      let group = await app.model.Group.findOne({
          where:{
              id,
              status:1 
          },
          include:[{
              model:app.model.GroupUser,
              attributes:['user_id','nickname']
          }]
      });
      if(!group){
          return ctx.apiFail('该群聊不存在或者已被封禁');
      }
      // 当前用户是否是该群成员
      let index = group.group_users.findIndex(item=>item.user_id === current_user_id);
      if(index === -1){
          return ctx.apiFail('你不是该群成员');
      }
      // 验证是否是群主
      if(group.user_id !== current_user_id){
          return ctx.apiFail('你不是管理员，没有权限');
      }
      // 修改群名称
      group.name = name;
      await group.save();
      let from_name = group.group_users[index].nickname || ctx.authUser.nickname || ctx.authUser.username;
      // 消息推送
      let message = {
                id:(new Date()).getTime(), // 唯一id，后端生成唯一id
                from_avatar:ctx.authUser.avatar,// 发送者头像
                from_name,// 发送者昵称
                from_id:current_user_id, // 发送者id
                to_id:group.id,// 接收人id
                to_name:group.name,// 接收人/群 名称
                to_avatar:group.name,// 接收人/群 头像 
                chat_type:'group', // 接收类型
                type:'system', // 消息类型
                data:`${from_name} 修改群名称为 ${name}`, // 消息内容
                options:{}, // 其他参数
                create_time:(new Date()).getTime(),// 创建时间
                isremove:0, // 是否撤回
                group:group
        }
        // 推送消息
        group.group_users.forEach(item=>{
            ctx.sendAndSaveMessage(item.user_id,message);
        });
        ctx.apiSuccess('ok');
  }
  // 推送群公告
  async remark(){
      const { ctx,app } = this;
      let current_user_id = ctx.authUser.id;
      // 参数验证
      ctx.validate({
          id:{
              required:true,
              type:'int',
              desc:'群组id'
          },
          remark:{
              required:true,
              type:'string',
              desc:'群公告'
          }
      });
      let { id,remark } = ctx.request.body;
      // 是否存在 
      let group = await app.model.Group.findOne({
          where:{
              id,
              status:1 
          },
          include:[{
              model:app.model.GroupUser,
              attributes:['user_id','nickname']
          }]
      });
      if(!group){
          return ctx.apiFail('该群聊不存在或者已被封禁');
      }
      // 当前用户是否是该群成员
      let index = group.group_users.findIndex(item=>item.user_id === current_user_id);
      if(index === -1){
          return ctx.apiFail('你不是该群成员');
      }
      // 验证是否是群主
      if(group.user_id !== current_user_id){
          return ctx.apiFail('你不是管理员，没有权限');
      }
      // 修改群公告
      group.remark = remark;
      await group.save();
      let from_name = group.group_users[index].nickname || ctx.authUser.nickname || ctx.authUser.username;
      // 消息推送
      let message = {
                id:(new Date()).getTime(), // 唯一id，后端生成唯一id
                from_avatar:ctx.authUser.avatar,// 发送者头像
                from_name,// 发送者昵称
                from_id:current_user_id, // 发送者id
                to_id:group.id,// 接收人id
                to_name:group.name,// 接收人/群 名称
                to_avatar:group.name,// 接收人/群 头像 
                chat_type:'group', // 接收类型
                type:'system', // 消息类型
                data:`[新公告] ${remark}`, // 消息内容
                options:{}, // 其他参数
                create_time:(new Date()).getTime(),// 创建时间
                isremove:0, // 是否撤回
                group:group
        }
        // 推送消息
        group.group_users.forEach(item=>{
            ctx.sendAndSaveMessage(item.user_id,message);
        });
        ctx.apiSuccess('ok');
  }
}
module.exports = GroupController;      

页面

chat.js

import $U from "./util.js";
import $H from './request.js';
class chat {
  constructor(arg) {
    this.url = arg.url
    this.isOnline = false
    this.socket = null
    // 获取当前用户相关信息
    let user = $U.getStorage('user');
    this.user = user ? JSON.parse(user) : {},
      // 初始化聊天对象
      this.TO = false;
    // 连接和监听
    if (this.user.token) {
      this.connectSocket()
    }
  }
  // 连接socket
  connectSocket() {
    console.log(this.user);
    this.socket = uni.connectSocket({
      url: this.url + '?token=' + this.user.token,
      complete: () => {}
    })
    // 监听连接成功
    this.socket.onOpen(() => this.onOpen())
    // 监听接收信息
    this.socket.onMessage((res) => this.onMessage(res))
    // 监听断开
    this.socket.onClose(() => this.onClose())
    // 监听错误
    this.socket.onError(() => this.onError())
  }
  // 监听打开
  onOpen() {
    // 用户状态上线
    this.isOnline = true;
    console.log('socket连接成功');

    // 获取用户离线消息
    this.getMessage();
  }
  // 获取离线消息
  getMessage(){
    $H.post('/chat/getmessage');
  }
  // 监听关闭
  onClose() {
    // 用户下线
    this.isOnline = false;
    this.socket = null;
    console.log('socket连接关闭');
  }
  // 监听消息
  onMessage(data) {
    console.log('监听消息', data);
    let res = JSON.parse(data.data)
    // console.log('监听接收消息',res)
    // 错误
    switch (res.msg) {
      case 'fail':
        return uni.showToast({
          title: res.data,
          icon: 'none'
        });
        break;
      case 'recall': // 撤回消息
        this.handleOnRecall(res.data)
        break;
      case 'updateApplyList': // 新的好友申请
        $store.dispatch('getApply');
        break;
      case 'moment': // 朋友圈更新
        this.handleMoment(res.data)
        break;
      default:
        // 处理消息
        this.handleOnMessage(res.data)
        break;
    }
  }
  // 处理消息
  async handleOnMessage(message) {
    // 添加消息记录到本地存储中
    let { data } = this.addChatDetail(message, false)
    // 更新会话列表
    this.updateChatList(data, false)
    // 全局通知
    uni.$emit('onMessage', data)
    // 消息提示
    // this.messageNotice()
  }
  // 监听连接错误
  onError() {
    // 用户下线
    this.isOnline = false;
    this.socket = null;
    console.log('socket连接错误');
  }
  // 关闭连接
  close() {
    this.socket.close()
  }
  // 创建聊天对象
  createChatObject(detail) {
    this.TO = detail;
    console.log('创建聊天对象', this.TO)
  }
  // 销毁聊天对象
  destoryChatObject() {
    this.TO = false
  }
  // 组织发送信息格式
  formatSendData(params) {
    return {
      id: 0, // 唯一id，后端生成，用于撤回指定消息
      from_avatar: this.user.avatar, // 发送者头像
      from_name: this.user.nickname || this.user.username, // 发送者昵称
      from_id: this.user.id, // 发送者id
      to_id: params.to_id || this.TO.id, // 接收人/群 id
      to_name: params.to_name || this.TO.name, // 接收人/群 名称
      to_avatar: params.to_avatar || this.TO.avatar, // 接收人/群 头像
      chat_type: params.chat_type || this.TO.chat_type, // 接收类型
      type: params.type, // 消息类型
      data: params.data, // 消息内容
      options: params.options ? params.options : {}, // 其他参数
      create_time: (new Date()).getTime(), // 创建时间
      isremove: 0, // 是否撤回
      sendStatus: params.sendStatus ? params.sendStatus : "pending" // 发送状态，success发送成功,fail发送失败,pending发送中
    }
  }
  // 发送信息
  send(message, onProgress = false) {
    return new Promise((result,) => {
      // 添加消息历史记录
      // this.addChatDetail();
      let { k } = this.addChatDetail(message);
      // 更新会话列表 
      this.updateChatList(message);
      // 验证是否上线
      if (!this.checkOnLine()) return reject('未上线');
      // 上传文件
      let isUpload = (message.type !== 'text' && message.type !== 'emoticon' && message.type !==
        'card' && !message.data.startsWith('http://tangzhe123-com'))

      let uploadResult = ''
      if (isUpload) {
        uploadResult = $H.upload('/upload', {
          filePath: message.data
        }, onProgress)

        if (!uploadResult) {
          // 发送失败
          message.sendStatus = 'fail'
          // 更新指定历史记录
          this.updateChatDetail(message, k)
          // 断线重连提示
          return reject(err)
        }
      }

      $H.post('/chat/send', {
        to_id: this.TO.id,
        type: message.type,
        chat_type: this.TO.chat_type,
        data: message.data,
      }).then(res => {
        // 发送成功
        console.log('chat.js发送成功');
        message.id = res.id
        message.sendStatus = 'success';
        // 更新指定历史记录
        this.updateChatDetail(message, k);
        result(res);
      }).catch(err => {
        // 发送失败
        console.log('chat.js发送失败');
        message.sendStatus = 'fail';
        // 更新指定历史记录

        this.updateChatDetail(message, k);
        // 断线重连提示
        result(err);
      });
    })

  }
  // 验证是否上线
  checkOnLine() {
    if (!this.isOnline) {
      // 断线重连提示
      this.reconnectConfirm();
      return false;
    }
    return true;
  }
  // 断线重连提示
  reconnectConfirm() {
    uni.showModal({
      title: '你已经断线，是否重新连接？',
      content: '重新连接',
      success: res => {
        if (res.confirm) {
          this.connectSocket();
        }
      },

    });
  }
  // 添加聊天记录
  addChatDetail(message, isSend = true) {
    console.log('添加到聊天记录');
    // 获取对方id
    let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
    if (!id) {
      return {
        data: {},
        k: 0
      }
    }

    // key值：chatDetail_当前用户id_会话类型_接收人/群id
    let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
    console.log(key);
    // 获取原来的聊天记录
    let list = this.getChatdetail(key)

    console.log('获取原来的聊天记录', list);

    // 标识
    message.k = 'k' + list.length
    list.push(message)
    // 加入存储
    console.log('加入存储', message);
    this.setStorage(key, list);
    // 返回
    return {
      data: message,
      k: message.k
    }
  }
  // 更新指定历史记录
  async updateChatDetail(message, k, isSend = true) {
    // 获取对方id
    let id = message.chat_type === 'user' ? (isSend ? message.to_id : message.from_id) : message.to_id;
    // key值：chatDetail_当前用户id_会话类型_接收人/群id
    let key = `chatDetail_${this.user.id}_${message.chat_type}_${id}`;
    // 获取原来的聊天记录
    let list = this.getChatdetail(key);
    // 根据k查找对应聊天记录
    let index = list.findIndex(item => item.k === k);
    if (index === -1) return;
    
    list[index] = message;
    // 存储
    this.setStorage(key, list);
  }
  // 获取聊天记录
  getChatdetail(key = false) {
    key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`;
    return this.getStorage(key);
  }
  // 格式化会话最后一条消息显示
  formatChatItemData(message,) {
    let data = message.data.length > 18 ? message.data.slice(0,17) + '...' : message.data;
    switch (message.type) {
      case 'emoticon':
        data = '[表情]'
        break;
      case 'image':
        data = '[图片]'
        break;
      case 'audio':
        data = '[语音]'
        break;
      case 'video':
        data = '[视频]'
        break;
      case 'card':
        data = '[名片]'
        break;
    }
    data = isSend ? data : `${message.from_name}: ${data}`
    return data
  }
  // 更新会话列表
  updateChatList(message, isSend = true) {
    // 获取本地存储会话列表
    let list = this.getChatList()
    // 是否处于当前聊天中
    let isCurrentChat = false
    // 接收人/群 id/头像/昵称
    let id = 0
    let avatar = ''
    let name = ''

    // 判断私聊还是群聊
    if (message.chat_type === 'user') { // 私聊
      // 聊天对象是否存在
      isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : this.TO.id === message.from_id) :
        false

      id = isSend ? message.to_id : message.from_id
      avatar = isSend ? message.to_avatar : message.from_avatar
      name = isSend ? message.to_name : message.from_name
    } else { 
      // 群聊
      isCurrentChat = this.TO && (this.TO.id === message.to_id)
      id = message.to_id
      avatar = message.to_avatar
      name = message.to_name
    }

    // 会话是否存在
    let index = list.findIndex(item => {
      return item.chat_type === message.chat_type && item.id === id
    })
    // 最后一条消息展现形式
    // let data = isSend ? message.data : `${message.from_name}: ${message.data}`
    let data = this.formatChatItemData(message, isSend)
    // 会话不存在，创建会话
    // 未读数是否 + 1
    let noreadnum = (isSend || isCurrentChat) ? 0 : 1
    if (index === -1) {
      let chatItem = {
        id, // 接收人/群 id
        chat_type: message.chat_type, // 接收类型 user单聊 group群聊
        avatar, // 接收人/群 头像
        name, // 接收人/群 昵称
        update_time: (new Date()).getTime(), // 最后一条消息的时间戳
        data, // 最后一条消息内容
        type: message.type, // 最后一条消息类型
        noreadnum, // 未读数
        istop: false, // 是否置顶
        shownickname: false, // 是否显示昵称
        nowarn: false, // 消息免打扰
        strongwarn: false, // 是否开启强提醒
      }
      // 群聊
      if (message.chat_type === 'group' && message.group) {
        chatItem.shownickname = true
        chatItem.name = message.to_name
        chatItem = {
          ...chatItem,
          user_id: message.group.user_id, // 群管理员id
          remark: "", // 群公告
          invite_confirm: 1, // 邀请确认
        }
      
          list.unshift(chatItem)
      }
    } else { // 存在，更新会话
      // 拿到当前会话
      let item = list[index]
      // 更新该会话最后一条消息时间，内容，类型
      item.update_time = (new Date()).getTime()
      item.name = message.to_name
      item.data = data
      item.type = message.type
      // 未读数更新
      item.noreadnum += noreadnum
      // 置顶会话
      list = this.listToFirst(list, index)
    }
    // 存储
    let key = `chatlist_${this.user.id}`
    this.setStorage(key, list)
    // 更新未读数
    this.updateBadge(list)
    // 通知更新vuex中的聊天会话列表
    uni.$emit('onUpdateChatList', list)
    return list
  }

  // 获取聊天记录
  getChatList(message, isSend = true) {
    // 获取本地存储会话列表
    let list = this.getChatList();
    // 是否处在当前聊天中
    let isCurrentChat = false
    // 接收人/群 id/头像/昵称
    let id = 0;
    let avatar = '';
    let name = '';
    // 判断私聊还是群聊
    if (message.chat_type === 'user') {
      // 私聊
      isCurrentChat = this.TO ? (isSend ? this.TO.id === message.to_id : message.from_id) : false;
      id = isSend ? message.to_id : message.from_id;
      avatar = isSend ? message.to_avatar : message.from_avatar
      name = isSend ? message.to_name : message.from_name
    } else {
      // 群聊
    }

    // 会话是否存在
    let index = list.findIndex(item => {
      return item.chat_type === message.chat_type && item.id === id;
    })
    // 最后一条消息展现形式
    let data = isSend ? message.data : `${message.from_name}:${message.data}`;
    // 未读数是否 +1
    let noreadnum = (isSend || isCurrentChat) ? 0 : 1;
    // 会话不存在 创建会话
    if (index === -1) {
      let chatItem = {
        id, // 接收人/群 id
        chat_type: message.chat_type, // 接收类型 user 单聊 group群聊
        name, // 接收人/群 昵称
        avatar, // 接收人/群 头像
        update_time: (new Date()).getTime(), // 最后发送的时间
        data, // 最后一条消息的内容
        type: message.type,
        noreadnum: 1, // 未读数
        istop: false, // 是否置顶
        shownickname: false, // 是否显示昵称
        nowarn: false, // 是否免打扰
        strongwarn: false, //  是否强提醒
      }
      if (message.chat_type === 'group') {
        chatItem = {
          ...chatItem,
          user_id: 0, // 管理员id
          remark: '', // 群公告
          invite_confirm: 0 // 邀请确认
        }
      }
      list.unshift(chatItem)
    
    } else {
      // 存在，更新会话
      // 拿到当前会话
      let item = list[index]
      // 更新改会话最后一条消息时间，内容，类型
      item.update_time = (new Date()).getTime();
      item.data = data;
      item.type = message.type;
      // 未读数更新
      item.noreadnum += noreadnum
      // 置顶会话
      list = this.listToFirst(list, index);
    }
    // 存储
    let key = `chatlist_${this.user.id}`;
    this.setStorage(key, list);
    // 更新未读数
        this.updateBadge(list);
    // 更新vuex中的聊天会话列表
    uni.$emit('onUpdateChatList', list);
    console.log('获取到的会话列表：',list)
    return list;
    /**
     * {
      id:1,  // 接收人/群 id
      chat_type:'user', // 接收类型 user 单聊 group群聊
      name:'昵称', // 接收人/群 昵称
      avatar:"/static/images/demo/demo6.jpg", // 接收人/群 头像
      type:'',// 最后一条消息类型
      update_time:1628069958, // 最后发送的时间
      data:"你好啊，哈哈哈", // 最后一条消息的内容
      noreadnum:1, // 未读数
      istop:false, // 是否置顶
      shownickname:0, // 是否显示昵称
      nowarn:0, // 是否免打扰
      strongwarn:0, //  是否强提醒
      user_id://管理员id，
      remark:'公告', // 群公告
      invite_confirm:0, // 邀请确认
     },
     **/
  }
  // 获取本地存储会话列表
  getChatList() {
    let key = `chatlist_${this.user.id}`;
    return this.getStorage(key);
  }
  // 读取会话
  async readChatItem(id,chat_type){
    // 获取所有会话列表
    let list = this.getChatList();
    // 找到当前会话
    let index = list.findIndex(item=>item.id === id && item.chat_type === chat_type);
    if(index !== -1){
      list[index].noreadnum = 0;
      let key = `chatlist_${this.user.id}`;
      this.setStorage(key,list);
      // 重新获取未读数
      this.updateBadge();
      // 更新会话列表状态
      uni.$emit('onUpdateChatList',list);
    }
  }
  // 获取指定会话
  getChatListItem(id,chat_type){
      // 获取所有会话列表
      let list = this.getChatList()
      // 找到当前会话
      let index = list.findIndex(item=>item.id === id && item.chat_type === chat_type)
      if(index !== -1){
        return list[index]
      }
      return false
    }
  
  // 更新未读数
  async updateBadge(list = false) {
    // 获取所有会话列表
    list = list ? list : this.getChatList()
    // 统计所有未读数
    let total = 0
    
    list.forEach(item => {
      total += item.noreadnum
    })
    // 设置底部导航栏角标 
    if (total > 0) {
      uni.setTabBarBadge({
        index: 0,
        text: total <= 99 ? total.toString() : '99+'
      })
    } else {
      uni.removeTabBarBadge({
        index: 0
      })
    }
    
    uni.$emit('totalNoreadnum', total)
  }
  // 获取存储
  getStorage(key) {
    let list = $U.getStorage(key);
    return list ? JSON.parse(list) : [];
  }
  // 设置存储
  setStorage(key,) {
    return $U.setStorage(key, JSON.stringify(value));
  }
  // 数组置顶
  listToFirst(arr,) {
    if (index != 0) {
      arr.unshift(arr.splice(index, 1)[0]);
    }
    return arr;
  }
}
export default      

我测试的结果，如下图