uni-app 73聊天类封装(八)-添加聊天记录

简介: uni-app 73聊天类封装(八)-添加聊天记录


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(params, 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'
        result(res);
      }).catch(err => {
        // 发送失败
        message.sendStatus = 'fail'
        // 断线重连提示
        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
    }
  }
  // 获取聊天记录
  getChatdetail(key=false){
    key = key ? key : `chatDetail_${this.user.id}_${this.TO.chat_type}_${this.TO.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

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

目录
相关文章
|
13天前
|
前端开发 数据库 UED
uniapp开发,前后端分离的陪玩系统优势,陪玩app功能特点,线上聊天线下陪玩,只要4800
前后端分离的陪玩系统将前端(用户界面)和后端(服务器逻辑)分开开发,前者负责页面渲染与用户交互,后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性,降低维护成本,提升安全性。玩家可发布陪玩需求,陪玩人员发布服务信息,支持在线聊天、预约及线下陪玩功能,满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)
|
2月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
74 3
|
2月前
|
JSON JavaScript 前端开发
harmony-chatroom 自研纯血鸿蒙OS Next 5.0聊天APP实战案例
HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序。这个项目使用了ArkUI和ArkTS技术栈,实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。
121 2
|
4月前
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
5月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
125 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
5月前
|
存储 BI Android开发
全开源仿第八区H5APP封装打包分发系统源码
全开源仿第八区H5APP封装打包分发系统源码
164 4
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
图库,设计类软件,App视频截图软件,外加设计图库,在你截取视频就能够实现图片收录,通过设计类网站后台控制系统,可以提前设置好,统计的分类内容,定义好分类,自动收录图片,再将截图汇总整理展示
|
7月前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
8天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
79 18