消息

src/page/Meeting/index.tsx

@@ -108,6 +108,7 @@ const Meeting: React.FC = () => {
     pageSize: 10,
   })
   const [roomUserList, setRoomUserList] = useState<any>([])
+  const [chatList, setChatList] = useState<any>([])
 
   const [list] = useState<number[]>([1, 2, 3, 4, 5, 6, 7])
   const [open, setOpen] = useState(false)
@@ -134,7 +135,8 @@ const Meeting: React.FC = () => {
   useEffect(() => {
     roomUserList.forEach((item: any) => {
       let dom = document.getElementById(`video-${item.account}`) as HTMLElement
-      if (!dom.hasChildNodes()) {
+      if (!dom.getAttribute('load')) {
+        dom.setAttribute('load', 'true')
         agora.setVideo({
           account: Number(item.account),
           view: dom,
@@ -145,8 +147,11 @@ const Meeting: React.FC = () => {
   }, [roomUserList]);
 
   useEffect(() => {
-    onSignalr((message: any) => {
-      console.log(message,'嘻嘻嘻');
+    onSignalr((item: any) => {
+      console.log(item);
+      const newChatList = [...chatList]
+      newChatList.push(item)
+      setChatList(newChatList)
     })
   }, [])
   // 操作按钮
@@ -401,18 +406,20 @@ const Meeting: React.FC = () => {
                         }} />
                       </div>
                       <div className={styles.meetingUserChatContent}>
-                        {list.map((item: number) =>
-                          <div key={item} className={`${styles.meetingUserChatContentLeft} drag`}>
+                        {chatList.map((item: any, index: number) =>
+                          <div
+                            key={index}
+                            className={`${item.uid !== state.uid ? styles.meetingUserChatContentLeft : styles.meetingUserChatContentRight} drag`}>
                             <div>
                               <div><img src={ImageUrl.avatar} alt="" /></div>
-                              <span>潇潇</span>
+                              <span>{item.userName}</span>
                             </div>
-                            <div>哈哈哈哈</div>
+                            <div>{item.message}</div>
                           </div>
                         )}
                       </div>
                       <div className={`${styles.meetingUserChatInput} drag`}>
-                        <Input.TextArea placeholder="请输入消息" style={{ flexGrow: 1 }} onChange={(e) => {
+                        <Input.TextArea placeholder="请输入消息" value={textMsg} style={{ flexGrow: 1 }} onChange={(e) => {
                           setTextMsg(e.target.value)
                         }}></Input.TextArea>
                         <Button type="primary" className='m-ant-btn' style={{ flexShrink: 0, marginTop: '4px' }} onClick={() => {
@@ -420,6 +427,7 @@ const Meeting: React.FC = () => {
                             roomNum: state.channelId,
                             msg: textMsg,
                           })
+                          setTextMsg('')
                         }}>发送</Button>
                       </div>
                     </div>

src/utils/package/signalr.ts

@@ -17,8 +17,10 @@ export const startSignalr = () => {
 }
 
 export const onSignalr = (callBack: Function) => {
-  connection.on("ReceiveMessage", (message: any) => {
-    callBack(message)
+  connection.on("ReceiveMessage", (uid: string, userName: string, message: string) => {
+    callBack({
+      uid, message, userName
+    })
   });
 }
 export const onInvoke = (str: string, data: any) => {