feffery_utils_components 0.1.7 → 0.1.8

package/feffery_utils_components/metadata.json

@@ -4729,6 +4729,132 @@
       }
     }
   },
+  "src/lib/components/listeners/FefferyWebSocket.react.js": {
+    "description": "",
+    "displayName": "FefferyWebSocket",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "socketUrl": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      },
+      "reconnectLimit": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": ""
+      },
+      "reconnectInterval": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": ""
+      },
+      "operation": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'connect'",
+              "computed": false
+            },
+            {
+              "value": "'disconnect'",
+              "computed": false
+            },
+            {
+              "value": "'send'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": ""
+      },
+      "message": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "latestMessage": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "state": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'connecting'",
+              "computed": false
+            },
+            {
+              "value": "'open'",
+              "computed": false
+            },
+            {
+              "value": "'closing'",
+              "computed": false
+            },
+            {
+              "value": "'closed'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": ""
+      },
+      "setProps": {
+        "type": {
+          "name": "func"
+        },
+        "required": false,
+        "description": "Dash-assigned callback that should be called to report property changes\r\nto Dash, to make them available for callbacks."
+      },
+      "loading_state": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "is_loading": {
+              "name": "bool",
+              "description": "Determines if the component is loading or not",
+              "required": false
+            },
+            "prop_name": {
+              "name": "string",
+              "description": "Holds which property is loading",
+              "required": false
+            },
+            "component_name": {
+              "name": "string",
+              "description": "Holds the name of the component that is loading",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": ""
+      }
+    }
+  },
   "src/lib/components/listeners/FefferyWindowSize.react.js": {
     "description": "",
     "displayName": "FefferyWindowSize",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.1.7"
+const version = "0.1.8"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -46,6 +46,7 @@ include("jl/''_fefferyidle.jl")
 include("jl/''_fefferyinviewport.jl")
 include("jl/''_fefferykeypress.jl")
 include("jl/''_fefferyresponsive.jl")
+include("jl/''_fefferywebsocket.jl")
 include("jl/''_fefferywindowsize.jl")
 include("jl/''_fefferysortablecontainer.jl")
 include("jl/''_fefferysortableitem.jl")
@@ -62,14 +63,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.1.7/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.8/feffery_utils_components/feffery_utils_components.min.js",
     dynamic = nothing,
     async = nothing,
     type = :js
 ),
 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js.map",
-    external_url = "https://unpkg.com/feffery_utils_components@0.1.7/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.8/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferywebsocket.jl

@@ -0,0 +1,30 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferywebsocket
+
+"""
+    ''_fefferywebsocket(;kwargs...)
+
+A FefferyWebSocket component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `latestMessage` (String; optional)
+- `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
+Those elements have the following types:
+  - `is_loading` (Bool; optional): Determines if the component is loading or not
+  - `prop_name` (String; optional): Holds which property is loading
+  - `component_name` (String; optional): Holds the name of the component that is loading
+- `message` (String; optional)
+- `operation` (a value equal to: 'connect', 'disconnect', 'send'; optional)
+- `reconnectInterval` (Real; optional)
+- `reconnectLimit` (Real; optional)
+- `socketUrl` (String; required)
+- `state` (a value equal to: 'connecting', 'open', 'closing', 'closed'; optional)
+"""
+function ''_fefferywebsocket(; kwargs...)
+        available_props = Symbol[:id, :latestMessage, :loading_state, :message, :operation, :reconnectInterval, :reconnectLimit, :socketUrl, :state]
+        wild_props = Symbol[]
+        return Component("''_fefferywebsocket", "FefferyWebSocket", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/lib/components/listeners/FefferyWebSocket.react.js

@@ -0,0 +1,128 @@
+import { useEffect } from 'react';
+import { useWebSocket } from 'ahooks';
+import PropTypes from 'prop-types';
+
+const num2state = new Map([
+    [0, 'connecting'],
+    [1, 'open'],
+    [2, 'closing'],
+    [3, 'closed']
+])
+
+// 定义WebSocket通信组件FefferyWebSocket
+const FefferyWebSocket = (props) => {
+
+    const {
+        id,
+        socketUrl,
+        reconnectLimit,
+        reconnectInterval,
+        operation,
+        message,
+        setProps,
+        loading_state
+    } = props;
+
+    const { readyState: _readyState, sendMessage, latestMessage: _latestMessage, disconnect, connect } = useWebSocket(
+        socketUrl,
+        {
+            reconnectLimit,
+            reconnectInterval
+        }
+    );
+
+    // 监听服务器发送来的最新信息
+    useEffect(() => {
+        if (_latestMessage) {
+            setProps({
+                latestMessage: _latestMessage.data
+            })
+        }
+    }, [_latestMessage])
+
+    // 监听当前WebSocket连接的状态
+    useEffect(() => {
+        setProps({
+            state: num2state.get(_readyState)
+        })
+    }, [_readyState])
+
+    // 监听operation，从而执行不同操作
+    useEffect(() => {
+        if (operation) {
+            // 断开连接操作
+            if (operation === 'connect') {
+                connect()
+            } else if (operation === 'disconnect') {
+                disconnect()
+            } else if (operation === 'send') {
+                sendMessage(message)
+            }
+            // 重置operation
+            setProps({
+                operation: null
+            })
+        }
+    }, [operation])
+
+    return (<div
+        id={id}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />);
+}
+
+// 定义参数或属性
+FefferyWebSocket.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 设置要建立连接的WebSocket服务url
+    socketUrl: PropTypes.string.isRequired,
+
+    // 设置连接重试次数，默认为3
+    reconnectLimit: PropTypes.number,
+
+    // 设置连接重试间隔，默认为3000，单位：毫秒
+    reconnectInterval: PropTypes.number,
+
+    // 用于执行连接/断开连接/发送信息操作，可选项有'connect'、'disconnect'、'send'
+    // 每次新操作执行后，operation参数都会被重置为null
+    operation: PropTypes.oneOf(['connect', 'disconnect', 'send']),
+
+    // 当operation更新为'send'时，用于设置要通过WebSocket服务向服务器发送的数据
+    message: PropTypes.string,
+
+    // 监听从服务器传来的最新信息
+    latestMessage: PropTypes.string,
+
+    // 用于监听当前此连接的状态，有'connecting'、'open'、'closing'、'closed'四种状态
+    state: PropTypes.oneOf(['connecting', 'open', 'closing', 'closed']),
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func,
+
+    loading_state: PropTypes.shape({
+        /**
+         * Determines if the component is loading or not
+         */
+        is_loading: PropTypes.bool,
+        /**
+         * Holds which property is loading
+         */
+        prop_name: PropTypes.string,
+        /**
+         * Holds the name of the component that is loading
+         */
+        component_name: PropTypes.string
+    })
+};
+
+// 设置默认参数
+FefferyWebSocket.defaultProps = {
+}
+
+export default React.memo(FefferyWebSocket);

package/src/lib/index.js

@@ -46,6 +46,7 @@ import FefferyEyeDropper from "./components/colorPickers/FefferyEyeDropper.react
 import FefferySticky from "./components/FefferySticky.react";
 import FefferyLazyLoadImage from "./components/FefferyLazyLoadImage.react";
 import FefferySessionStorage from "./components/store/FefferySessionStorage";
+import FefferyWebSocket from "./components/listeners/FefferyWebSocket.react";
 
 /* 
 忽略部分设计React中规范的console警告信息
@@ -126,5 +127,6 @@ export {
     FefferyEyeDropper,
     FefferySticky,
     FefferyLazyLoadImage,
-    FefferySessionStorage
+    FefferySessionStorage,
+    FefferyWebSocket
 };