✨ 新增消息发送功能

hczs · Sep 28, 2023 · 8199df5 · 8199df5
1 parent d5d0cd7
commit 8199df5
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 28 deletions.
diff --git a/src/components/rightContent/send/MessageSend.scss b/src/components/rightContent/send/MessageSend.scss
@@ -1,6 +1,17 @@
 .msg-send-container {
   .send-form {
+    margin: 0 10% 0 10%;
+  }
+
+  .input-width {
     width: 100%;
-    margin: 0 0 0 20px;
+  }
+
+  .send-btn {
+    float: right;
+  }
+
+  .msg-content {
+    height: 160px;
   }
 }
diff --git a/src/components/rightContent/send/MessageSend.tsx b/src/components/rightContent/send/MessageSend.tsx
@@ -1,8 +1,9 @@
-import React, { ForwardedRef, useEffect, useState} from 'react';
+import React, {ForwardedRef, useEffect, useState} from 'react';
 import {Kafka, Producer} from "kafkajs";
-import {Button, ButtonToolbar, Form, Input, Message, toaster} from "rsuite";
+import {Button, ButtonToolbar, Form, Input, InputPicker, Message, Schema, toaster} from "rsuite";
 import "./MessageSend.scss";
 import {send} from "vite";
+import {FormInstance} from "rsuite/esm/Form/Form";
 
 interface Props {
     kafkaClient?: Kafka
@@ -12,15 +13,30 @@ const Textarea = React.forwardRef((props, ref) => {
     return <Input {...props} as="textarea" ref={ref as ForwardedRef<HTMLTextAreaElement>}/>
 });
 
-interface messageSendObj {
-
-}
 
 const MessageSend = (props: Props) => {
 
     const [producer, setProducer] = useState<Producer>();
 
-    const [topicList, setTopicList] = useState<Array<string>>();
+    const [topicList, setTopicList] = useState<Array<{
+        label: string,
+        value: string
+    }>>([]);
+
+    const sendFormRef = React.createRef<FormInstance>();
+
+    const [sendFormValue, setSendFormValue] = useState<any>({
+        topic: '',
+        key: '',
+        messageContent: ''
+    });
+
+    const model = Schema.Model({
+        topic: Schema.Types.StringType().isRequired('请选择目标Topic'),
+        messageContent: Schema.Types.StringType().isRequired('请输入消息内容')
+    });
+
+    const [sendBtnLoading, setSendBtnLoading] = useState(false);
 
     useEffect(() => {
         console.log("MessageSend mount");
@@ -56,7 +72,12 @@ const MessageSend = (props: Props) => {
         admin.connect().then(() => {
             admin.fetchTopicMetadata().then((res) => {
                 // key：topicName value: partitionList
-                const topicNames = res.topics.map(tdata => tdata.name);
+                const topicNames = res.topics.map(tdata => {
+                    return {
+                        label: tdata.name,
+                        value: tdata.name
+                    }
+                });
                 setTopicList(topicNames);
                 console.log("fetchTopicMetadata: ", res);
                 console.log("topicNames: ", topicNames);
@@ -68,32 +89,78 @@ const MessageSend = (props: Props) => {
         })
     }
 
+    const sendMessage = () => {
+        // 表单校验
+        if (!sendFormRef.current?.check()) {
+            return;
+        }
+        console.log("表单内容：", sendFormValue);
+        setSendBtnLoading(true);
+        let msgKey = null;
+        if (sendFormValue.key && sendFormValue.key !== '') {
+            msgKey = sendFormValue.key;
+        }
+        producer?.send({
+            topic: sendFormValue.topic,
+            messages: [{
+                key: msgKey,
+                value: sendFormValue.messageContent
+            }]
+        }).then(() => {
+            toaster.push(<Message showIcon type="success">发送成功</Message>, {
+                duration: 2000
+            });
+        }).catch(error => {
+            console.log(error);
+            toaster.push(<Message showIcon type="error">生产者状态异常，请检查网络或者重新连接</Message>, {
+                duration: 2000
+            });
+        }).finally(() => {
+            setSendBtnLoading(false);
+        })
+    }
+
     return (
         <div className={"msg-send-container"}>
-            <Form className={"send-form"}>
-                <Form.Group controlId="name">
-                    <Form.ControlLabel>Username</Form.ControlLabel>
-                    <Form.Control name="name"/>
-                    <Form.HelpText>Username is required</Form.HelpText>
-                </Form.Group>
-                <Form.Group controlId="email">
-                    <Form.ControlLabel>Email</Form.ControlLabel>
-                    <Form.Control name="email" type="email"/>
-                    <Form.HelpText tooltip>Email is required</Form.HelpText>
+            <Form
+                ref={sendFormRef}
+                fluid
+                className={"send-form"}
+                onChange={setSendFormValue}
+                formValue={sendFormValue}
+                model={model}
+            >
+                <Form.Group controlId="topic">
+                    <Form.ControlLabel>Topic</Form.ControlLabel>
+                    <Form.Control
+                        className={"input-width"}
+                        name="topic"
+                        data={topicList}
+                        accepter={InputPicker}
+                    />
+                    <Form.HelpText>必须选择目标Topic</Form.HelpText>
                 </Form.Group>
-                <Form.Group controlId="password">
-                    <Form.ControlLabel>Password</Form.ControlLabel>
-                    <Form.Control name="password" type="password" autoComplete="off"/>
+                <Form.Group controlId="key">
+                    <Form.ControlLabel>消息Key</Form.ControlLabel>
+                    <Form.Control name="key"/>
+                    <Form.HelpText>消息key可选</Form.HelpText>
                 </Form.Group>
-                <Form.Group controlId="textarea">
-                    <Form.ControlLabel>Textarea</Form.ControlLabel>
-                    <Form.Control name="textarea" accepter={Textarea}/>
+                <Form.Group controlId="messageContent">
+                    <Form.ControlLabel>消息内容</Form.ControlLabel>
+                    <Form.Control
+                        className={"msg-content"}
+                        name="messageContent"
+                        accepter={Textarea} />
                 </Form.Group>
                 <Form.Group>
-                    <ButtonToolbar>
-                        <Button appearance="primary">Submit</Button>
-                        <Button appearance="default">Cancel</Button>
-                    </ButtonToolbar>
+                    <Button
+                        className={"send-btn"}
+                        appearance="primary"
+                        onClick={sendMessage}
+                        loading={sendBtnLoading}
+                    >
+                        发送
+                    </Button>
                 </Form.Group>
             </Form>
         </div>