uni-app 75聊天类封装(十)-更新会话列表(一)

简介: uni-app 75聊天类封装(十)-更新会话列表(一)


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连接成功');
    // 获取用户离线消息
  }
  // 监听关闭
  onClose() {
    // 用户下线
    this.isOnline = false;
    this.socket = null;
    console.log('socket连接关闭');
  }
  // 监听消息
  onMessage(data) {
    console.log('监听消息', data);
  }
  // 监听连接错误
  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) {
    return new Promise((result, reject) => {
      // 添加消息历史记录
      this.addChatDetail();
      let { data,k } = this.addChatDetail(message, true);
      // 置顶消息记录
      // 验证是否上线
      $H.post('/chat/send', {
        to_id: this.TO.id,
        type: message.type,
        chat_type: this.TO.chat_type,
        data: message.data,
      }).then(res => {
        // 发送成功
        message.id = res.id 
        message.sendStatus = 'success'
        // 更新指定历史记录
        this.updateChatDetail(message,k);
        result(res);
      }).catch(err => {
        // 发送失败
        message.sendStatus = 'fail'
        // 更新指定历史记录
        this.updateChatDetail(message,k);
        // 断线重连提示
        result(err);
      });
    })
  }
    // 添加聊天记录
  addChatDetail(message,isSend=true){
    console.log('添加到聊天记录');
    if(!id){
      return {
        data:{},
        k:0
      }
    }
    // 获取对方id
    let id = isSend ? message.to_id : message.from_id;
    // key值:chetDetail_当前用户id_会话类型_接收人/群id
    let key = `chetDetail_${this.user.id}_${message.chat_type}_${id}`;
    // 获取原来的聊天记录
    let list = this.getChatdetail(key)
    console.log('获取原来的聊天记录',list);
    // 标识
    message.key = 'k'+list.length;
    list.push(message);
    // 加入存储
    console.log('加入存储',k);
    this.setStorage(key,list);
    // 返回
    return {
      data:message,
      k:message.k
    }
  }
  // 更新指定历史记录
  async updateChatDetail(message,k,isSend=true){
    // 获取对方id
    let id = isSend ? message.to_id : message.from_id
    // key值:chetDetail_当前用户id_会话类型_接收人/群id
    let key = `chetDetail_${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);
  }
  // 获取聊天记录
  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{
      // 群聊
    }
    /**
     * {
      id:1,  // 接收人/群 id
      chat_type:'user', // 接收类型 user 单聊 group群聊
      name:'昵称', // 接收人/群 昵称
      avatar:"/static/images/demo/demo6.jpg", // 接收人/群 头像
      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);
  }
  // 获取存储
  getStorage(key){
    let list = $U.getStorage(key);
    return list ? JSON.parse(list) : [];
  }
  // 设置存储
  setStorage(key,value){
    return $U.setStorage(key,JSON.stringify(value));
  }
}
export default chat

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

目录
相关文章
|
2月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
115 0
|
5月前
|
JSON 数据格式
《仿盒马》app开发技术分享-- 分类右侧商品列表(18)
上一节我们实现了分类页左侧二级分类列表功能,并实现了顶部列表&弹窗跟左侧列表的联动,这一节我们需要在它们联动的基础上继续添加右侧列表的联动效果
101 4
|
5月前
|
JSON 数据挖掘 数据格式
《仿盒马》app开发技术分享-- 分类左侧列表(17)
上一节我们实现了分类页面的顶部导航栏全选弹窗列表,并实现了跟顶部列表的点击选中联动效果,这一节我们要实现的功能是,分类模块的左侧列表,它同样也需要跟弹窗列表的点击,顶部列表的点击有联动的效果
102 4
|
5月前
《仿盒马》app开发技术分享-- 分类模块顶部导航列表弹窗(16)
上一节我们实现了分类页面的顶部导航栏列表,并且实现了首页金刚区跟首页导航栏的联动,这一节我们实现导航栏列表的弹窗功能,需要学习的知识点有自定义弹窗,同时我们的数据源需要跟分类页保持一一致。
111 1
|
5月前
|
JSON 前端开发 数据挖掘
《仿盒马》app开发技术分享-- 分类模块顶部导航列表(15)
上一节我们实现了购物车商品列表的大部分功能,实现了商品的添加、删除、增减、价格计算等业务,并且都跟云端进行通信。现在我们继续对项目进行改造,这一节我们要改造的内容是分类页,这个页面我们在之前的非端云一体化项目中实现过。现在要改造成端云一体的模式,并且我们的金刚区也要实现分类页的点击联动
95 0
|
5月前
|
JSON 前端开发 数据格式
《仿盒马》app开发技术分享-- 加入购物车&加购列表展示(12)
上一节我们实现了商品详情页面的规格选择弹窗,这在任何购物类应用中都是最常用的功能之一。当然了,作为一个购物类的应用,我们仅仅展示是用处不大的,我们还需要有添加的动作。这一节我们就来实现添加到购车里并且在购物车内简单展示的功能
92 0
|
6月前
|
移动开发 缓存 开发框架
轻型社交同城交友圈子系统/兴趣爱好搭子聊天APP/同城本地行业信息圈子论坛
基于 UniApp 和 ThinkPHP6 构建,实现多端同步的轻量级社交系统。前端采用 UniApp 跨端开发框架,支持微信小程序、H5、APP 等多平台,结合 Vue.js 语法与图鸟 UI 组件库,快速构建美观界面。后端使用 TP6 提供 RESTful API,搭配 MySQL 数据库与 Redis 缓存优化性能。核心功能包括兴趣圈子管理、即时通讯、付费圈子、广告与会员体系等。同时,通过七牛云内容检测与实名认证保障社区安全,采用 Nginx+Redis 高并发架构确保稳定性。免费源码,适合开发者快速搭建同城社交平台,并可通过 AI 推荐与 AR 功能进一步提升用户体验。
591 6
|
8月前
|
存储 文件存储 Android开发
仿第八区APP分发下载打包封装系统源码
该系统为仿第八区APP分发下载打包封装系统源码,支持安卓、iOS及EXE程序分发,自动判断并稳定安装。智能提取应用信息,自动生成PLIST文件和图标,提供合理的点数扣除机制。支持企业签名在线提交、专属下载页面生成、云端存储(阿里云、七牛云),并优化签名流程,支持中文包及合并分发,确保高效稳定的下载体验。 [点击查看源码](https://download.csdn.net/download/huayula/90463452)
518 22
|
8月前
|
监控 数据可视化 数据挖掘
【开发者必看—电商篇】数据赋能电商类App转化率循序增长
通过友盟+ 数据分析工具,团队深入分析了用户行为路径、转化漏斗、停留时间及错误事件等关键数据,定位到用户体验与产品性能的问题。经过精准优化,包括简化购物流程、修复技术故障及提升稳定性,最终显著提高了用户转化率。这一案例展示了数据驱动在产品优化中的重要作用。
【开发者必看—电商篇】数据赋能电商类App转化率循序增长
|
8月前
|
监控 搜索推荐 数据挖掘
【开发者必看—阅读篇】数据赋能阅读类App精准获客
友盟+深度数据洞察技术,可以实现用户获取的高精准度与快速增长。
【开发者必看—阅读篇】数据赋能阅读类App精准获客

热门文章

最新文章