Merge pull request #374 from raheeliftikhar5/sockets-extension

feat: Allow user to send message and  disconnect socket connection

Author: FalkWolsky

client/packages/lowcoder/src/comps/queries/httpQuery/streamQuery.tsx

@@ -1,12 +1,15 @@
 import { simpleMultiComp } from "comps/generators/multi";
-import {  ParamsStringControl } from "../../controls/paramsControl";
+import {  ParamsStringControl } from "comps/controls/paramsControl";
 import {
   HttpPathPropertyView,
 } from "./httpQueryConstants";
 import { QueryResult } from "../queryComp";
 import { QUERY_EXECUTION_ERROR, QUERY_EXECUTION_OK } from "constants/queryConstants";
 import { FunctionControl } from "comps/controls/codeControl";
 import { JSONValue } from "util/jsonTypes";
+import { withMethodExposing } from "comps/generators/withMethodExposing";
+import { stateComp } from "comps/generators";
+import { multiChangeAction } from "lowcoder-core";
 
 const socketConnection = async (socket: WebSocket, timeout = 10000) => {
   const isOpened = () => (socket.readyState === WebSocket.OPEN)
@@ -52,9 +55,29 @@ const createErrorResponse = (
 const childrenMap = {
   path: ParamsStringControl,
   destroySocketConnection: FunctionControl,
+  isSocketConnected: stateComp<boolean>(false),
 };
 
-const StreamTmpQuery = simpleMultiComp(childrenMap);
+let StreamTmpQuery = simpleMultiComp(childrenMap);
+
+StreamTmpQuery = withMethodExposing(StreamTmpQuery, [
+  {
+    method: {
+      name: "broadcast",
+      params: [{ name: "args", type: "JSON" }],
+    },
+    execute: (comp, params) => {
+      return new Promise((resolve, reject) => {
+        const tmpComp = (comp as StreamQuery);
+        if(!tmpComp.getSocket()) {
+          return reject('Socket message send failed')
+        }
+        tmpComp.broadcast(params);
+        resolve({});
+      })
+    },
+  },
+])
 
 export class StreamQuery extends StreamTmpQuery {
   private socket: WebSocket | undefined;
@@ -89,17 +112,29 @@ export class StreamQuery extends StreamTmpQuery {
           console.log(`[WebSocket] Connection closed`);
         }
 
-        this.socket.onerror = function(error) {
+        this.socket.onerror = (error) => {
+          this.destroy()
           throw new Error(error as any)
         }
 
         const isConnectionOpen = await socketConnection(this.socket);
+        
         if(!isConnectionOpen) {
+          this.destroy();
           return createErrorResponse("Socket connection failed")
         }
 
-        return createSuccessResponse("", Number((performance.now() - timer).toFixed()))
+        this.dispatch(
+          multiChangeAction({
+            isSocketConnected: this.children.isSocketConnected.changeValueAction(true),
+          })
+        );
+        return createSuccessResponse(
+          "Socket connection successfull",
+          Number((performance.now() - timer).toFixed())
+        )
       } catch (e) {
+        this.destroy();
         return createErrorResponse((e as any).message || "")
       }
     };
@@ -111,6 +146,19 @@ export class StreamQuery extends StreamTmpQuery {
 
   destroy() {
     this.socket?.close();
+    this.dispatch(
+      multiChangeAction({
+        isSocketConnected: this.children.isSocketConnected.changeValueAction(false),
+      })
+    );
+  }
+
+  broadcast(data: any) {
+    this.socket?.send(JSON.stringify(data));
+  }
+
+  getSocket() {
+    return this.socket;
   }
 }
 

client/packages/lowcoder/src/comps/queries/queryComp/queryPropertyView.tsx

@@ -30,6 +30,7 @@ import { EditorContext } from "../../editorState";
 import { QueryComp } from "../queryComp";
 import { ResourceDropdown } from "../resourceDropdown";
 import { NOT_SUPPORT_GUI_SQL_QUERY, SQLQuery } from "../sqlQuery/SQLQuery";
+import { StreamQuery } from "../httpQuery/streamQuery";
 
 export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp> }) {
   const { comp } = props;
@@ -45,6 +46,7 @@ export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp>
     .datasourceConfig;
 
   const datasourceStatus = useDatasourceStatus(datasourceId, datasourceType);
+  const isStreamQuery  = children.compType.getView() === 'streamApi';
 
   return (
     <BottomTabs
@@ -142,6 +144,16 @@ export function QueryPropertyView(props: { comp: InstanceType<typeof QueryComp>
       btnLoading={children.isFetching.getView()}
       status={datasourceStatus}
       message={datasourceStatus === "error" ? trans("query.dataSourceStatusError") : undefined}
+      isStreamQuery={isStreamQuery}
+      isSocketConnected={
+        isStreamQuery
+          ? (children.comp as StreamQuery).children.isSocketConnected.getView()
+          : false
+      }
+      disconnectSocket={() => {
+        const streamQueryComp = comp.children.comp as StreamQuery;
+        streamQueryComp?.destroy();
+      }}
     />
   );
 }

client/packages/lowcoder/src/pages/editor/bottom/BottomTabs.tsx

@@ -108,7 +108,7 @@ const TabContainer = styled.div`
     }
   }
 `;
-const Button = styled(TacoButton)`
+const RunButton = styled(TacoButton)`
   padding: 0 11px;
   flex: 0 0 64px;
   height: 24px;
@@ -130,14 +130,49 @@ const Button = styled(TacoButton)`
     content: "";
   }
 `;
+const DisconnectButton = styled(TacoButton)`
+  padding: 0 11px;
+  flex: 0 0 64px;
+  height: 24px;
+  border: none;
+  color: white;
+  border-color: #079968;
+  background-color: #079968;
+
+  :hover, :focus, :disabled, :disabled:hover {
+    padding: 0 11px;
+    border: none;
+    box-shadow: none;
+  }
+  
+  :disabled,
+  :disabled:hover {
+    background-color: #bbdecd !important;
+    border-color: #bbdecd;
+  }
+
+  :hover {
+    background-color: #07714e;
+    border-color: #07714e;
+  }
+
+  :focus {
+    background-color: #07714e;
+    border-color: #07714e;
+  }
+
+  :after {
+    content: "";
+  }
+`;
 const ButtonLabel = styled.span`
   font-weight: 500;
   font-size: 13px;
   color: #ffffff;
   text-align: center;
   line-height: 24px;
 `;
-const Icon = styled(UnfoldWhiteIcon)`
+const RunIcon = styled(UnfoldWhiteIcon)`
   transform: rotate(-90deg);
   display: inline-block;
   padding-right: 2px;
@@ -165,6 +200,9 @@ export function BottomTabs<T extends TabsConfigType>(props: {
   status?: "" | "error";
   message?: string;
   runButtonText?: string;
+  isStreamQuery?: boolean;
+  isSocketConnected?: boolean;
+  disconnectSocket?: () => void;
 }) {
   const {
     type,
@@ -175,6 +213,9 @@ export function BottomTabs<T extends TabsConfigType>(props: {
     status,
     message,
     runButtonText = trans("bottomPanel.run"),
+    isStreamQuery = false,
+    isSocketConnected = false,
+    disconnectSocket,
   } = props;
   const [key, setKey] = useState<TabsConfigKeyType<typeof tabsConfig>>("general");
   const [error, setError] = useState<string | undefined>(undefined);
@@ -186,6 +227,31 @@ export function BottomTabs<T extends TabsConfigType>(props: {
 
   useEffect(() => setKey("general"), [editorState.selectedBottomResName]);
 
+  const RunButtonWrapper = () => (
+    <RunButton
+      onClick={onRunBtnClick}
+      loading={btnLoading}
+      buttonType="primary"
+      disabled={readOnly}
+    >
+      <RunIcon />
+      <ButtonLabel>{runButtonText}</ButtonLabel>
+    </RunButton>
+  )
+
+  const DisconnectButtonWrapper = () => (
+    <DisconnectButton
+      onClick={disconnectSocket}
+      loading={btnLoading}
+      buttonType="normal"
+      disabled={readOnly}
+    >
+      <ButtonLabel>
+        {'Disconnect'}
+      </ButtonLabel>
+    </DisconnectButton>
+  )
+
   return (
     <>
       <TabContainer>
@@ -220,16 +286,11 @@ export function BottomTabs<T extends TabsConfigType>(props: {
             hasError={!!error}
           />
         </div>
-        {onRunBtnClick && (
-          <Button
-            onClick={onRunBtnClick}
-            loading={btnLoading}
-            buttonType="primary"
-            disabled={readOnly}
-          >
-            <Icon />
-            <ButtonLabel>{runButtonText}</ButtonLabel>
-          </Button>
+        {!isSocketConnected && onRunBtnClick && (
+          <RunButtonWrapper />
+        )}
+        {isSocketConnected && onRunBtnClick && disconnectSocket &&  (
+          <DisconnectButtonWrapper /> 
         )}
       </TabContainer>
 
@@ -246,9 +307,9 @@ export function BottomTabs<T extends TabsConfigType>(props: {
 
 export const EmptyTab = (
   <TabContainer>
-    <Button disabled={true} style={{ marginLeft: "auto" }}>
-      <Icon></Icon>
+    <RunButton disabled={true} style={{ marginLeft: "auto" }}>
+      <RunIcon />
       <ButtonLabel>{trans("bottomPanel.run")}</ButtonLabel>
-    </Button>
+    </RunButton>
   </TabContainer>
 );