uni-app 152朋友圈动态实时通知功能

简介: uni-app 152朋友圈动态实时通知功能


下图是我测试的截图

/common/free-lib/chat.js

import $U from "./util.js";
import $H from './request.js';
import $store from '@/store/index.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');
  }
  // 获取聊天记录
  getChatDetail(key = false) {
    key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.id}`
    return this.getStorage(key)
  }
  // 监听关闭
  onClose() {
    // 用户下线
    this.isOnline = false;
    this.socket = null;
    console.log('socket连接关闭');
  }
  // 监听消息
  onMessage(data) {
    console.log('监听消息', data);
    let res = JSON.parse(data.data)
    // 错误
    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;
    }
  }
  // 获取本地存储中的朋友圈动态通知
  getNotice(){
    let notice = $U.getStorage('moment_'+this.user.id);
    return notice ? JSON.parse(notice) : {
      avatar:'',
      user_id:0,
      num:0
    }
  }
  // 处理朋友圈通知
  async handleMoment(message){
    let notice = this.getNotice();
      switch(message.type){
      case 'new':
         if(message.user_id !== this.user.id){
          notice.avatar = message.avatar;
          notice.user_id = message.user_id;
          uni.showTabBarRedDot({
            index:notice
          })
        }
      break;
      default:
      if(message.user_id !== this.user.id){
        notice.avatar = message.avatar
        notice.user_id = message.user_id 
        notice.num += 1
      }
      if(notice.num > 0){
        uni.setTabBarBadge({
          index:2,
          text:notice.num > 99 ? '99+' : notice.num.toString()
        })
      }else{
        uni.removeTabBarBadge({
          index:2
        })
      }
      break;
    }
    uni.$emit('momentNotice',notice);
    $U.setStorage('moment_'+this.user.id,JSON.stringify(notice));
  }
  // 读取朋友圈动态
  async readMoments(){
    let notice = {
      avatar:'',
      user_id:0,
      num:0
    };
    $U.setStorage('moment_'+this.user.id,JSON.stringify(notice));
    uni.hideTabBarRedDot({
      index:2
    })
    uni.removeTabBarBadge({
      index:2
    })
    uni.$emit('momentNotice',notice);
  }
  // 监听撤回消息处理
  async handleOnRecall(message) {
    // 通知聊天页撤回消息
    uni.$emit('onMessage', {
      ...message,
      isremove: 1
    })
    // 修改聊天记录
    let id = message.chat_type === 'group' ? message.to_id : message.from_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.id === message.id)
    if (index === -1) return;
    list[index].isremove = 1
    // 存储
    this.setStorage(key, list)
    // 当前会话最后一条消息的显示
    this.updateChatItem({
      id,
      chat_type: message.chat_type
    }, (item) => {
      item.data = '对方撤回了一条消息'
      item.update_time = (new Date()).getTime()
      return item
    })
  }
  // 处理消息
  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(async (result, reject) => {
      // 添加消息历史记录
      // 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://akyan.oss-cn-beijing.aliyuncs.com/'))
      let uploadResult = ''
      if (isUpload) {
        uploadResult = await $H.upload('/upload', {
          filePath: message.data
        }, onProgress);
      }
      
      // 提交到后端
      let data = isUpload ? uploadResult : message.data;
      $H.post('/chat/send', {
        to_id: this.TO.id,
        type: message.type,
        chat_type: this.TO.chat_type,
        data,
        options: JSON.stringify(message.options)
      }).then(res => {
        // 发送成功
        console.log('chat.js发送成功');
        message.id = res.id
        message.sendStatus = 'success';
        if (message.type === 'video') {
          message.data = res.data;
          message.options = res.options;
        }
        // 更新指定历史记录
        console.log('更新指定历史记录',message);
        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 deleteChatDetailItem(message,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 === message.k || item.id === message.id);
    if (index === -1) return;
    
    list.splice(index,1);
    // 存储
    this.setStorage(key, list);
  }
  // 更新指定历史记录
  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, isSend) {
    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() {
    let key = `chatlist_${this.user.id}`
    return this.getStorage(key)
  }
  getChatList_old(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 updateChatItem(where, data) {
    // 获取所有会话列表
    let list = this.getChatList();
    // 找到当前会话
    let index = list.findIndex(item => item.id === where.id && item.chat_type === where.chat_type);
    if (index === -1) return;
    // 更新数据
    if(typeof data === 'function'){
      list[index] = data(list[index])
    }else{
      list[index] = data
    }
    
    let key = `chatlist_${this.user.id}`;
    this.setStorage(key, list);
    // 更新会话列表状态
    uni.$emit('onUpdateChatList', list);
  }
  // 读取指定会话
  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);
    }
  }
  // 删除指定会话
  async removeChatItem(id, chat_type) {
    // 获取所有会话列表
    let list = this.getChatList();
    // 找到当前会话
    let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
    if (index !== -1) {
      list.splice(index, 1);
      let key = `chatlist_${this.user.id}`;
      this.setStorage(key, list);
      // 重新获取未读数
      this.updateBadge();
      // 更新会话列表状态
      uni.$emit('onUpdateChatList', list);
    }
  }
  // 清空聊天记录
  async clearChatDetail(id, chat_type) {
    let key = `chatDetail_${this.user.id}_${chat_type}_${id}`;
    $U.removeStorage(key);
    // 获取所有会话列表
    let list = this.getChatList();
    // 找到当前会话
    let index = list.findIndex(item => item.id === id && item.chat_type === chat_type);
    if (index !== -1) {
      list[index].data = '';
      let key = `chatlist_${this.user.id}`;
      this.setStorage(key, list);
      // 更新会话列表状态
      uni.$emit('onUpdateChatList', list);
    }
  }
  /**
     {
      id:1, // 接收人/群 id
      chat_type:'user', // 接收类型 user单聊 group群聊
      avatar:'', // 接收人/群 头像
      name:'昵称', // 接收人/群 昵称
      update_time:(new Date()).getTime(), // 最后一条消息的时间戳
      data:"最后一条消息内容", // 最后一条消息内容
      type:'text',       // 最后一条消息类型
      noreadnum:0, // 未读数
      istop:false, // 是否置顶
      shownickname:0, // 是否显示昵称
      nowarn:0, // 消息免打扰
      strongwarn:0, // 是否开启强提醒
      
      user_id:0, // 群管理员id
      remark:"公告", // 群公告
      invite_confirm:0, // 邀请确认
     }
     * **/
  // 初始化会话
  initChatListItem(message) {
    // 获取本地存储会话列表
    let list = this.getChatList()
    // 会话是否存在
    let index = list.findIndex(item => {
      return item.chat_type === message.chat_type && item.id === message.to_id
    })
    // 最后一条消息展现形式
    let data = this.formatChatItemData(message, true)
    // 会话不存在,创建会话
    if (index === -1) {
      let chatItem = {
        id: message.to_id, // 接收人/群 id
        chat_type: message.chat_type, // 接收类型 user单聊 group群聊
        avatar: message.to_avatar, // 接收人/群 头像
        name: message.to_name, // 接收人/群 昵称
        update_time: (new Date()).getTime(), // 最后一条消息的时间戳
        data: message.data, // 最后一条消息内容
        type: 'system', // 最后一条消息类型
        noreadnum: 0, // 未读数
        istop: false, // 是否置顶
        shownickname: false, // 是否显示昵称
        nowarn: false, // 消息免打扰
        strongwarn: false, // 是否开启强提醒
      }
      // 群聊
      if (message.chat_type === 'group' && message.group) {
        chatItem = {
          ...chatItem,
          user_id: message.group.user_id, // 群管理员id
          remark: '', // 群公告
          invite_confirm: message.group.invite_confirm, // 邀请确认
        }
      }
      list.unshift(chatItem)
      // 存储
      let key = `chatlist_${this.user.id}`
      this.setStorage(key, list)
      // 通知更新vuex中的聊天会话列表
      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, value) {
    return $U.setStorage(key, JSON.stringify(value));
  }
  // 数组置顶
  listToFirst(arr, index) {
    if (index != 0) {
      arr.unshift(arr.splice(index, 1)[0]);
    }
    return arr;
  }
  // 撤回消息
  recall(message) {
    return new Promise((result, reject) => {
      $H.post('/chat/recall', {
        to_id: message.to_id,
        chat_type: message.chat_type,
        id: message.id,
      }).then(res => {
        // key值:chatDetail_当前用户id_会话类型_接收人/群id
        let key = `chatDetail_${this.user.id}_${message.chat_type}_${message.to_id}`
        // 获取原来的聊天记录
        let list = this.getChatDetail(key)
        // 根据k查找对应聊天记录
        let index = list.findIndex(item => item.id === message.id)
        if (index === -1) return;
        list[index].isremove = 1
        // 存储
        this.setStorage(key, list)
        result(res)
        // 更新会话最后一条消息显示
        this.updateChatItem({
          id: message.to_id,
          chat_type: message.chat_type
        }, (item) => {
          item.data = '你撤回了一条消息'
          item.update_time = (new Date()).getTime()
          return item
        })
      }).catch(err => {
        reject(err)
      })
    })
  }
}
export default chat

/store/modules/user.js

import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
import Chat from '@/common/free-lib/chat.js';
import $C from '@/common/free-lib/config.js';
export default {
  state: {
    user: false,
    apply: {
      rows: [],
      count: 0,
    },
    mailList: [],
    chat: null,
    // 会话列表
    chatList: [],
    // 总未读数
    totalNoreadnum: 0,
    notice:{
      avatar:'',
      user_id:0,
      num:0
    }
  },
  mutations:{
    updateUser(state,{k,v}){
      if(state.user){
        state.user[k] = v;
        $U.setStorage('user',JSON.stringify(state.user));
      }
    }
  },
  actions: {
    // 登录后处理
    login({
      state,
      dispatch
    }, user) {
      // 存到状态种
      state.user = user;
      // 存储到本地存储中
      $U.setStorage('token', user.token);
      $U.setStorage('user', JSON.stringify(user));
      $U.setStorage('user_id', user.id);
      // 获取好友申请列表
      dispatch('getApply');
      // 更新角标提示
      dispatch('updateMailBadge');
      // 连接socket
      state.chat = new Chat({
        url: $C.socketUrl
      })
      // 获取会话列表
      dispatch('getChatList');
      // 初始化总未读数角标
      dispatch('updateBadge');
      // 获取朋友圈动态通知
      dispatch('getNotice');
    },
    // 退出登录
    logout({
      state
    }) {
      // 清除登录状态
      state.user = false;
      // 清除本地存储数据
      $U.removeStorage('token');
      $U.removeStorage('user');
      $U.removeStorage('user_id');
      // 关闭socket连接
      state.chat.close();
      state.chat = null;
      // 跳转到登录页
      uni.reLaunch({
        url: '/pages/common/login/login'
      })
      // 注销监听事件
      uni.$off('onUpdateChatList')
      uni.$off('momentNotice')
      uni.$off('totalNoreadnum')
    },
    // 初始化登录状态
    initLogin({
      state,
      dispatch
    }) {
      // 拿到存储的数据
      let user = $U.getStorage('user');
      if (user) {
        // 初始化登录状态
        state.user = JSON.parse(user);
        // 连接socket
        state.chat = new Chat({
          url: $C.socketUrl
        })
        // 获取会话列表
        dispatch('getChatList');
        // 获取离线信息
        // 获取好友申请列表
        dispatch('getApply');
        // 初始化总未读数角标
        dispatch('updateBadge');
      }
    },
    // 获取好友申请列表
    getApply({
      state,
      dispatch
    }, page = 1) {
      $H.get('/apply/' + page).then(res => {
        if (page === 1) {
          state.apply = res
        } else {
          // 下拉刷新
          state.apply.rows = [...state.apply.rows, ...res.rows]
          state.apply.count = res.count
        }
        // 更新通讯录角标提示
        dispatch('updateMailBadge');
      });
    },
    // 更新通讯录角标提示
    updateMailBadge({
      state
    }) {
      let count = state.apply.count > 99 ? '99+' : state.apply.count.toString();
      console.log(state.apply.count);
      if (state.apply.count > 0) {
        return uni.setTabBarBadge({
          index: 1,
          text: count
        })
      }
      uni.removeTabBarBadge({
        index: 1
      })
    },
    // 获取通讯录列表
    getMailList({
      state
    }) {
      $H.get('/friend/list').then(res => {
        state.mailList = res.rows.newList ? res.rows.newList : [];
      })
    },
    // 获取会话列表
    getChatList({ state }){
          state.chatList = state.chat.getChatList()
          // 监听会话列表变化
          uni.$on('onUpdateChatList',(list)=>{
            state.chatList = list
          })
    },
    // 获取朋友圈动态通知
    getNotice({ state }){
      state.notice = state.chat.getNotice();
      if(state.notice.num > 0){
        uni.setTabBarBadge({
          index:2,
          text:state.notice.num > 99 ? '99+' : state.notice.num.toString()
        })
      }else{
        uni.setTabBarBadge({
          index:APIBaseContract
        })
      }
      uni.$on('momentNotice',(notice)=>{
        state.notice = notice
      })
    },
    // 初始化总未读数角标
    // 更新未读数
    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)
    },
    // 初始化总未读数角标
    updateBadge({
      state
    }){
      
      // 开启监听总未读数变化
      uni.$on('totalNoreadnum', (num) => {
        console.log('totalNoreadnum:',num);
        state.totalNoreadnum = num
      })
      state.chat.updateBadge()
    },
  },
}

感谢大家观看,我们下次见

目录
相关文章
|
1天前
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
29 20
|
1月前
|
NoSQL 应用服务中间件 PHP
布谷一对一直播源码服务器环境配置及app功能
一对一直播源码阿里云服务器环境配置及要求
|
1月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
3月前
|
移动开发 Android开发 数据安全/隐私保护
移动应用与系统的技术演进:从开发到操作系统的全景解析随着智能手机和平板电脑的普及,移动应用(App)已成为人们日常生活中不可或缺的一部分。无论是社交、娱乐、购物还是办公,移动应用都扮演着重要的角色。而支撑这些应用运行的,正是功能强大且复杂的移动操作系统。本文将深入探讨移动应用的开发过程及其背后的操作系统机制,揭示这一领域的技术演进。
本文旨在提供关于移动应用与系统技术的全面概述,涵盖移动应用的开发生命周期、主要移动操作系统的特点以及它们之间的竞争关系。我们将探讨如何高效地开发移动应用,并分析iOS和Android两大主流操作系统的技术优势与局限。同时,本文还将讨论跨平台解决方案的兴起及其对移动开发领域的影响。通过这篇技术性文章,读者将获得对移动应用开发及操作系统深层理解的钥匙。
102 12
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
457 0
|
4月前
|
Java PHP
【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能
【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能
【应用服务 App Service】 App Service Rewrite 实例 - 反向代理转发功能
|
4月前
|
Python
【Azure 应用服务】App Service的运行状况检查功能失效,一直提示"实例运行不正常"
【Azure 应用服务】App Service的运行状况检查功能失效,一直提示"实例运行不正常"
|
6月前
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
在uni-app中,使用axios实现网络请求和登录功能涉及以下几个关键步骤: 1. **安装axios和axios-auth-refresh**: 在项目的`package.json`中添加axios和axios-auth-refresh依赖,可以通过HBuilderX的终端窗口运行`yarn add axios axios-auth-refresh`命令来安装。 2. **配置自定义常量**: 创建`project.config.js`文件,配置全局常量,如API基础URL、TenantId、APP_CLIENT_ID和APP_CLIENT_SECRET等。
252 60
|
4月前
|
测试技术
一款功能完善的智能匹配1V1视频聊天App应该通过的测试CASE
文章列举了一系列针对1V1视频聊天App的测试用例,包括UI样式、权限请求、登录流程、匹配逻辑、消息处理、充值功能等多个方面的测试点,并标注了每个测试用例的执行状态,如通过(PASS)、失败(FAIL)或需要进一步处理(延期修改、待定、方案再定等)。
73 0

热门文章

最新文章

下一篇
DataWorks