feat: im增加ws通知

src/layouts/components/RightContent.tsx

@@ -10,6 +10,7 @@ import { inject, observer } from 'mobx-react'
 import styles from '../styles/RightContent.less';
 import { getAuth } from '@/utils/auth';
 import { getCookie } from '@/utils/cookie'
+import { notificationChatRoom } from '@/utils/im'
 import { SOCKET_URL, PLATFORM_DOMAIN } from '@/constants';
 
 import { usePurchaseBidStore } from '@/store/purchaseBid';
@@ -21,11 +22,11 @@ import { usePurchaseBidStore } from '@/store/purchaseBid';
 // }
 
 type WsMessage = {
-  action: "msg_no_read_message" | "purchase_bidding_message_supplier" | "purchase_bidding_message",
+  action: "msg_no_read_message" | "purchase_bidding_message_supplier" | "purchase_bidding_message" | "msg_im_message",
   /**
    * 信息数
    */
-  data: string,
+  data: string | any,
   /**
    * 假设 memberId: 2 memberRoleId: 3, 那么 receiver： *:2:3
    */
@@ -53,19 +54,26 @@ const GlobalHeaderRight: React.FC<{ SiteStore?: any }> = (props) => {
   const ws = useRef<WebSocket | null>(null);
   const webSocketInit = useCallback(() => {
     if (SOCKET_URL && (!ws.current || ws.current.readyState === 3) && userInfo) {
-      const url = `${SOCKET_URL}/message/websocket?memberId=${userInfo.memberId}&roleId=${userInfo.memberRoleId}&token=${userInfo.token}&source=${1}`;
+      const url = `${SOCKET_URL}/message/websocket?memberId=${userInfo.memberId}&roleId=${userInfo.memberRoleId}&token=${userInfo.token}&userId=${userInfo.userId}&source=${1}`;
       ws.current = new WebSocket(url);
       // ws.current.onopen = (e) => {}
       ws.current.onmessage = (e) => {
         const data: WsMessage = JSON.parse(e.data);
+        console.log(data);
         if (data.action === 'purchase_bidding_message_supplier') {
           setPurchaseBiddingMessageSupplier(data)
         } else if (data.action === 'purchase_bidding_message') {
           setPurchaseBiddingMessage(data)
+        }else if(data.action === 'msg_im_message'){
+          let _MsgContent = {...data.data.MsgContent};
+          _MsgContent.data = JSON.parse(_MsgContent.data);
+          _MsgContent.desc = JSON.parse(_MsgContent.desc);
+          notificationChatRoom(_MsgContent);
         }
         if (data.action === 'msg_no_read_message') {
           setMessage(+data.data);
         }
+        
       };
       ws.current.onclose = (e) => {
         console.log("关闭连接")
@@ -77,7 +85,7 @@ const GlobalHeaderRight: React.FC<{ SiteStore?: any }> = (props) => {
   }, [ws]);
 
   useEffect(() => {
-    // webSocketInit();
+    webSocketInit();
     return () => {
       ws.current?.close();
     };

src/pages/lxMall/components/TopBar/index.tsx

-import React from 'react'
+import React, { useCallback, useRef, useEffect } from 'react'
 import { EnvironmentOutlined, CaretDownOutlined } from '@ant-design/icons'
 import { inject, observer } from 'mobx-react'
 import cx from 'classnames'
@@ -9,9 +9,10 @@ import AccountSafeIcon from './imgs/account_safe_icon.png'
 import capitalAccountIcon from './imgs/capital_account.png'
 import memberBenefitsIcon from './imgs/member_benefits_icon.png'
 import memberInfoIcon from './imgs/member_info_icon.png'
-import { LAYOUT_TYPE } from '@/constants'
+import { LAYOUT_TYPE,SOCKET_URL } from '@/constants'
 import { numFormat } from '@/utils/numberFomat'
 import { removeAuth, removeRouters } from '@/utils/auth'
+import { notificationChatRoom } from '@/utils/im'
 import { GlobalConfig } from '@/global/config'
 import styles from './index.less'
 
@@ -23,10 +24,60 @@ interface TopBarPropsType {
   shopUrlParam?: string;
 }
 
+type WsMessage = {
+  action: "msg_no_read_message" | "purchase_bidding_message_supplier" | "purchase_bidding_message" | "msg_im_message",
+  /**
+   * 信息数
+   */
+  data: string | any,
+  /**
+   * 假设 memberId: 2 memberRoleId: 3, 那么 receiver： *:2:3
+   */
+  receiver: string,
+  /**
+   * 发送者
+   */
+  sender: string,
+  timestamp: number
+}
+
 const TopBar: React.FC<TopBarPropsType> = (props) => {
   const { langComponent, name, type, shopUrlParam } = props
   const { userInfo } = props.UserStore
 
+  const ws = useRef<WebSocket | null>(null);
+  const webSocketInit = useCallback(() => {
+    if (SOCKET_URL && (!ws.current || ws.current.readyState === 3) && userInfo) {
+      const url = `${SOCKET_URL}/message/websocket?memberId=${userInfo.memberId}&roleId=${userInfo.memberRoleId}&token=${userInfo.token}&userId=${userInfo.userId}&source=${1}`;
+      ws.current = new WebSocket(url);
+      // ws.current.onopen = (e) => {}
+      ws.current.onmessage = (e) => {
+        const data: WsMessage = JSON.parse(e.data);
+        console.log(data);
+        if(data.action === 'msg_im_message'){
+          let _MsgContent = {...data.data.MsgContent};
+          _MsgContent.data = JSON.parse(_MsgContent.data);
+          _MsgContent.desc = JSON.parse(_MsgContent.desc);
+          notificationChatRoom(_MsgContent);
+        }
+        
+      };
+      ws.current.onclose = (e) => {
+        console.log("关闭连接")
+      }
+      ws.current.onerror = (e) => {
+        console.log("socket 出错")
+      }
+    }
+  }, [ws]);
+
+  useEffect(() => {
+    webSocketInit();
+    return () => {
+      ws.current?.close();
+    };
+  }, [ws, webSocketInit]);
+
   const getHomePath = () => {
     switch (type) {
       case LAYOUT_TYPE.shop:

src/utils/im.tsx

@@ -29,7 +29,7 @@ export const toChatRoom = (memberId: string = '', shopType: number = 1) => {
         window.open(CHATROOM_URL);
         return;
     }
-    PublicApi.getMessageImHistorySession({ memberId: 70 }).then(res => {
+    PublicApi.getMessageImHistorySession({ memberId: memberId }).then(res => {
         if (res.code === 1000) {
             let _userId = '';
             const _list = res.data;
@@ -64,14 +64,9 @@ export const toChatRoom = (memberId: string = '', shopType: number = 1) => {
     })
 }
 
-interface NotificationChatRoomProps {
-    //通知消息
-    detail: any
-}
 
 // 被动从websocket调起聊天室
-export const notificationChatRoom = (props: NotificationChatRoomProps) => {
-    const { detail } = props
+export const notificationChatRoom = (content: any) => {
     const _curUserInfo: any = getAuth();
     const close = () => {
         console.log(
@@ -81,11 +76,13 @@ export const notificationChatRoom = (props: NotificationChatRoomProps) => {
     const key = `open${Date.now()}`;
     const btn = (
         <Button type="primary" size="small" onClick={() => {
+            document.cookie = `${COOKIEPREFIX}curMemberId=${content.desc.fromMemberId};path=/;domain=${DOMAIN}`;
+            document.cookie = `${COOKIEPREFIX}curUserId=${content.desc.fromUserId};path=/;domain=${DOMAIN}`;
             document.cookie = `${COOKIEPREFIX}userToken=${_curUserInfo.token};path=/;domain=${DOMAIN}`;
             document.cookie = `${COOKIEPREFIX}userMemberId=${_curUserInfo.memberId};path=/;domain=${DOMAIN}`;
             document.cookie = `${COOKIEPREFIX}userMemberType=${_curUserInfo.memberType};path=/;domain=${DOMAIN}`;
             document.cookie = `${COOKIEPREFIX}userUserId=${_curUserInfo.userId};path=/;domain=${DOMAIN}`;
-            document.cookie = `${COOKIEPREFIX}shopType=${shopType};path=/;domain=${DOMAIN}`;
+            document.cookie = `${COOKIEPREFIX}shopType=${content.desc.shopType};path=/;domain=${DOMAIN}`;
             document.cookie = `${COOKIEPREFIX}ENTERPRISE_CENTER_URL=${ENTERPRISE_CENTER_URL};path=/;domain=${DOMAIN}`;
             document.cookie = `${COOKIEPREFIX}CHANNEL_CENTER_URL=${CHANNEL_CENTER_URL};path=/;domain=${DOMAIN}`;
             document.cookie = `${COOKIEPREFIX}ICHANNEL_CENTER_URL=${ICHANNEL_CENTER_URL};path=/;domain=${DOMAIN}`;
@@ -99,10 +96,23 @@ export const notificationChatRoom = (props: NotificationChatRoomProps) => {
             查看
         </Button>
     );
+    let _text = '';
+    if (content.data.text) {
+        _text = content.data.text;
+    } else if (content.data.img) {
+        _text = '[图片]';
+    } else if (content.data.file) {
+        _text = '[文件]';
+    } else if (content.data.order) {
+        _text = '[订单]';
+    } else if (content.data.goods) {
+        _text = '[商品]';
+    } else if (content.data.sale) {
+        _text = '[售后]';
+    }
     notification.open({
         message: '你收到一条消息',
-        description:
-            'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
+        description: _text,
         btn,
         key,
         duration: 10,