低代码可视化平台操作手册第五篇

绑定WebSocket数据源

在组件数据源配置界面中，数据源类型，选择【WebSocket】

在具体配置之前，我们先创建一个WebSocket测试地址，我们使用NodeJS创建了一个测试案例：

const WebSocket = require('ws');

const wss2 = new WebSocket.Server({ port: 8083 });

wss2.on('onopen', function () {

  console.log('open')

})

wss2.on('connection', function connection(ws) {

  ws.on('message', function incoming(message) {

    console.log('received: %s', message);

  });

  setInterval(() => {

    ws.send(JSON.stringify([{

      value: '我是消息'+Math.ceil(Math.random()*100)

    }]))

  }, 1000)

});

此案例中，我们模拟了每隔一秒发送一次【多行文本】组件所需的数据源结果集JSON串

然后我们填写【WS地址】为：ws://localhost:8083

值得注意的是，WebSocket数据源在设计器编辑模式下是不会发起链接的，只有在预览或发布模式下访问页面才能看到效果，如果我们想要在设计器模式下测试是否链接成功，我们可以点击【测试链接】，如下图所示，当我们点击测试链接之后，可以看到组件已经成功与WebSocket建立了链接，且接收到了推送过来的消息。

使用WebSocket数据源需要注意以下几点：

· 使用WebSocket数据源后，组件将无法使用【定时轮训器】

· 默认情况下，WebSocket数据源只能接收数据，无法推送数据（当然我们可以通过一些手段实现数据推送，这会在后续的进阶使用中说明）

· WS接口返回的数据建议使用纯字符串形式的数据，可以注意到，我们的WebSocket测试程序中，返回的就是使用JSON.stringify格式化后的JSON数据

·   ws.send(JSON.stringify([{

·     value: '我是消息'+Math.ceil(Math.random()*100)

·   }]))

绑定CSV数据源

在组件数据源配置界面中，数据源类型，选择【CSV文件】

然后点击【新建】，打开【CSV数据源编辑】界面

这里我们可以上传CSV文件进行解析，表单中我们提供了一个示例，假如您需要一个如下的数据源结果集：

[

  {

    "label":"南宁",

    "value":10

  },

  {

    "label":"柳州",

    "value":20

  },

  ...

]

注：CSV文件大小不能超过5MB，且文件编码应为UTF-8

添加了CSV数据源之后，我们就可以选择对应的数据源来绑定给组件了。

管理CSV数据源

可以在管理工作台中管理我们的CSV数据源，可以对某个CSV数据源的解析结果进行再编辑。

值得注意的是，组件绑定CSV数据源是动态绑定的，也就是说，如果我们对某个CSV数据源的解析结果进行再编辑后保存，那么我们页面中所有绑定了这个CSV数据源的组件在访问的时候也会更新至最新的状态。

CSV数据源的特点

CSV数据源本质上与静态JSON数据源是一样的，只是CSV数据源是通过解析CSV文件得到的结果集，但是与静态数据源不同的是，组件绑定了指定的CSV数据源之后，每次加载数据，都会动态获取平台数据库中的CSV数据源结果集， 因此，当我们需要为多个组件绑定同一个静态数据结果集，同时又希望能够在一个统一的地方去修改这个结果集时，就可以给组件去绑定CSV数据源，这样就能通过修改CSV数据源来实现同步多个组件的效果。

配置结果集过滤器

当我们在使用动态数据源时，会面临非标准的数据结果集接入的场景，此时可通过结果集过滤器进行字段类型变更、数值去零、字段拆分、字段重组等数据格式转换以及一些简单的逻辑运算。

如果只是简单的字段绑定，而不需要对结果集字段进行计算逻辑，可直接使用 数据字段映射 功能进行配置。

结果集过滤器采用标准JS语法，JS语法参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript(opens new window)

DataSoli中基于JS标准语法之上，定义了自己的编写标准，过滤器中通过ds_resultObj变量来存储结果集对象，我们只需要对ds_resultObj进行重构赋值即可

下面将以【多行文本】组件作为示例，说明结果集过滤器如何编写，首先【多行文本】组件要求的结果集格式为：

[

  {

    "value": "hello world"

  }

]

DataSoli中 标准的过滤器写法 为：

let newData = [

  {

    value: 'new value'

  }

]

ds_resultObj = newData

假设我们使用了API接口作为数据源，接口返回的结果集为：

[

  {

    "text": "hello world"

  }

]

以上结果集是无法正常被【多行文本】组件解析的，这时候我们就可以通过过滤器去构建新的结果集数据：

let newData = [

  {

    value: ds_resultObj[0].text

  }

]

ds_resultObj = newData