綁定WebSocket數(shù)據(jù)源

在組件數(shù)據(jù)源配置界面中，數(shù)據(jù)源類型，選擇【W(wǎng)ebSocket】

在具體配置之前，我們先創(chuàng)建一個(gè)WebSocket測(cè)試地址，我們使用NodeJS創(chuàng)建了一個(gè)測(cè)試案例：

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)

});

此案例中，我們模擬了每隔一秒發(fā)送一次【多行文本】組件所需的數(shù)據(jù)源結(jié)果集JSON串

然后我們填寫(xiě)【W(wǎng)S地址】為：ws://localhost:8083

值得注意的是，WebSocket數(shù)據(jù)源在設(shè)計(jì)器編輯模式下是不會(huì)發(fā)起鏈接的，只有在預(yù)覽或發(fā)布模式下訪問(wèn)頁(yè)面才能看到效果，如果我們想要在設(shè)計(jì)器模式下測(cè)試是否鏈接成功，我們可以點(diǎn)擊【測(cè)試鏈接】，如下圖所示，當(dāng)我們點(diǎn)擊測(cè)試鏈接之后，可以看到組件已經(jīng)成功與WebSocket建立了鏈接，且接收到了推送過(guò)來(lái)的消息。

使用WebSocket數(shù)據(jù)源需要注意以下幾點(diǎn)：

· 使用WebSocket數(shù)據(jù)源后，組件將無(wú)法使用【定時(shí)輪訓(xùn)器】

· 默認(rèn)情況下，WebSocket數(shù)據(jù)源只能接收數(shù)據(jù)，無(wú)法推送數(shù)據(jù)（當(dāng)然我們可以通過(guò)一些手段實(shí)現(xiàn)數(shù)據(jù)推送，這會(huì)在后續(xù)的進(jìn)階使用中說(shuō)明）

· WS接口返回的數(shù)據(jù)建議使用純字符串形式的數(shù)據(jù)，可以注意到，我們的WebSocket測(cè)試程序中，返回的就是使用JSON.stringify格式化后的JSON數(shù)據(jù)

· ws.send(JSON.stringify([{

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

· }]))

綁定CSV數(shù)據(jù)源

在組件數(shù)據(jù)源配置界面中，數(shù)據(jù)源類型，選擇【CSV文件】

然后點(diǎn)擊【新建】，打開(kāi)【CSV數(shù)據(jù)源編輯】界面

這里我們可以上傳CSV文件進(jìn)行解析，表單中我們提供了一個(gè)示例，假如您需要一個(gè)如下的數(shù)據(jù)源結(jié)果集：

[

{

"label":"南寧",

"value":10

},

{

"label":"柳州",

"value":20

},

…

]

注：CSV文件大小不能超過(guò)5MB，且文件編碼應(yīng)為UTF-8

添加了CSV數(shù)據(jù)源之后，我們就可以選擇對(duì)應(yīng)的數(shù)據(jù)源來(lái)綁定給組件了。

管理CSV數(shù)據(jù)源

可以在管理工作臺(tái)中管理我們的CSV數(shù)據(jù)源，可以對(duì)某個(gè)CSV數(shù)據(jù)源的解析結(jié)果進(jìn)行再編輯。

值得注意的是，組件綁定CSV數(shù)據(jù)源是動(dòng)態(tài)綁定的，也就是說(shuō)，如果我們對(duì)某個(gè)CSV數(shù)據(jù)源的解析結(jié)果進(jìn)行再編輯后保存，那么我們頁(yè)面中所有綁定了這個(gè)CSV數(shù)據(jù)源的組件在訪問(wèn)的時(shí)候也會(huì)更新至最新的狀態(tài)。

CSV數(shù)據(jù)源的特點(diǎn)

CSV數(shù)據(jù)源本質(zhì)上與靜態(tài)JSON數(shù)據(jù)源是一樣的，只是CSV數(shù)據(jù)源是通過(guò)解析CSV文件得到的結(jié)果集，但是與靜態(tài)數(shù)據(jù)源不同的是，組件綁定了指定的CSV數(shù)據(jù)源之后，每次加載數(shù)據(jù)，都會(huì)動(dòng)態(tài)獲取平臺(tái)數(shù)據(jù)庫(kù)中的CSV數(shù)據(jù)源結(jié)果集， 因此，當(dāng)我們需要為多個(gè)組件綁定同一個(gè)靜態(tài)數(shù)據(jù)結(jié)果集，同時(shí)又希望能夠在一個(gè)統(tǒng)一的地方去修改這個(gè)結(jié)果集時(shí)，就可以給組件去綁定CSV數(shù)據(jù)源，這樣就能通過(guò)修改CSV數(shù)據(jù)源來(lái)實(shí)現(xiàn)同步多個(gè)組件的效果。

配置結(jié)果集過(guò)濾器

當(dāng)我們?cè)谑褂脛?dòng)態(tài)數(shù)據(jù)源時(shí)，會(huì)面臨非標(biāo)準(zhǔn)的數(shù)據(jù)結(jié)果集接入的場(chǎng)景，此時(shí)可通過(guò)結(jié)果集過(guò)濾器進(jìn)行字段類型變更、數(shù)值去零、字段拆分、字段重組等數(shù)據(jù)格式轉(zhuǎn)換以及一些簡(jiǎn)單的邏輯運(yùn)算。

如果只是簡(jiǎn)單的字段綁定，而不需要對(duì)結(jié)果集字段進(jìn)行計(jì)算邏輯，可直接使用 數(shù)據(jù)字段映射 功能進(jìn)行配置。

結(jié)果集過(guò)濾器采用標(biāo)準(zhǔn)JS語(yǔ)法，JS語(yǔ)法參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript(opens new window)

DataSoli中基于JS標(biāo)準(zhǔn)語(yǔ)法之上，定義了自己的編寫(xiě)標(biāo)準(zhǔn)，過(guò)濾器中通過(guò)ds_resultObj變量來(lái)存儲(chǔ)結(jié)果集對(duì)象，我們只需要對(duì)ds_resultObj進(jìn)行重構(gòu)賦值即可

下面將以【多行文本】組件作為示例，說(shuō)明結(jié)果集過(guò)濾器如何編寫(xiě)，首先【多行文本】組件要求的結(jié)果集格式為：

[

{

"value": "hello world"

}

]

DataSoli中 標(biāo)準(zhǔn)的過(guò)濾器寫(xiě)法 為：

let newData = [

{

value: 'new value'

}

]

ds_resultObj = newData

假設(shè)我們使用了API接口作為數(shù)據(jù)源，接口返回的結(jié)果集為：

[

{

"text": "hello world"

}

]

以上結(jié)果集是無(wú)法正常被【多行文本】組件解析的，這時(shí)候我們就可以通過(guò)過(guò)濾器去構(gòu)建新的結(jié)果集數(shù)據(jù)：

let newData = [

{

value: ds_resultObj[0].text

}

]

ds_resultObj = newData