useMessageData.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. import { reactive, ref, computed, watch } from 'vue';
  2. import { storeToRefs } from 'pinia';
  3. import { useSocketStore, useMessageStore } from "@/store";
  4. import { RONGIMCALL_OPEN, RONGIMCALL_HISTORY, RONGIMCALL_SEND } from '@/api';
  5. import { Toast, format } from '@/utils';
  6. function useMessageData() {
  7. const useScoket = useSocketStore();
  8. const useMessage = useMessageStore();
  9. const { messageMap } = storeToRefs(useMessage);
  10. const lowerThreshold = ref(80)
  11. const distanceFromBottom = ref(0)
  12. const newMessageCount = ref(0)
  13. const dataList = ref([]);
  14. const loadedAll = ref(false);
  15. const isLoading = ref(false);
  16. const historyMessageQuery = reactive({
  17. page: 1,
  18. pagesize: 20,
  19. type: 'service'
  20. })
  21. const isOpenning = ref(false)
  22. const channel = ref('')
  23. const channelData = ref(null)
  24. watch(
  25. () => (messageMap.value),
  26. (newVal, oldVal) => {
  27. if (channel.value) {
  28. const info = newVal[channel.value]
  29. channelData.value = info
  30. console.log("messageMap.value[channel.value]", info)
  31. dataList.value = info.messageList
  32. newMessageCount.value =
  33. distanceFromBottom.value > lowerThreshold.value ?
  34. info.unreadCount : 0;
  35. console.log('newMessageCount.value', newMessageCount.value)
  36. }
  37. },
  38. {
  39. deep: true
  40. }
  41. )
  42. function resetHistoryQuery() {
  43. historyMessageQuery.page = 1
  44. historyMessageQuery.pagesize = 20
  45. historyMessageQuery.type = 'service'
  46. loadedAll.value = false
  47. isLoading.value = false
  48. }
  49. // 获取历史消息列表
  50. function fetchHistoryMessageList() {
  51. return new Promise(async (resolve, reject) => {
  52. if (loadedAll.value) return;
  53. if (isLoading.value) return;
  54. isLoading.value = true;
  55. try {
  56. const result = await RONGIMCALL_HISTORY(historyMessageQuery, { isLoading: true });
  57. const { lists, total } = result.data;
  58. for (let i = 0; i < lists.length; i++) {
  59. const msgInfo = {
  60. ...lists[i],
  61. msg: JSON.parse(lists[i].msg)
  62. }
  63. useMessage.updateMessageList(channel.value, msgInfo, 'unshift')
  64. }
  65. loadedAll.value = lists.length < historyMessageQuery.pagesize;
  66. historyMessageQuery.page = historyMessageQuery.page + 1;
  67. isLoading.value = false;
  68. resolve(result.data);
  69. }
  70. catch (err) {
  71. isLoading.value = false;
  72. reject(err);
  73. }
  74. })
  75. }
  76. function openService() {
  77. if (isOpenning.value) return;
  78. isOpenning.value = true;
  79. resetHistoryQuery();
  80. useMessage.openChannel({
  81. type: 'service',
  82. socket_id: useScoket.socketId
  83. }).then(async (res) => {
  84. channel.value = res.data.auth.channel
  85. try {
  86. const data = await fetchHistoryMessageList();
  87. if (data.total < 1) {
  88. const val = { ...res.data }
  89. delete val.auth
  90. dataList.push(val)
  91. useMessage.updateMessageList(channel.value, val, 'unshift')
  92. }
  93. if (data.lists.length > 0) {
  94. let result = data.lists[0]
  95. let lastTime = result ? result.indate : (Date.now() / 1000).toFixed(0) - 0
  96. useMessage.updateGlobalMapLasttime(`serviceChannel`, lastTime)
  97. }
  98. }
  99. catch (err) { }
  100. finally {
  101. isOpenning.value = false;
  102. }
  103. })
  104. .catch(() => {
  105. isOpenning.value = false;
  106. })
  107. }
  108. openService()
  109. return {
  110. useMessage,
  111. channel,
  112. channelData,
  113. dataList,
  114. newMessageCount,
  115. lowerThreshold,
  116. distanceFromBottom,
  117. isLoading,
  118. fetchHistoryMessageList,
  119. openService
  120. }
  121. }
  122. export default useMessageData