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

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

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

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串

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

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

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

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

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

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

· ws.send(JSON.stringify([{

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

· }]))

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

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

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

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

[

{

"label":"南寧",

"value":10

},

{

"label":"柳州",

"value":20

},

…

]

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

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

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

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

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

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

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

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

當我們在使用動態(tài)數(shù)據(jù)源時，會面臨非標準的數(shù)據(jù)結(jié)果集接入的場景，此時可通過結(jié)果集過濾器進行字段類型變更、數(shù)值去零、字段拆分、字段重組等數(shù)據(jù)格式轉(zhuǎn)換以及一些簡單的邏輯運算。

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

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

DataSoli中基于JS標準語法之上，定義了自己的編寫標準，過濾器中通過ds_resultObj變量來存儲結(jié)果集對象，我們只需要對ds_resultObj進行重構(gòu)賦值即可

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

[

{

"value": "hello world"

}

]

DataSoli中 標準的過濾器寫法 為：

let newData = [

{

value: 'new value'

}

]

ds_resultObj = newData

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

[

{

"text": "hello world"

}

]

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

let newData = [

{

value: ds_resultObj[0].text

}

]

ds_resultObj = newData