2021-02-26 Web-im js-sdk开发打包流程

年前初步的完成了im基本版，像单聊，群聊，消息的收发，图片视频，消息右键撤回等功能，年后就开始主要集中精力进行sdk的开发了。
说下我个人的开发思路：
第一步 新建一个工程不使用脚手架编译js文件，执行npm init -y 生成package.json文件
第二步 由于我原来的im工程代码是用的ts+mobx+react开发的im,所以我这边需要新建一个tsconfig.json来进行响应的配置。具体示例参考官方文档（这里给出链接）：
https://www.tslang.cn/docs/handbook/compiler-options.html
如果对官方文档给出的选项可能不理解，这里给出更详细的说明链接：
https://my.oschina.net/u/4564900/blog/4893389
接下来给出我这边的webpack.config.js文件的配置示例代码如下：

const path = require("path");
module.exports = {
  entry: ["./src/index.ts"],
  output: {
    path: path.join(__dirname, "dist"), //打包输出文件的路径跟文件夹目录
    filename: "bundle.js", //打包输出的文件名字
    library: "webpackNumbers", //表示支持的类型 最终会在打出的js文件下
    libraryTarget: "this",
    umdNamedDefine: true,
    globalObject: "this",
  },
  mode: "production",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    // Add ".ts" and ".tsx" as resolvable extensions.
    extensions: [".ts", ".tsx", ".js"],
  },
};

webpack配置library等参考文章https://zhuanlan.zhihu.com/p/108216236
接下来给出tsconfig.json文件配置的示例代码如下：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "outDir": "./outDir/",   
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noImplicitAny":false,
    "noImplicitThis":false,
    "noEmit": false,
    "jsx": "react",
    "baseUrl": "."
  },
  "exclude": [ // 排除那些文件不打包
    "node_modules",
    "*.test.ts"
  ]
}

接下来简单给出我的项目入口文件index.ts示例代码如下：

import HomeStore from './routes/ZxHome/store'
var store=new HomeStore()

然后再进入store文件看下示例代码：

import {  storage, pinyin, navigate, getSensitiveMsg, getRandomKey, StringKey } from '../../../utils';
import moment from 'moment';
import GdchentWebSocket from './GdchentWebSocket';
import { request } from '../../../config/zxAxios';
import api from '../../../config/apiConfig';
import proToObject from '../../../proto/proto';
import ParseMsgUtil from "../../../utils/ParseMsgUtil";
import ArrayBufferUtil from '../../../utils/ArrayBufferUtil'
import AesUtil from '../../../utils/AesUtil'
import { randomKey } from '../../../utils/secret';
import ChatItemEnum from '../../../enum/ChatItemEnum';
import CommunicationTypeEnum from '../../../enum/CommunicationTypeEnum'
import CommandEnum from '../../../enum/CommandEnum'
import CreateChatGroup from '../../../interface/CreateChatGroup';


const currentTime = moment().valueOf();

let sendHeartTimer: any; //心跳包的定时器

const WEB_SOCKET_TIMEOUT = 50000; //50秒

export default class Store {

  public arrayBufferUtil: ArrayBufferUtil = new ArrayBufferUtil();
  public parseMsgUtil: ParseMsgUtil = new ParseMsgUtil();
  // Socket实例
  gdchentWebSocket: GdchentWebSocket = null;
  // 当前用户的id
  defaultId: string = storage.get('im_defaultId');
  // 当前登录的token
  token: string = '';
  // 当前时间
  currentDate: string = moment(currentTime).format('YYYY-MM-DD');
  // 已收到消息缓存，用于检测消息是否重复，key为msgId
  cacheMessages: { [key: string]: boolean } = {};
  // 可展示聊天消息的类型
  messageTypes = [
    1, // 文字
    2, // 语音
    3, // 图片
    4, // 视频
    5, // 表情
    6, // 链接
    7, // 位置
    8, // 聊天记录
    9, // 文件
    10, // 发红包
    12, // 名片
    20, // 位置共享
    48, // 回复
    51, // 邀请加入群聊
    77, // 群公告
  ];

  // 根据好友id获取好友信息
  friendData = {};

  // 是否触发接收好友，当有值时，跳转到聊天模块，并打新好友的聊天
  acceptFriendDefaultId: any = null;

  // 敏感词
  sensitiveKeywords: any = [];

  // 用户信息
  userInfo: any = {};

  userInfoList: any = [];
  // 聊天列表
  chats: any[] = [];
  // 选中菜单数据
  activeChatData: any = {};
  // 新的好友列表
  newFriends: any[] = [];

  // 好友列表
  friends: any[] = [];

  creatChatGroupsList: any[] = [];

  allGroupMembers: any[] = [];
  // 群组列表
  groups: any = [];

  // 好友列表id和备注名键值对
  remarkNameData = {};

  contextMessage: any = null;

  // 表情列表
  emojis: any = [{ icon: 'love', data: [] }];

  // 用于更新收藏列表
  collectKey: number = 0;

  // 敏感词发送次数
  sensitiveCount: number = 0;

  // 禁止聊天
  disabled: number = 0;

  // websocket连接状态 0表示断开连接
  connect: number = 1;

  //联系人分组的key
  contact_tag: string = 'CONTACT_TAG'

  topList: any[] = []

  //storage的key的常量
  public SDK_ACCT_LOGIN_KEY = 'sdkacctLogin'
  public CACHE_CHATS_KEY = `im_${this.defaultId}_chats`
  public LAST_MESSAGE_KEY: string = 'lastmessageKey'
  public ACTIVE_CHAT_DATA_KEY: string = 'activeChatDataKey'
  public CHAT_TOP_DATA = 'CONVERSATION_PIN_TAG'
  //websocket
  webWocketUrl: string = '';//服务器地址

  appId: string = '9eb745a14c44b7f5badbbb92092ee8e9#Jiao-IM-Demo';

  //用户id
  userId: string = '';
  //设备id
  deviceId: string = 'deviceId1'

  private isFirstActiveChatData: boolean = false;
  public sdkacctLogin: any;
  public aes = new AesUtil()

  constructor() {
    this.init()
  }
  public async init() {
    await this.getNewFriends()
    await this.getFriendList()
    await this.getLocalChatList()
    await this.getChatGroupLists()
    //await this.setDemoKvDataSet([])
    this.getDemoKvDataGet()
    this.initWebSocket()
    await this.getChatTopData()
    const userInfo = await storage.getF(StringKey.USER_INFO)
    if (!userInfo) {
      navigate('/zxlogin')
    } else {
      this.userInfo = userInfo
    }
  }

  //获取本地的会话列表
  public getLocalChatList = async () => {
    let cacheChats = await storage.getF(this.CACHE_CHATS_KEY)
    if (!cacheChats) {
      console.log('当前没有离线缓存列表')
      return;
    }
    if (cacheChats) {
      this.chats = cacheChats;
      if (!this.isFirstActiveChatData && Array.isArray(cacheChats) && cacheChats.length > 0) {
        cacheChats[0][StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
        cacheChats[0][StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
        this.activeChatData = cacheChats[0]
        let newChats: any = []
        newChats = newChats.concat(cacheChats)
        cacheChats.forEach(async (item, index) => {
          const { conversationId }: any = cacheChats[index];
          if (conversationId) {
            //console.log('获取的离线消息id', conversationId)
            //通过会话id拉取离线消息
            await this.getPullOfflineMessageList({
              communicationId: conversationId
            })
          }
        })
      }
      this.isFirstActiveChatData = true;
    }
  }

  public getPullOfflineMessageList = async ({
    communicationId,
    count = 20,
    deviceType = 2, //2表示web端
  }: any) => {
    //拉取离线消息
    const protoTime = await storage.getF(this.LAST_MESSAGE_KEY);
    if (protoTime) {
      const { lastMsgReceiveTime, lastMsgSequenceId }: any = protoTime
      const params = {
        count: count,
        deviceType: deviceType,
        lastMsgReceiveTime: lastMsgReceiveTime,
        endMsgId: lastMsgSequenceId,
        communicationId: communicationId,
      }
      const messageRes = await request({
        method: 'GET',
        url: api.GET.zxGetPullOfflineMessageList,
        data: params
      })
      const { code, hasError, data } = messageRes
      if (code == '0' && !hasError) {
        //清理7天前会话
        // 截取20条
        if (data) {
          let { msgList } = data;
          if (!msgList || msgList.length <= 0) {
            console.log('拉取的离线消息为空')
            return;
          }
          //将离线消息拼接入本地在线消息
          let cacheChats = await storage.getF(this.CACHE_CHATS_KEY)
          if (cacheChats && Array.isArray(cacheChats)) {
            const findCacheChat: any = cacheChats.find((item, index) => {
              return item['conversationId'] === communicationId
            })
            if (findCacheChat) {
              if (findCacheChat && Array.isArray(findCacheChat[StringKey.MESSAGES_KEY])) {
                findCacheChat.messages.forEach((itemMessage: any, index: number) => {
                  msgList = msgList.filter((itemMsg: any, index: number) => {
                    return itemMsg['messageId'] !== itemMessage['messageId']
                  })
                })
                findCacheChat.messages = findCacheChat.messages.concat(msgList)
                if (findCacheChat['conversationId'] === this.activeChatData['conversationId']) {
                  //console.log('findCacheChat',JSON.stringify(findCacheChat))
                  this.setRefreshActiveChatData(findCacheChat)
                }
                this.setObserverChatList(findCacheChat, false)
              } else {
                console.log('搞操作前不是数组')
              }
            }

          }
        }
      }
    }
  }


  public getCacheActiveGroupToActiveData = async (contactItem: any) => {
    let cacheChats: any = await storage.getF(this.CACHE_CHATS_KEY)
    if (cacheChats && Array.isArray(cacheChats) && cacheChats.length > 0) {
      let cacheItem = cacheChats.find((item, index) => {
        return item[StringKey.COMMUNICATIONID] === contactItem[StringKey.COMMUNICATIONID]
      })
      if (cacheItem) {
        return cacheItem;
      }
    }
    return contactItem
  }

  public getCacheActiveToActiveData = async (contactItem: any) => {
    let cacheChats: any = await storage.getF(this.CACHE_CHATS_KEY)
    if (cacheChats && Array.isArray(cacheChats) && cacheChats.length > 0) {
      let cacheItem = cacheChats.find((item, index) => {
        return item['userId'] === contactItem['userId'] && item[StringKey.CONVERSATIONID] === contactItem[StringKey.CONVERSATIONID]
      })
      if (cacheItem) {
        return cacheItem;
      }
    }
    return contactItem
  }

  //联系人到会话
  public setActiveContactAndRefreshChatList = async (chatItem: any, isCreateTop = false) => {
    if (!chatItem) {
      if (process.env.NODE_ENV === 'development') {
        console.log('setActiveContactAndRefreshChatList——chatItem传入有问题', chatItem)
      }
      return;
    }
    chatItem[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
    chatItem[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
    const createChatTime = new Date().getTime()
    chatItem[StringKey.CREATE_CHAT_TIME] = createChatTime
    let cacheChats: any = await storage.getF(this.CACHE_CHATS_KEY)
    if (cacheChats && Array.isArray(cacheChats) && cacheChats.length > 0) {
      let newActiveIndex = cacheChats.findIndex((value, index) => {
        if (value[StringKey.ACTIVE] == ChatItemEnum.CHAT_ITEM_ACTIVE) {
          value[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_NO_ACTIVE;
        }
        return chatItem[StringKey.COMMUNICATIONID] === value[StringKey.COMMUNICATIONID]
        //return chatItem['userId'] === value['userId']
      })

      if (newActiveIndex != -1) {
        this.activeChatData = cacheChats[newActiveIndex]
        this.activeChatData[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
        this.activeChatData[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
        if (!this.activeChatData[StringKey.CREATE_CHAT_TIME]) {
          this.activeChatData[StringKey.CREATE_CHAT_TIME] = createChatTime
        }
        this.setRefreshActiveChatData(this.activeChatData)
      } else {
        cacheChats.unshift(chatItem)
        await storage.setF(this.CACHE_CHATS_KEY, cacheChats)
        this.getLocalChatList()
      }
    } else {
      cacheChats = []
      cacheChats.unshift(chatItem)
      await storage.setF(this.CACHE_CHATS_KEY, cacheChats)
      this.getLocalChatList()
    }
  }

  public deleteChatItem = async (chatItem: any) => {
    let cacheChats: any = await storage.getF(this.CACHE_CHATS_KEY)
    if (cacheChats && cacheChats.length > 0) {
      cacheChats = cacheChats.filter((item: any, index: number) => {
        return chatItem['conversationId'] !== item['conversationId']
      })
      await storage.setF(this.CACHE_CHATS_KEY, cacheChats)
      this.getLocalChatList()
    }
  }
  public setObserverChatList =
    async (chatItem: any, isCreateTop = false, isUpdateMessage = false) => {
      let cacheChats: any = await storage.getF(this.CACHE_CHATS_KEY)
      if (cacheChats && cacheChats.length > 0) {
        cacheChats.forEach((item: any, index: number) => {
          if (item[StringKey.ACTIVE] === ChatItemEnum.CHAT_ITEM_ACTIVE) {
            item[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_NO_ACTIVE
          }
        })
        let existIndex = -1
        let cacheConversationChat: any;
        cacheChats.forEach((item: any, index: number) => {
          if (chatItem[StringKey.COMMUNICATIONID] === item[StringKey.COMMUNICATIONID]) {
            cacheConversationChat = item
            existIndex = index;
          }
        })
        if (isCreateTop) {
          if (!cacheConversationChat) {
            chatItem[StringKey.IS_TOP] = isCreateTop
            cacheChats.unshift(chatItem)
          } else {
            chatItem[StringKey.IS_TOP] = isCreateTop
            let deleteChat = cacheChats.splice(existIndex, 1)
            cacheChats.unshift(chatItem)
          }
          this.addRefreshTopList(chatItem)
        } else {
          chatItem[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
          chatItem[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
          if (!cacheConversationChat) {
            cacheChats.unshift(chatItem)
          } else {
            cacheConversationChat[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
            cacheConversationChat[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
            let jsChatMessages = chatItem[StringKey.MESSAGES_KEY]
            if (jsChatMessages && Array.isArray(jsChatMessages) && jsChatMessages.length > 0) {
              // console.log('cacheConversationChat:', cacheConversationChat)
              cacheConversationChat[StringKey.MESSAGES_KEY] = jsChatMessages
              if (isUpdateMessage) {
                let deleteChat = cacheChats.splice(existIndex, 1)
                cacheChats.unshift(chatItem)
              }
            }
          }
        }
      } else {
        chatItem[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
        chatItem[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
        cacheChats = []
        cacheChats.unshift(chatItem)
      }
      const topArray: any = []
      const sendTimeSortArray: any = []
      cacheChats.forEach((cacheChatItem: any, index: number) => {
        const { isPin } = cacheChatItem
        if (isPin) {
          topArray.push(cacheChatItem)
        } else {
          sendTimeSortArray.push(cacheChatItem)
        }
      })
      sendTimeSortArray.sort((itemA: any, itemB: any) => {
        const { sendTime: sendTimeA } = itemA
        const { sendTime: sendTimeB } = itemB
        if (sendTimeA > sendTimeB) {
          return -1;
        }
        return 0;
      })
      cacheChats = topArray.concat(sendTimeSortArray)
      await storage.setF(this.CACHE_CHATS_KEY, cacheChats)
      this.getLocalChatList()
    }

  //添加多端同步置顶数据
  public addRefreshTopList = async (chatItem: any) => {
    if (chatItem) {
      let findHaveItem = this.topList.find((item, index) => {
        return chatItem[StringKey.COMMUNICATIONID] === item[StringKey.COMMUNICATIONID]
      })
      if (!findHaveItem) {
        this.topList.unshift(chatItem)
      }
      this.setChatTopData()
    }
  }

  public deleteTopItemData = async (chatItem: any) => {
    if (chatItem) {
      this.topList = this.topList.filter((item, index) => {
        return chatItem[StringKey.COMMUNICATIONID] !== item[StringKey.COMMUNICATIONID]
      })
      let cacheChats: any = await storage.getF(this.CACHE_CHATS_KEY)
      if (cacheChats && cacheChats.length > 0) {
        let existIndex = -1
        const findActiveChat = cacheChats.find((item: any, index: number) => {
          if (chatItem[StringKey.COMMUNICATIONID] === item[StringKey.COMMUNICATIONID]) {
            existIndex = index;
          }
          return chatItem[StringKey.COMMUNICATIONID] === item[StringKey.COMMUNICATIONID];
        })
        if (findActiveChat) {
          chatItem[StringKey.IS_TOP] = false
          console.log('开始取消置顶', chatItem)
          let deleteChat = cacheChats.splice(existIndex, 1)
          cacheChats.push(chatItem)
          cacheChats = this.chatSort(cacheChats)
          await storage.setF(this.CACHE_CHATS_KEY, cacheChats)
          this.getLocalChatList()
        }
      }
    }
  }

  public chatSort = (cacheChats: any[]) => {
    const topArray: any = []
    const sendTimeSortArray: any = []
    cacheChats.forEach((cacheChatItem, index) => {
      const { isPin } = cacheChatItem
      if (isPin) {
        topArray.push(cacheChatItem)
      } else {
        sendTimeSortArray.push(cacheChatItem)
      }
    })
    sendTimeSortArray.sort((itemA: any, itemB: any) => {
      const { sendTime: sendTimeA } = itemA
      const { sendTime: sendTimeB } = itemB
      if (sendTimeA > sendTimeB) {
        return -1;
      }
      return 0;
    })
    cacheChats = topArray.concat(sendTimeSortArray)
    return cacheChats
  }

  public groupExit = async (groupId: string) => {
    const res = await request({
      method: 'POST',
      url: api.POST.zxGroupExit,
      data: {
        groupId: groupId
      }
    })
    const { code, hasError, data } = res;
    if (code === '0' && !hasError) {
      this.getChatGroupLists()
    }
  }
  //选中会话
  public setRefreshActiveChatData = async (activeChatData: any) => {
    if (!activeChatData) {
      if (process.env.NODE_ENV === 'development') {
        console.log('保存的activeChatData为空')
      }
      return
    }
    activeChatData[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
    activeChatData[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
    await storage.setF(this.ACTIVE_CHAT_DATA_KEY, activeChatData);
    this.activeChatData = activeChatData
  }

  public recallMessage = async ({ conversationId = '', messageId = '' }) => {
    const dataParams = {
      conversationId: conversationId,
      messageId: messageId
    }
    const res = await request({
      method: 'POST',
      url: api.POST.zxMsgRecall,
      data: dataParams
    })
    const { code, hasError, data } = res
    if (code == '0' && !hasError) {
      this.deleteMessages(messageId)
    } else {
      const { error } = res
    }
  }
  // 删除消息
  public deleteMessages = async (messageIds: string | string[]) => {
    messageIds = [].concat(messageIds);
    this.chats = this.chats.map((item) => {
      if (item.active === ChatItemEnum.CHAT_ITEM_ACTIVE) {
        let messages = item.messages.filter(({ messageId }: any) => {
          return !messageIds.includes(messageId)
        })
        let itemObject = {
          ...item, messages: messages
        }
        this.setRefreshActiveChatData(itemObject)
        return itemObject;
      }
      return item;
    });
    await storage.setF(this.CACHE_CHATS_KEY, this.chats)
    this.getLocalChatList()
  }
  // 初始化websocket
  public initWebSocket = async () => {
    const sdkLogin = await storage.getF(this.SDK_ACCT_LOGIN_KEY)
    if (!!sdkLogin) {
      this.sdkacctLogin = sdkLogin;
      if (!!this.sdkacctLogin) {
        const { user_id, access_token } = this.sdkacctLogin
        this.userId = user_id;
        this.token = access_token;
        this.sendReqBindUserChannel()
      }
    }
  }
  public async sendReqBindUserChannel() {
    const params = {
      appId: this.appId,    //应用ID
      userId: this.userId,  //用户ID
      token: this.token,    //验证码
      manufacturer: 'web',  // 手机厂商
      deviceId: this.deviceId,  // 手机厂商
      osVersion: 'web',     // 系统版本
    }
    const proto: any = proToObject
    const { ReqBindUserChannel }: any = proto
    let protoName = 'ReqBindUserChannel';
    let command = CommandEnum.COMMAND_BIND_USER_REQ
    this.sendWebSocketMessage(
      params,
      ReqBindUserChannel,
      protoName,
      command
    )
  }

  public sendMessage = async ({
    content,
    messageType = 1,
    communicationType = CommunicationTypeEnum.PERSON_MESSAGE,
    communicationId = '',
    toUserId = ''
  }: any) => {

    if (!this.activeChatData || !this.activeChatData[StringKey.COMMUNICATIONID]) {
      return;
    }
    if (process.env.NODE_ENV === 'development') {
      console.log('激活的会话数据', this.activeChatData)
    }
    const {
      conversationId,
      userId,
    }: any = this.activeChatData

    const userInfo = await storage.getF('userInfo')
    const { avatar, nickname } = userInfo
    const otherInfo = {
      userInfo: {
        "userId": userInfo['userId'],
        "avatarUrl": avatar,
        "username": nickname
      }
    }

    if (!communicationId && this.activeChatData[StringKey.COMMUNICATIONID]) {
      communicationId = this.activeChatData[StringKey.COMMUNICATIONID]
    }
    if (!toUserId) {
      if (userId) {
        toUserId = userId
      } else {
        toUserId = ''
      }
    }
    if (this.activeChatData[StringKey.COMMUNICATION_Type]
      && communicationType !== this.activeChatData[StringKey.COMMUNICATION_Type]) {
      communicationType = this.activeChatData[StringKey.COMMUNICATION_Type]
    }
    if (!communicationId || !this.userId) {
      console.log('发送消息有参数为空了')
      return;
    }
    let tag = getRandomKey(16)
    const params = {
      appId: this.appId,    //string 对应平台产品APP_ID
      communicationId: communicationId, //string 所在会话ID
      fromUserId: this.userId,  // string 发送方用户ID
      toUserId: toUserId,   // string接收方用户ID
      sendTime: new Date().getTime(),   //int64 发送时间 时间戳
      communicationType: communicationType,     // int32 消息类型：1=个人消息；2=群组消息；3=公众号消息
      messageType: messageType,     // 消息类型：1=文本消息；2=表情消息；3=文件；4=图片；5=语音消息；6=视频消息；7=位置消息；8=命令；9=自定义消息；10=系统消息；11=音视频消息；12=红包消息
      content: content, // string消息文本
      setting: '',  //string 消息设置
      other: JSON.stringify(otherInfo),
      tag: tag,
    }
    const proto: any = proToObject
    //console.log('proto', proto)
    const { CommunicationMessageProto }: any = proto
    let protoName = 'CommunicationMessageProto';
    let command = CommandEnum.COMMAND_SEND_MSG_REQ
    storage.setF(tag, params)
    await this.createSendMessageChats(params, command)
    let that = this;
    setTimeout(() => {
      that.sendWebSocketMessage(
        params,
        CommunicationMessageProto,
        protoName,
        command,
      )
    }, 1000);

  }


  public createSendMessageChats = async (sendData: any, command: number) => {
    const {
      appId,    //string 对应平台产品APP_ID
      communicationId,  //string 所在会话ID
      fromUserId,   // string 发送方用户ID
      toUserId, // string接收方用户ID
      sendTime, //int64 发送时间 时间戳
      communicationType,    // int32 消息类型：1=个人消息；2=群组消息；3=公众号消息
      messageType,      // 消息类型：1=文本消息；2=表情消息；3=文件；4=图片；5=语音消息；6=视频消息；7=位置消息；8=命令；9=自定义消息；10=系统消息；11=音视频消息；12=红包消息
      content,  // string消息文本
      setting,  //string 消息设置
      other,
      tag,
    } = sendData

    const itemMessage = JSON.parse(JSON.stringify(sendData))
    itemMessage[StringKey.SEND_MESSAGE_STATUS] = StringKey.SEND_MESSAGE_FAIRED
    itemMessage[StringKey.COMMAND_KEY] = command

    this.chats.forEach((value, index) => {
      if (value[StringKey.ACTIVE] == ChatItemEnum.CHAT_ITEM_ACTIVE) {
        value[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_NO_ACTIVE
      }
    })
    if (communicationType == CommunicationTypeEnum.PERSON_MESSAGE
      || communicationType == CommunicationTypeEnum.GROUP_MESSAGE) {
      // 检测聊天列表是否存在
      const findChatIndex = this.chats.findIndex((item) => item.communicationId === communicationId);
      //console.log('findChatIndex', findChatIndex)
      const findChat = this.chats[findChatIndex];
      //console.log('findChatIndex', findChat)
      if (findChat) {
        // 创建聊天后，选中聊天
        // 设置未读数量
        // 自己发的消息不计算
        // 非选中聊天才展示未读数量
        // 追加消息
        let messages = []
        itemMessage[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
        messages.push(itemMessage)
        if (findChat.messages) {
          findChat.messages?.push(...messages)
        } else {
          findChat.messages = messages
        }
        //让当前激活的active会话item插入消息列表数据
        this.activeChatData.messages = findChat.messages
        let toJsActiveChatData = this.activeChatData
        console.log("toJsActiveChatData" + command, toJsActiveChatData)
        await this.setRefreshActiveChatData(toJsActiveChatData)
        // 聊天已经置顶则不做处理，如果未置顶则将其移动至置顶的后面
        //this.chats.splice(findChatIndex, 1);
        //this.chats.unshift(findChat);
        this.setObserverChatList(findChat, false)
      } else {
        //会话聊天列表不存在 创建会话
        const findFriendChatIndex = this.friends.findIndex((item) => item.communicationId === communicationId);
        const findFriendChat = this.friends[findFriendChatIndex];
        //console.log('command11-联系人找会话消息', findFriendChat)
        if (findFriendChat) {
          let messages = []
          messages.push(itemMessage)
          findFriendChat[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
          findFriendChat[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
          findFriendChat[StringKey.MESSAGES_KEY] = messages
          this.activeChatData.messages = messages
          let toJsActiveChatData = this.activeChatData
          //console.log(toJsActiveChatData)
          this.setRefreshActiveChatData(toJsActiveChatData)
          this.setObserverChatList(findFriendChat, true)
        } else {
          if (communicationType == CommunicationTypeEnum.GROUP_MESSAGE) {
            let messages = []
            messages.push(itemMessage)
            itemMessage[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
            itemMessage[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
            itemMessage[StringKey.MESSAGE_ID] = itemMessage[StringKey.MESSAGE_ID]
            itemMessage[StringKey.MESSAGES_KEY] = messages
            this.activeChatData.messages = messages
            let toJsActiveChatData = this.activeChatData
            //console.log(toJsActiveChatData)
            this.setRefreshActiveChatData(toJsActiveChatData)
            this.setObserverChatList(findFriendChat, true)
          } else if (communicationType == CommunicationTypeEnum.PERSON_MESSAGE) {
            console.log('command联系人中找不到该好友')
          } else {
            console.log('command联系人中找不到该好友else情况')
          }
        }
      }
    }
  }

  public sendWebSocketMessage = async (
    params: any,
    method: any,
    protoName: string,
    command: number
  ) => {
    const sdkacctLogin = await storage.getF(this.SDK_ACCT_LOGIN_KEY)
    if (!!sdkacctLogin) {
      const { im_module } = sdkacctLogin
      if (!!im_module) {
        //console.log('im_module', im_module)
        const { server_addr, wssocket_port, }: any = im_module
        this.webWocketUrl = `ws://${server_addr}:${wssocket_port}`
        if (this.webWocketUrl) {
          const ret: ArrayBuffer = this.templateFun(
            this.appId,
            this.userId,
            this.deviceId,
            params,
            method,
            protoName,
            command
          )
          this.getWebSocketInstance().createSocket(this.webWocketUrl, ret)
        }
      } else {
        console.log('sdk登录信息-json数据解析异常!')
      }
    } else {
      console.log('获取登录信息失败-跳到登录页面')
      navigate('/zxlogin')
    }
  }
  //proto模板函数
  public templateFun(
    appId: string,
    userId: string,
    deviceId: string,
    param: string,
    method: any,
    protoName: any,
    command: number,
  ): ArrayBuffer {
    //console.log("methodName", methodName, protoName);
    // 函数模板
    let createProto = method.create(param); //  开始创建
    console.log("编码前createProto", createProto);
    let encodeProto = method.encode(createProto).finish(); // 对proto对象进行编码
    console.log("编码后的东西", encodeProto);
    const proto: any = proToObject;
    let protoData = proto[protoName].decode(encodeProto);
    console.log("解码protoData", protoData);
    let encryptionResult = encodeProto;
    // if (command !== COMMAND_PING) {
    //   console.log("aes解密", this.aes.socketDecrypt(encryptionResult));
    // }
    //改交由后台来处理加密了 主要这里会出现前端加密图片地址之类 后端那边会出现解密出错情况
    //let encryptionResult = aes.socketEncrypt(encodeProto); // 编码后的结果拿来加密
    //console.log("encryptionResult解码前的长度", encryptionResult.length);
    //console.log("encryptionResult加密后", encryptionResult);
    //let Base64 = require("js-base64").Base64;
    //encryptionResult = Base64.decode(encryptionResult); //Base64解密
    //console.log("base64解码后", encryptionResult);
    //console.log("encryptionResult解码后的长度",encryptionResult.length);
    //ParseMsgUtil.bindUserDecodeMessage(encryptionResult); //解密消息
    const ret = this.arrayBufferUtil.generateDataPacket(
      protoName,
      encryptionResult,
      appId,
      userId,
      deviceId,
      command
    );
    return ret;
  }

  public getWebSocketInstance(): GdchentWebSocket {
    if (!this.gdchentWebSocket) {
      this.gdchentWebSocket = new GdchentWebSocket(
        this.webSocketMessageCallBack,
        this.connectSuccessCallBack,
        this.connectErrorCallBack
      )
    }
    return this.gdchentWebSocket;
  }
  public connectErrorCallBack = () => {
    this.connect = 0;
  }
  public webSocketMessageCallBack = (event: any) => {
    this.connect = 1
    if (this.parseMsgUtil) {
      console.log('接收到服务器消息', event)
      this.parseMsgUtil.parseMsg(event.data, (protoData: any, command: number) => {
        console.log('接收到消息页面', protoData, command)
        if (command == CommandEnum.COMMAND_BIND_USER_RESP) {
          //绑定成功
          //console.log('websocket绑定成功', JSON.stringify(protoData))
          const { lastMsgReceiveTime, lastMsgSequenceId } = protoData
          storage.setF(this.LAST_MESSAGE_KEY, {
            lastMsgReceiveTime: lastMsgReceiveTime,
            lastMsgSequenceId: lastMsgSequenceId,
          });
        }
        if (command == CommandEnum.COMMAND_SEND_MSG_REQ) { //10
          console.log('command10', JSON.stringify(protoData))
          const {
            appId,
            communicationId,
            fromUserId,
            toUserId,
            sendTime,
            communicationType,
            messageType,
            content,
            setting,//json字符串
            messageId,
            updateTime,
          } = protoData;
          storage.setF(this.LAST_MESSAGE_KEY, {
            lastMsgReceiveTime: updateTime,
            lastMsgSequenceId: messageId,
          });
          this.createChats(protoData, command)
        }
        if (command == CommandEnum.COMMAND_SEND_MSG_RSP) {
          //11
          console.log('command' + command, JSON.stringify(protoData))
          this.createChatsByCommand11(protoData, command)
        }
        if (command == CommandEnum.COMMAND_PULL_MSG_RESP) {
          console.log('websocket心跳消息' + command, protoData)
          this.createChatsByHeart(protoData, command)
        }
      })
    } else {
      console.log('this.parseUtil不存在', this)
    }
  }


  public createChatsByCommand11 = async (protoData: any, command: number) => {
    /**
     *  "resp":{
        "ret":1218,
        "errorCode":"用户给自己发送消息"
       },
     */
    const {
      resp,
      appId,
      userId,
      communicationId,
      sendTime,
      toUserId,
      tag,
      communicationType,
      messageType
    } = protoData
    if (resp && resp['ret'] == 1218) {
      const { errorCode }: any = resp
      return;
    }
    const itemMessage = JSON.parse(JSON.stringify(protoData))
    const tagInfo = await storage.getF(tag)
    const { content } = tagInfo
    itemMessage['content'] = content
    console.log('发出去的消息自己响应', JSON.stringify(itemMessage))
    this.chats.forEach((value, index) => {
      if (value[StringKey.ACTIVE] == ChatItemEnum.CHAT_ITEM_ACTIVE) {
        value[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_NO_ACTIVE
      }
    })
    if (communicationType == CommunicationTypeEnum.PERSON_MESSAGE
      || communicationType == CommunicationTypeEnum.GROUP_MESSAGE) {
      // 检测聊天列表是否存在
      const findChat = this.chats.find((item) => item.communicationId === communicationId);
      //console.log('findChatIndex', findChat)
      if (findChat && findChat[StringKey.MESSAGES_KEY]) {
        findChat[StringKey.SEND_TIME] = sendTime
        let messages = []
        messages = findChat[StringKey.MESSAGES_KEY]
        let itemFindMessage = messages.find((value: any, index: number) => {
          return value[StringKey.TAG] === tag
        })
        console.log('发出去的消息', itemFindMessage)
        if (itemFindMessage) {
          itemFindMessage[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
          itemFindMessage[StringKey.SEND_TIME] = sendTime
          itemFindMessage[StringKey.SEND_MESSAGE_STATUS] = StringKey.SEND_MESSAGE_SUCCESS
          itemFindMessage[StringKey.COMMAND_KEY] = command
          itemFindMessage[StringKey.MESSAGE_ID] = itemMessage[StringKey.MESSAGE_ID]
          this.activeChatData[StringKey.SEND_TIME] = sendTime
          //让当前激活的active会话item插入消息列表数据
          this.activeChatData.messages = findChat.messages
          let toJsActiveChatData = this.activeChatData
          console.log("发出前toJsActiveChatData" + command, toJsActiveChatData)
          await this.setRefreshActiveChatData(toJsActiveChatData)
          // 聊天已经置顶则不做处理，如果未置顶则将其移动至置顶的后面
          //this.chats.splice(findChatIndex, 1);
          //this.chats.unshift(findChat);
          this.setObserverChatList(findChat, false, true)
        } else {
          //假设用户在发送消息的时候删除本地会话的情况的业务逻辑 保存发送消息 也是几乎不可能发生的情况 预防万一
          //导致本地消息tag找不到
          this.createNewChatByNoCurrentChat(protoData, command)
        }
      } else {
        this.createNewChatByNoCurrentChat(protoData, command)
      }
    }
  }
  ////假设在发消息的时候跟收到消息之前这段时间突然删除会话 几乎不可能发生的情况
  //发出消息如果还没收到消息之前突然删除 执行创建的逻辑
  createNewChatByNoCurrentChat = async (protoData: any, command: number) => {
    const {
      resp,
      appId,
      userId,
      communicationId,
      sendTime,
      toUserId,
      tag,
      communicationType,
      messageType
    } = protoData
    const itemMessage = JSON.parse(JSON.stringify(protoData))
    const tagInfo = await storage.getF(tag)
    const { content } = tagInfo
    const userInfo = await storage.getF('userInfo')
    const { avatar, nickname } = userInfo
    const otherInfo = {
      userInfo: {
        "userId": userInfo['userId'],
        "avatarUrl": avatar,
        "username": nickname
      }
    }
    itemMessage['other'] = JSON.stringify(otherInfo)
    itemMessage['content'] = content
    itemMessage[StringKey.COMMAND_KEY] = command
    itemMessage[StringKey.SEND_TIME] = sendTime
    itemMessage[StringKey.SEND_MESSAGE_STATUS] = StringKey.SEND_MESSAGE_SUCCESS
    // 检测聊天列表是否存在
    const findChatIndex = this.chats.findIndex((item) => item.communicationId === communicationId);
    //console.log('findChatIndex', findChatIndex)
    const findChat = this.chats[findChatIndex];
    //console.log('findChatIndex', findChat)
    if (findChat) {
      // 创建聊天后，选中聊天
      // 设置未读数量
      // 自己发的消息不计算
      // 非选中聊天才展示未读数量
      // 追加消息
      let messages = []
      messages.push(itemMessage)
      //[]
      if (findChat.messages) {
        findChat.messages?.push(...messages)
      } else {
        findChat.messages = messages
      }
      //让当前激活的active会话item插入消息列表数据
      this.activeChatData.messages = findChat.messages
      let toJsActiveChatData = this.activeChatData
      //console.log("toJsActiveChatData" + command, toJsActiveChatData)
      await this.setRefreshActiveChatData(toJsActiveChatData)
      this.setObserverChatList(findChat, false)
    } else {
      //会话聊天列表不存在 创建会话
      const findFriendChatIndex = this.friends.findIndex((item) => item.userId === toUserId);
      const findFriendChat = this.friends[findFriendChatIndex];
      if (findFriendChat) {
        let messages = []
        messages.push(itemMessage)
        findFriendChat[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
        findFriendChat[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
        findFriendChat[StringKey.MESSAGE_ID] = itemMessage[StringKey.MESSAGE_ID]
        findFriendChat[StringKey.MESSAGES_KEY] = messages
        this.activeChatData.messages = messages
        let toJsActiveChatData = this.activeChatData
        //console.log(toJsActiveChatData)
        this.setRefreshActiveChatData(toJsActiveChatData)
        this.setObserverChatList(findFriendChat, true)
      } else {
        if (communicationType == CommunicationTypeEnum.GROUP_MESSAGE) {
          let messages = []
          messages.push(itemMessage)
          itemMessage[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
          itemMessage[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
          itemMessage[StringKey.MESSAGE_ID] = itemMessage[StringKey.MESSAGE_ID]
          itemMessage[StringKey.MESSAGES_KEY] = messages
          this.activeChatData.messages = messages
          let toJsActiveChatData = this.activeChatData
          //console.log(toJsActiveChatData)
          this.setRefreshActiveChatData(toJsActiveChatData)
          this.setObserverChatList(findFriendChat, true)
        } else if (communicationType == CommunicationTypeEnum.PERSON_MESSAGE) {
          console.log('command联系人中找不到该好友')
        } else {
          console.log('command联系人中找不到该好友else情况')
        }

      }
    }

  }

  public createChatsByHeart = (protoData: any, command: number) => {
    const { lastMsgSequenceId, lastMsgReceiveTime, chatMsg } = protoData
    if (lastMsgSequenceId && lastMsgReceiveTime) {
      storage.setF(this.LAST_MESSAGE_KEY, {
        lastMsgReceiveTime: lastMsgReceiveTime,
        lastMsgSequenceId: lastMsgSequenceId,
      });
    }
    if (!chatMsg) {
      return;
    }
    for (let i = 0; i < chatMsg.length; i++) {
      let itemMessage = chatMsg[i];
      const {
        resp,
        appId,
        userId,
        communicationId,
        messageId,
        sendTime,
        toUserId,
        communicationType,
        messageType,
        tag,
        deviceType,
        content,
      } = itemMessage
      itemMessage[StringKey.COMMAND_KEY] = command
      itemMessage[StringKey.SEND_TIME] = sendTime
      if (messageType == 1101) {
        this.getChatTopData()
        return;
      }
      if (communicationType == CommunicationTypeEnum.PERSON_MESSAGE
        || communicationType == CommunicationTypeEnum.GROUP_MESSAGE) {
        // 检测聊天列表是否存在
        const findChatIndex = this.chats.findIndex((item) => {
          return item.communicationId === communicationId
        });
        const findChat = this.chats[findChatIndex];
        if (findChat) {
          // 创建聊天后，选中聊天
          // 设置未读数量
          // 自己发的消息不计算
          // 非选中聊天才展示未读数量
          // 追加消息
          let messages = []
          messages.push(itemMessage)
          console.log('心跳接收到的消息', itemMessage)
          if (findChat.messages) {
            let findChatItemMessage = findChat.messages.find((item: any) => item.tag = itemMessage['tag'])
            //let findChatItemMessage = findChat.messages.find((item) => item.messageId = itemMessage['messageId'])
            if (findChatItemMessage) {
              console.log('心跳消息已经存在终止本轮消息', findChatItemMessage)
              continue;
            }
            console.log('消息不存在开始插入消息')
            findChat.messages = findChat.messages.concat(messages)
          } else {
            findChat.messages = messages
          }
          //心跳有重复 所以要放在后面一点
          if (this.chats.length <= 0 || (userId !== this.defaultId && findChat['conversationId'] !== this.activeChatData['conversationId'])) {
            findChat.active = ChatItemEnum.CHAT_ITEM_ACTIVE
            findChat.unReadCount = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
          } else {
            findChat.active = ChatItemEnum.CHAT_ITEM_NO_ACTIVE;
            findChat.unReadCount += 1;
          }
          // this.activeChatData.messages = findChat.messages
          //let toJsActiveChatData = toJS(this.activeChatData)
          //console.log(toJsActiveChatData)
          //this.setRefreshActiveChatData(toJsActiveChatData)
          // 聊天已经置顶则不做处理，如果未置顶则将其移动至置顶的后面
          //this.chats.splice(findChatIndex, 1);
          //this.chats.unshift(findChat);
          this.setObserverChatList(findChat, false)
        } else {
          //会话聊天列表不存在 创建会话
          const findFriendChatIndex = this.friends.findIndex((item) => item.userId === toUserId);
          const findFriendChat = this.friends[findFriendChatIndex];
          console.log('联系人找会话消息', findFriendChat)
          if (findFriendChat) {
            let messages = []
            messages.push(itemMessage)
            findFriendChat[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
            findFriendChat[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
            findFriendChat[StringKey.MESSAGES_KEY] = messages
            this.activeChatData.messages = messages
            let toJsActiveChatData = this.activeChatData
            //console.log(toJsActiveChatData)
            this.setRefreshActiveChatData(toJsActiveChatData)
            this.setObserverChatList(findFriendChat, true)
          } else {
            console.log('联系人中找不到该好友')
          }
        }
      }
    }

  }

  public createChats = async (protoData: any, command: number) => {
    const {
      appId,
      communicationId,
      fromUserId,
      toUserId,
      sendTime,
      communicationType, // 消息类型：1=个人消息；2=群组消息；3=公众号消息
      messageType,//1=文本消息；2=表情消息；3=文件；4=图片；5=语音消息；6=视频消息；7=位置消息；8=命令；9=自定义消息；10=红包消息
      content,
      setting,//json字符串
      messageId,
      updateTime,
      tag,
    } = protoData;

    const itemMessage = JSON.parse(JSON.stringify(protoData))

    itemMessage[StringKey.COMMAND_KEY] = command
    itemMessage[StringKey.SEND_TIME] = sendTime
    if (messageType == 1101) {
      this.getChatTopData()
      return;
    }
    let cacheTag = await storage.getF(tag)
    if (cacheTag) {
      return;
    }
    // 消息类型：1=个人消息；2=群组消息；3=公众号消息
    if (communicationType == CommunicationTypeEnum.PERSON_MESSAGE ||
      communicationType == CommunicationTypeEnum.GROUP_MESSAGE
    ) {
      // 检测聊天列表是否存在
      const findChatIndex = this.chats.findIndex((item) => item.communicationId === communicationId);
      //console.log('findChatIndex', findChatIndex)
      const findChat = this.chats[findChatIndex];
      //console.log('findChatIndex', findChat)
      if (findChat) {
        // 创建聊天后，选中聊天
        // 设置未读数量
        // 自己发的消息不计算
        // 非选中聊天才展示未读数量
        let isCreateTop = false;
        //如果会话列表长度是1个 并且选中的userId跟
        if (this.chats.length <= 0 || (fromUserId !== this.defaultId && findChat[StringKey.COMMUNICATIONID] !== this.activeChatData[StringKey.COMMUNICATIONID])) {
          isCreateTop = true
          findChat[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
          findChat[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO;
        } else {
          findChat[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_NO_ACTIVE;
          findChat[StringKey.UN_READ_COUNT] += 1
        }
        // 追加消息
        let messages = []
        messages.push(itemMessage)
        if (findChat.messages) {
          findChat.messages = findChat.messages.concat(messages)
        } else {
          findChat.messages = messages
        }
        findChat[StringKey.IS_TOP] = false;
        this.activeChatData = findChat;
        let toJsActiveChatData = this.activeChatData
        //console.log(toJsActiveChatData)
        this.setRefreshActiveChatData(toJsActiveChatData)
        // 聊天已经置顶则不做处理，如果未置顶则将其移动至置顶的后面
        //this.chats.splice(findChatIndex, 1);
        //this.chats.unshift(findChat);
        this.setObserverChatList(findChat, false, true)
      } else {
        //会话聊天列表不存在 创建会话
        const findFriendChatIndex = this.friends.findIndex((item) => item.userId === fromUserId);
        const findFriendChat = this.friends[findFriendChatIndex];
        //console.log('联系人找会话消息', findFriendChat)
        if (findFriendChat) {
          let messages = []
          messages.push(itemMessage)
          findFriendChat[StringKey.MESSAGES_KEY] = messages
          findFriendChat[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_ACTIVE
          findFriendChat[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
          findFriendChat[StringKey.IS_TOP] = false;
          this.activeChatData = findFriendChat
          let toJsActiveChatData = this.activeChatData
          //console.log(toJsActiveChatData)
          this.setRefreshActiveChatData(toJsActiveChatData)
          this.setObserverChatList(findFriendChat, false, true)
        } else {
          console.log('联系人中找不到该好友')
        }
      }
    }
  }
  //websocket请求成功
  public connectSuccessCallBack = () => {
    console.log('连接成功，开始发心跳', this)
    this.connect = 1
    sendHeartTimer = setInterval(() => {
      if (sendHeartTimer) {
        if (this.sendHeart && typeof this.sendHeart === 'function') {
          this.sendHeart(); //发送心跳包
          //this.sendHeartEmpty()
        } else {
          console.log('this.sendHeart不是一个函数')
        }
      }
    }, WEB_SOCKET_TIMEOUT);
  }

  //发websocket心跳包
  public sendHeartEmpty = async () => {
    //console.log("开始发送心跳包");
    const protoName = "EmptyResp";
    const protoData = await storage.getF(this.LAST_MESSAGE_KEY)
    let params: any = {
    }
    if (!protoData) {
      params = {
        lastMsgSequenceId: '',
        lastMsgReceiveTime: '',
      }
    } else {
      const { lastMsgSequenceId, lastMsgReceiveTime } = protoData
      params = {
        lastMsgSequenceId: lastMsgSequenceId ? lastMsgSequenceId : '',
        lastMsgReceiveTime: lastMsgReceiveTime ? lastMsgReceiveTime : '',
      };
    }
    //区分全局变量 改成局部变量
    let command: number = CommandEnum.COMMAND_PING; //发出指令码 98
    const proto: any = proToObject;
    const { EmptyResp }: any = proto;
    const ret: ArrayBuffer = this.templateFun(
      this.appId,
      this.userId,
      this.deviceId,
      params,
      EmptyResp,
      protoName,
      command
    );
    this.getWebSocketInstance().createSocket(this.webWocketUrl, ret)
  }
  //发websocket心跳包
  public sendHeart = async () => {
    //console.log("开始发送心跳包");
    const protoName = "HeartBeatMsg";
    const protoData = await storage.getF(this.LAST_MESSAGE_KEY)
    let params: any = {}
    if (!protoData) {
      params = {
        lastMsgSequenceId: '',
        lastMsgReceiveTime: '',
      }
    } else {
      const { lastMsgSequenceId, lastMsgReceiveTime } = protoData
      params = {
        lastMsgSequenceId: lastMsgSequenceId ? lastMsgSequenceId : '',
        lastMsgReceiveTime: lastMsgReceiveTime ? lastMsgReceiveTime : '',
      };
    }
    //区分全局变量 改成局部变量
    const command = CommandEnum.COMMAND_PULL_MSG_REQ;
    const proto: any = proToObject;
    const { HeartBeatMsg }: any = proto;
    const ret: ArrayBuffer = this.templateFun(
      this.appId,
      this.userId,
      this.deviceId,
      params,
      HeartBeatMsg,
      protoName,
      command
    );
    this.getWebSocketInstance().createSocket(this.webWocketUrl, ret)
  }

  public setChatTopData = async () => {
    /**
   * //会话置顶
    key : "CONVERSATION_PIN_TAG"
    value :
   [
     {
        "communicationId": "179qa90yburad3k7gjiuk",
        "isPin": true,
        "pinTime": 1608190636682
   },
   {
       "communicationId": "aaaaa90yburad3k7wwwww",
       "isPin": true,
       "pinTime": 1608190612345
   }
   ]
   */
    const jsonDataArray = this.topList
    const res = await request({
      method: 'POST',
      url: api.POST.zxSetChatTopData,
      data: {
        data: JSON.stringify(jsonDataArray),
        dataType: this.CHAT_TOP_DATA
      }
    })
    const { code, hasError, data } = res;
    if (code === '0' && !hasError) {
      storage.setF(this.CHAT_TOP_DATA, jsonDataArray)
    }
  }
  //获取顶部数据
  public getChatTopData = async () => {
    const res: any = await request({
      method: 'GET',
      url: api.GET.zxGetChatTopData,
      data: {
        dataType: this.CHAT_TOP_DATA
      }
    })
    const { code, hasError, data }: any = res;
    if (code == '0' && !hasError) {
      const { dataValue } = data;
      if (dataValue && typeof dataValue === 'string') {
        let topArray = JSON.parse(dataValue)
        if (topArray) {
          let cacheChats: any = await storage.getF(this.CACHE_CHATS_KEY)
          if (cacheChats && Array.isArray(cacheChats) && cacheChats.length > 0) {
            topArray.forEach((element: any) => {
              cacheChats.forEach((item: any, index: number) => {
                if (item['conversationId'] === element['communicationId']) {
                  if (item[StringKey.IS_TOP] != element[StringKey.IS_TOP]) {
                    item[StringKey.IS_TOP] = true
                    item['communicationId'] = element['communicationId']
                    this.setObserverChatList(item, item[StringKey.IS_TOP])
                  }
                }
              })
            });
          }
          this.topList = topArray
        }
      }
    }
  }

  //添加用户到指定的联系组
  public addUserToContactGroup = async (groupId: string, userId: string) => {
    //通过groupId找到对应的组
    let jsGroups = this.groups
    let groupList = this.userInfoList
    if (jsGroups) {
      for (let i in jsGroups) {
        let value = jsGroups[i]
        if (value['groupId'] == groupId) {
          let { userIds } = value;
          if (userIds) {
            let itemUserId = userIds.find((itemUserId: string, index: number) => {
              return userId === itemUserId
            })
            if (!itemUserId) {
              userIds.push(userId);
              value['userIds'] = userIds
              let itemUser = await this.getUserInfoById(userId)
              if (itemUser && itemUser['userId']) {
                itemUser[StringKey.COMMUNICATIONID] = itemUser[StringKey.CONVERSATIONID]
              }
              //添加到groupArray中
              for (let m in groupList) {
                let groupItem = groupList[m]
                if (groupItem['groupId'] === groupId) {
                  let itemInfo = groupItem['groups'].find((itemInfo: any, index: number) => {
                    return itemInfo['userId'] === userId
                  })
                  if (!itemInfo) {
                    groupItem['groups'].push(itemUser)
                  }
                }
              }
            }
          }
        }
      }
      this.userInfoList = groupList
      this.groups = jsGroups
      this.setDemoKvDataSet(this.groups)
    }
  }

  //删除用户到指定的联系组
  public async deleteUserToContactGroup(groupId: string, userId: string) {
    //通过groupId找到对应的组
    if (this.groups) {
      this.groups.forEach((value: any, index: number) => {
        if (value['groupId'] == groupId) {
          let { userIds } = value;
          if (userIds) {
            userIds = userIds.filter((itemUserId: string, index: number) => {
              return userId != itemUserId;
            })
            value['userIds'] = userIds;
          }
        }
      })
      this.setDemoKvDataSet(
        this.groups
      )
    }
  }
  //通过分组名字来创建分组
  public createGroupByName = async (groupName: string) => {
    if (this.groups) {
      let isHave: boolean = false;
      //如果数组里面有该数组就创建数组
      this.groups.forEach((item: any, index: number) => {
        if (item['groupName'] == groupName) {
          isHave = true
        }
      })
      if (!isHave) {
        const item: any = {
          groupId: randomKey(16),
          groupName: groupName,
          userIds: []
        }
        this.groups.push(item)
        //console.log('groups', this.groups)
        this.setDemoKvDataSet(this.groups)
      } else {
        console.log('已经创建过该组了')
      }
    }
  }

  //创建分组
  public async createContactGroup(item: any) {
    if (this.groups) {
      let isHave: boolean = false;
      this.groups.forEach((itemValue: any, index: number) => {
        if (item['groupId'] == itemValue['groupId']) {
          isHave = true;
        }
      })
      if (!isHave) {
        this.groups.push(item)
      } else {
        console.log('该用户组已经创建了')
      }
      await this.setDemoKvDataSet(this.groups)
      this.getDemoKvDataGet()
    }
  }
  //通过id删除联系组
  public async deleteContactGroupById(groupId: string) {
    //如果当前数组中有该元素那就删除
    if (this.groups) {
      this.groups = this.groups.filter((value: any, index: number) => {
        return value['groupId'] != groupId
      })
      this.setDemoKvDataSet(this.groups)
    }
  }

  //设置好友分组
  public async setDemoKvDataSet(groupArray: any) {
    const dataParams = {
      key: this.contact_tag,
      protocolVersion: 1,
      value: JSON.stringify(groupArray)
    };
    const res = await request({
      method: 'POST',
      url: api.POST.zxPostDemoKvDataSet,
      data: dataParams
    })
    const { code, hasError, data } = res;
    if (code == '0' && !hasError) {
      this.getDemoKvDataGet()
    }
  }
  //获取或者更新好友分组
  public getDemoKvDataGet = async () => {
    const res = await request({
      method: 'GET',
      url: api.GET.zxGetDemoKvDataGet,
      data: {
        key: this.contact_tag
      }
    })
    const { code, hasError, data } = res;
    if (code == '0' && !hasError) {
      const { key, value, version, userId } = data;
      if (value && typeof value == 'string') {
        let groups = JSON.parse(value)
        if (groups && Array.isArray(groups)) {
          this.groups = groups
          let groupList = []
          for (let m in groups) {
            let item = groups[m]
            let userIds = item['userIds']
            let groupId = item['groupId']
            let groupName = item['groupName']

            let promiseList = []
            if (userIds && Array.isArray(userIds) && userIds.length > 0) {
              for (let itemId of userIds) {
                if (itemId) {
                  let itemUser = await this.getUserInfoById(itemId)
                  if (itemUser && itemUser['userId']) {
                    itemUser[StringKey.COMMUNICATIONID] = itemUser[StringKey.CONVERSATIONID]
                  }
                  promiseList.push(itemUser)
                }
              }
            }
            const groupItem = {
              groupId: groupId,
              groupName: groupName,
              groups: promiseList
            }
            groupList.push(groupItem)
          }
          this.userInfoList = groupList

        }
      }
    }
  }

  public getUserInfoById = async (user_id: string) => {
    const res = await request({
      method: 'GET',
      url: api.GET.zxGetUserInfoById,
      data: {
        userId: user_id
      }
    })
    const { code, hasError, data } = res;
    if (code == '0' && !hasError) {
      return data;
    } else {
      return {}
    }
  }

  //sdk 获取新的好友
  public async getNewFriends() {
    const res = await request({
      method: 'GET',
      url: api.GET.zxSdkNewFriendList,
      data: {}
    })
    //console.log('newFriendList', res)
    const { code, data, hasError } = res;
    if (code == '0' && !hasError) {
      if (data && Array.isArray(data)) {
        data.forEach((item, index) => {
          item[StringKey.COMMUNICATIONID] = item[StringKey.CONVERSATIONID]
        })
        this.newFriends = data;
      }

    }
  }

  //sdk 获取联系人列表
  public async getFriendList() {
    const res = await request({
      method: 'GET',
      url: api.GET.zxSdkGetFriendList,
      data: {}
    })
    //console.log('getFriendList', res)
    let { code, data, hasError } = res;
    if (code == '0' && !hasError) {
      if (Array.isArray(data)) {
        const userInfo = await storage.getF('userInfo')
        if (userInfo) {
          const { userId } = userInfo
          data = data.filter((item, index, array) => {
            if (!item[StringKey.MESSAGES_KEY]) {
              item[StringKey.MESSAGES_KEY] = []
            }
            if (!item[StringKey.ACTIVE]) {
              item[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_NO_ACTIVE
            }
            if (!item[StringKey.UN_READ_COUNT]) {
              item[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
            }
            if (!item[StringKey.IS_TOP]) {
              item[StringKey.IS_TOP] = false;
            }
            if (!item[StringKey.COMMUNICATIONID]) {
              item[StringKey.COMMUNICATIONID] = item[StringKey.CONVERSATIONID]
            }
            if (!item[StringKey.COMMUNICATION_Type]) {
              item[StringKey.COMMUNICATION_Type] = CommunicationTypeEnum.PERSON_MESSAGE
            }
            return userId != item.userId
          })
          this.friends = data;
        }

      }
    }
  }

  //sdk 添加好友
  public async addFriend({ remark, userId }: any) {
    //12618400093    179gxkj9wg3g3hhvij9n6
    //12618400094   179gxkjhisvwn56zrzdeb
    //12618400095   179gxkjoo9vh5lcaf8y38
    //zxSdkPostAddFriend
    const res = await request({
      method: 'POST',
      url: api.POST.zxSdkPostAddFriend,
      data: {
        remark: remark,
        userId: userId,
      }
    })
    //console.log('添加好友成功', res)
    const { code, data, hasError } = res;
    if (code == '0' && !hasError) {
    }
  }
  //sdk 接受好友邀请
  public async acceptFriend(userId: string) {
    ///sdk/v1/user/friend/add/accept
    const res = await request({
      method: 'POST',
      url: api.POST.zxSdkAcceptFriend,
      data: {
        userId: userId,
      }
    })
    console.log('params', userId)
    console.log('接受好友成功', res)
    const { code, data, hasError } = res;
    if (code == '0' && !hasError) {
    }
  }

  public getChatGroupLists = async (isCreateChat = false) => {
    const res = await request({
      method: 'GET',
      url: api.GET.zxgroupLists,
      data: {}
    })
    const { code, data, hasError } = res;
    if (code == '0' && !hasError) {
      if (data && Array.isArray(data)) {
        this.creatChatGroupsList = data;
        this.allGroupMembers = []
        for (let i in data) {
          const item = data[i]
          await this.getAllChatGroupMember(item)
        }
        if (isCreateChat && this.allGroupMembers.length > 0) {
          let length = this.allGroupMembers.length
          this.setRefreshActiveChatData(this.allGroupMembers[length - 1])
          this.setObserverChatList(this.allGroupMembers[length - 1], false, true)
        }
      }
    }
  }

  public getAllChatGroupMember = async (item:any) => {
    const {
      communicationId,
      managerList,//群管理员ID列表
    } = item;
    const res: any = await request({
      method: 'GET',
      url: api.GET.zxGetAllGroupMember,
      data: {
        groupId: communicationId
      },
    })
    const { code, hasError, data } = res
    if (res.code == '0' && !hasError) {
      if (!item[StringKey.MESSAGES_KEY]) {
        item[StringKey.MESSAGES_KEY] = []
      }
      if (!item[StringKey.ACTIVE]) {
        item[StringKey.ACTIVE] = ChatItemEnum.CHAT_ITEM_NO_ACTIVE
      }
      if (!item[StringKey.UN_READ_COUNT]) {
        item[StringKey.UN_READ_COUNT] = ChatItemEnum.CHAT_ITEM_UN_READ_COUNT_DEFAULT_ZERO
      }
      if (!item[StringKey.IS_TOP]) {
        item[StringKey.IS_TOP] = false;
      }

      if (!item[StringKey.COMMUNICATIONID]) {
        item[StringKey.COMMUNICATIONID] = item[StringKey.CONVERSATIONID]
      }
      if (!item[StringKey.COMMUNICATION_Type]) {
        item[StringKey.COMMUNICATION_Type] = CommunicationTypeEnum.GROUP_MESSAGE
      }
      let chatGroupItem = {
        ...item,
        members: data
      }
      this.allGroupMembers.push(chatGroupItem);
    }
  }

  public createChatGroup = async (chatGroup: CreateChatGroup, isCreateChat:boolean) => {
    const res = await request({
      method: 'POST',
      url: api.POST.createChatGroup,
      data: chatGroup
    })
    const { code, hasError, data } = res
    if (code === '0' && !hasError) {
      console.log('创建群组成功', res, chatGroup)
      this.getChatGroupLists(isCreateChat)
    }
  }

  //demo 分组
  public async postTagList() {
    const res = await request({
      method: 'POST',
      url: api.POST.zxPostDemoTagList,
      data: {}
    })
  }
  //demo 创建分组
  public async postTagCreate() {
    let userIdArray = [
      '179gxkics21lq1qedh4ej',
      '179gxkigcsjdz9t1p3wr0',
      '179gxkijxj168hvp0qp3h',
      '179gxkio9p7ejoq1yx3f2',
      '179gxkisdfh6u9si4087j',
      '179gxkiw2dx73sr3u6nbk',
      '179gxkj0tbx7g1pb79rbl',
      '179gxkj9wg3g3hhvij9n6',
      '179gxkjhisvwn56zrzdeb',
      '179gxkjoo9vh5lcaf8y38',
      '179gxkjtf7vhhuahsc239'
    ];
    let userIdsString = '';
    for (let i = 0; i < userIdArray.length; i++) {
      if (i < userIdArray.length - 1) {
        userIdsString = userIdsString + userIdArray[i] + ','
      } else {
        userIdsString = userIdsString + userIdArray[i];
      }
    }
    //let arrayString=JSON.stringify(userIdArray)
    const res = await request({
      method: 'POST',
      url: api.POST.zxPostDemoTagCreate,
      data: {
        name: 'test1',
        userIds: userIdsString,
      }
    })
    const { code, hasError, data } = res
    if (code == '0' && !hasError) {
      const { members } = data
    }
  }
}

整个项目的大部分逻辑都在这个store文件里面
最后给出我这边sdk的package.json文件的配置代码如下：

{
  "name": "ImSdk",
  "version": "1.0.0",
  "description": "ImSdk",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "proto": "pbjs -t static-module -w commonjs -o src/proto/proto.js src/proto/*.proto"
  },
  "keywords": [],
  "author": "gdchent",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.13.1",
    "ali-oss": "^6.13.2",
    "axios": "^0.21.1",
    "babel-plugin-named-asset-import": "^0.3.7",
    "crypto-js": "4.0.0",
    "html-webpack-plugin": "^5.2.0",
    "js-base64": "^3.6.0",
    "jsencrypt": "3.0.0-rc.1",
    "localforage": "^1.9.0",
    "moment": "^2.29.1",
    "postcss-preset-env": "6.7.0",
    "protobufjs": "^6.10.2",
    "typescript": "3.7.2",
    "webpack": "4.42.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "3.10.3",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "4.3.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.13.5",
    "@babel/plugin-proposal-optional-chaining": "^7.13.0",
    "@babel/preset-env": "^7.13.5",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "^8.2.2",
    "babel-plugin-import": "^1.13.3",
    "source-map-loader": "^2.0.1",
    "ts-loader": "^8.0.17"
  }
}

通过上述配置可以看到，执行npm run build 就可以愉快的正常的打包了,然后就是坐等打包成功了...
示例效果如下：

打包输出效果图.png

由于我在webpack.config.js文件里面配置了LibraryTarget为umd模式，也就是通用，所以我这里可以直接用index.html引入，接下来我们看下刚刚打包成功的dist文件夹截图如下：

bundleJs.png
接下来我们在dist文件夹下新建index.html文件引入js，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试打包出来的js文件</title>
    <script type="text/javascript" src="./bundle.js"></script>
</head>
<body>
    
</body>
</html>

接下来运行当前html文件，按下f12,由于我这里调用了我公司的后台接口，这个时候肯定会出现跨域之类的，没关系，说明目的达到了就成，截图如下：

js-sdk打包运行效果.png