ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

cube.js 基于http 通道的数据实时更新

2021-09-27 09:00:31  阅读:200  来源: 互联网

标签:cube http cubejs js item import return const


机制实际上与webscoket 类似,从原理上是使用了有个定时拉取的处理

配置方法

cube.js

module.exports = {
    orchestratorOptions: {
        queryCacheOptions: {
          refreshKeyRenewalThreshold: 4,
        }
    },
    processSubscriptionsInterval:2,
};cubejs-websocket
   

web app

实际上就是普通的http 链接,只是使用了subscribe

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',
//   }),
// });
   
// http poll 模式链接
const cubejsApi = cubejs(
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MzI2Njc5NzcsImV4cCI6MTYzMjc1NDM3N30.ki5AokHM6cgRAK7XUaZbOk27PDzu0vPRImzM442eoM0",
    {apiUrl: 'http://localhost:4000/cubejs-api/v1'}
);
   
function Demo() {
  const { resultSet, isLoading, error, progress } = useCubeQuery(
    {"dimensions":["testapi.a","testapi.b"]},{
    cubejsApi,
    subscribe: true, // http poll 模式数据处理
    });
 
  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;
 

说明

目前http poll 有个不太好的地方是当后端服务不可用的时候会造成poll 失效哪怕服务可用了之后也不行,需要刷新界面

参考资料

https://www.cnblogs.com/rongfengliang/p/15341020.html
https://github.com/rongfengliang/cubejs-websocket/

标签:cube,http,cubejs,js,item,import,return,const
来源: https://www.cnblogs.com/rongfengliang/p/15341349.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有