带页面展示的组件 - Socket.IO

有些时候我们需要组件能够展示数据，或者进行一些复杂的设置，这种情况下就需要开发带有 Web 页面的组件。

算盘 python sdk 集成了 socketio 服务，能以 socketio 的方式为前端提供数据。

Socket.IO 代码示例

在 modules 目录下新建一个文件 action.py，定义所有的 socketio 接口

action.py

from suanpan.app.modules.base import Module
from suanpan.log import logger

module = Module()


@module.on("data.set")
def data_set(context):
    args = context.args
    logger.info(f'data set: {args}')

    return {'resp': args}

在 main.py 文件中注册 action.py 中的 module，初始化前端页面

main.py

import suanpan
from suanpan.app import app
from suanpan.app.arguments import String
from suanpan.log import logger
from modules.action import module as action_module

# 注册 module
app.modules.register("action", action_module)


@app.afterInit
def init(context):
    args = context.args
    logger.info(f'init with {context}')

    # 初始化前端页面
    app.sio.setStatic("statics")


@app.input(String(key="inputData1"))
@app.output(String(key="outputData1"))
def HelloWorld(context):
    args = context.args

    # 在此处编辑用户自定义代码

    return "Hello World!"


if __name__ == "__main__":
    suanpan.run(app)

接口测试

1. 将组件代码在 vscode 组件中运行起来
2. 执行命令 suanpan sio data.set -s "{\"a\":2}"，此命令会向 socketio 服务发生 data.set 事件，并返回结果
3. 结果显示如下：

   Send Request:
   {
     "a": 2
   }
   ================================
   Response:
   {
     "success": true,
     "data": {
       "resp": {
         "a": 2
       }
     }
   }

!!! warning "注意"

suanpan 命令行工具是 suanpan-core 的功能。

完整示例

这里有一个 带页面的组件，前端由 react 实现，使用 socketio 与组件后端通信。

!!! warning "注意"

前端的引用地址请使用相对路径。