cube.js websocket 实时数据更新说明

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 = {
      ...item,
      // 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

posted on 2021-09-26 23:32  荣锋亮  阅读(329)  评论(0)  编辑  收藏  举报

导航