ReactJS 无法构造“WebSocket”：子协议“[object Object]”无效

Posted 2023-02-16

技术标签:

【中文标题】ReactJS 无法构造“WebSocket”：子协议“[object Object]”无效【英文标题】：ReactJS Failed to construct 'WebSocket': The subprotocol '[object Object]' is invalid 【发布时间】：2021-08-25 22:41:09 【问题描述】：

我在使用 enigma.js (https://qlik.dev/apis/javascript/enigmajs) 的反应应用程序中遇到以下错误。我正在尝试初始化 WebSocket 连接并收到错误消息。 “构造‘WebSocket’失败：子协议‘[object Object]’无效”。

WebSocket 连接 URL 是正确的，因为它可以使用返回数据的 https://catwalk.core.qlik.com/?engine_url=wss://sense-demo.qlik.com/app/133dab5d-8f56-4d40-b3e0-a6b401391bde 进行测试。您可以尝试编辑会返回错误的 URL。

代码是

async init() 
    
const appId = "133dab5d-8f56-4d40-b3e0-a6b401391bde";
    const url =
      "wss://sense-demo.qlik.com/app/133dab5d-8f56-4d40-b3e0-a6b401391bde"; 

    const session = enigma.create(
      schema,
      createSocket: () =>
        new WebSocket(url, 
        ),
    );

    const global = await session.open();
    const app = await global.openDoc(appId);
    const appLayout = await app.getAppLayout();

    console.log(appLayout);

【问题讨论】：

那里的appId 是什么？ @GiorgiGvimradze 我已经编辑了代码。 appid 现在被声明了。 AppId 是我要连接的文档的 ID。该代码在 websockets 连接处失败。需要在打开会话的地方建立连接，然后打开文档。但是这里的 WebSocket 连接是问题所在。该代码是从示例 [qlik.dev/] 构建的我刚在codesandbox.io上启动它并得到了响应，里面有这个：qTitle: 'Helpdesk Management'等等。要我分享代码和链接吗？ @GiorgiGvimradze 是的，这就是我所期待的结果。你能分享链接和代码吗？我使用npx create-react-app my-app 创建了一个应用程序并在app.js 上运行该函数。这里是 React 项目的源代码：community.qlik.com/t5/Qlik-Design-Blog/…，这是我的 NodeJS 项目codesandbox.io/s/new-feather-mme3i?file=/src/index.js:692-708 的工作沙箱链接，它输出所需的内容，但 React 项目在此处给出错误：codesandbox.io/s/frosty-cdn-onxvi?file=/src/qDoc.config.js你可以在控制台看到错误！ 【参考方案1】：

我找到了解决方案： qDoc.config.js

const enigma = require('enigma.js');
const schema = require('enigma.js/schemas/12.20.0.json');
const SenseUtilities = require('enigma.js/sense-utilities');

const config = 
  host: 'sense-demo.qlik.com',
  secure: true,
  port: 443,
  prefix: '',
  appId: '133dab5d-8f56-4d40-b3e0-a6b401391bde',
;

const url = SenseUtilities.buildUrl(config);

async function init() 
  const session = enigma.create(
    schema,
    url,
    suspendOnClose: true,
  );

  const global = await session.open();
  const app = await global.openDoc(config.appId);
  const appLayout = await app.getAppLayout();

  console.log(appLayout);

init();

const session = enigma.create( schema, url, suspendOnClose: true );

// open doc and return promise which will resolve to doc
export const openDoc = () => (
  session.open().then((global) => global.openDoc(config.appId))
);

// close session
export const closeSession = () => (
  session.close()
);