cube.js 是支持数据实时更新的（基于websocket+refreshkey），以下是参考使用
环境准备
- docker-compose 文件
version: "3"
services:
postgres:
image: postgres:12.1
environment:
- POSTGRES_PASSWORD=dalong
ports:
- 5432:5432
db sql
CREATE TABLE testapi (
a text,
b text
);
- cube app
cube.js
// Cube.js configuration options: https://cube.dev/docs/config
module.exports = {
orchestratorOptions: {
queryCacheOptions: {
refreshKeyRenewalThreshold: 4,
}
},
processSubscriptionsInterval:1,
};
schema
cube(`testapi`, {
sql: `select * from public.testapi`,
dimensions: {
a: {
type: `string`,
sql: `a`,
},
b: {
type: `string`,
sql: `b`,
},
},
});
.enb
CUBEJS_DB_HOST=localhost
CUBEJS_DB_NAME=postgres
CUBEJS_DB_USER=postgres
CUBEJS_DB_PASS=dalong
CUBEJS_WEB_SOCKETS=true
CUBEJS_DEV_MODE=true
CUBEJS_SCHEDULED_REFRESH_TIMER=false
CUBEJS_DB_TYPE=postgres
CUBEJS_WEB_SOCKETS=true
CUBEJS_API_SECRET=ecea204a8257dc3d52416f16c89b67ea7e9a15e668721ef16b9a4aa29a74b1935e6bbb3dac0250c9a5ca03f31db82f80c3818316f1cb8929391744a3ca799f32
web 集成
react app (可以通过create react app 创建)
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@cubejs-client/react": "^0.27.0",
"@cubejs-client/ws-transport": "^0.28.38",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^4.15.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.js
import './App.css';
import MyDocument from './MyDocument'
function App() {
return (
<div className="App">
<MyDocument />
</div>
);
}
export default App;
MyDocument组件
import React from 'react';
import { Table } from 'antd';
import { useCubeQuery } from '@cubejs-client/react';
import cubejs from '@cubejs-client/core';
import WebSocketTransport from '@cubejs-client/ws-transport';
import 'antd/dist/antd.css';
const cubejsApi = cubejs({
transport: new WebSocketTransport({
authorization: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MzI2Njc5NzcsImV4cCI6MTYzMjc1NDM3N30.ki5AokHM6cgRAK7XUaZbOk27PDzu0vPRImzM442eoM0",
apiUrl: 'ws://localhost:4000/cubejs-api/v1',
}),
});
function Demo() {
const { resultSet, isLoading, error, progress } = useCubeQuery(
{"dimensions":["testapi.a","testapi.b"]},{
cubejsApi,
subscribe: true,
});
if (isLoading) {
return <div>{progress && progress.stage && progress.stage.stage || 'Loading...'}</div>;
}
if (error) {
return <div>{error.toString()}</div>;
}
if (!resultSet) {
return null;
}
function demoapp(item){
return item["shortTitle"]
}
const dataSource = resultSet.tablePivot();
const columns = resultSet.tableColumns().map((item)=>{
let info = {
// fixed:item.shortTitle=="count",
title:`${item.shortTitle}||测试`,
shortTitle:`${item.title}`
}
return info
})
console.log(columns)
return <div >
<Table columns={columns} dataSource={dataSource} scroll={{ x: 1000, y: 300 }} />;
</div>
}
// Create Document Component
export default Demo;
参考效果
可以通过写入db数据测试 
说明
几个配置参数比较重要
cube.js
orchestratorOptions: {
queryCacheOptions: {
refreshKeyRenewalThreshold: 4, // 加速数据变动
}
},
processSubscriptionsInterval:5, // 可以加速数据变动
.env
CUBEJS_WEB_SOCKETS=true 制定开启websocket（实际上默认已经开启了）
react 客户端链接，需要使用WebSocketTransport 同时useCubeQuery需要开启制定·subscribe: true
以上内容参考自官方文档,示例demo 我已经push github 了，可以参考
参考资料
https://cube.dev/docs/real-time-data-fetch
https://github.com/rongfengliang/cubejs-websocket