node.js - 为什么我无法在 React 代码中使用 @azure/web-pubsub Node 包？

Question

我在react/webpack应用程序中导入以下包:

import { WebPubSubServiceClient } from '@azure/web-pubsub'

当我调用 WebPubSubServiceClient 时，如下所示:

const connectionString = 'XXXXX'
const hubName = 'YYYY'
let serviceClient = new WebPubSubServiceClient(connectionString, hubName)

我收到以下错误:

An error occured as follows:  TypeError: url__WEBPACK_IMPORTED_MODULE_1__.URL is not a constructor
    at parseConnectionString (parseConnectionString.js:24)
    at new WebPubSubServiceClient (hubClient.js:31)

通过查看调试器中的代码(位于 Microsoft @azure/web-pubsub Node 包代码中)，我发现导入 URL 可能是问题所在:

import { AzureKeyCredential } from "@azure/core-auth";
import { URL } from "url";
export function parseConnectionString(conn) {
    let parsed = {};
    conn.split(";").forEach((i) => {
        const assignmentPos = i.indexOf("=");
        if (assignmentPos === -1)
            return;
        const key = i.substring(0, assignmentPos).toLowerCase();
        const value = i.substring(assignmentPos + 1);
        parsed[key] = value;
    });
    let endpointPart = parsed["endpoint"];
    if (!endpointPart)
        throw new TypeError("connection string missing endpoint");
    if (!endpointPart.startsWith("http")) {
        endpointPart = `https://${endpointPart}`;
    }
    const key = parsed["accesskey"];
    if (!key)
        throw new TypeError("connection string missing access key");
    const credential = new AzureKeyCredential(key);
    const port = parsed["port"];
  >>  const url = new URL(endpointPart); << the error comes from here
    url.port = port;
    const endpoint = url.toString();
    url.port = "";
    return { credential, endpoint };
}
//# sourceMappingURL=parseConnectionString.js.map

关于Webpack我使用以下版本:

"webpack": "^4.44.2",
"webpack-bundle-analyzer": "^3.9.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",

我必须说，在纯 NodeJS 中使用相同的代码和模块效果很好。所以我相信它与 react 有关？

我应该做什么？

Answer 1

最后，只要选择正确的构造函数，在 React 上运行是没有麻烦的。

所以这是如何做到的:

// == Azure WebPuSub
import { WebPubSubServiceClient, AzureKeyCredential } from '@azure/web-pubsub'

// == W3C sockets
import { w3cwebsocket as W3CWebSocket } from 'websocket'




// == Create the service client
const hubName = 'telemetry'
const key = <KEY>
const cred = new AzureKeyCredential(key)
const endpoint = "https://XXXXX.webpubsub.azure.com"
const serviceClient = new WebPubSubServiceClient(endpoint, cred, hubName)
console.log('Azure WebPubSub service client is', serviceClient)

/**
 * @summary Connect to the secure socket server thru the WebPubSub service
 */
async function connect ({onError, onOpen, onMessage, onClose}) {
    console.log('About to get auth token…')
    let token = await serviceClient.getAuthenticationToken()
    //console.log('Auth token is', token)
    
    // == Connect to the secured socket server          
    const url = token.url
    let wsClient = new W3CWebSocket(url)

    console.log('Web socket is',wsClient)


    // == Connect the callbacks
    wsClient.onerror = onError
    wsClient.onopen = onOpen
    wsClient.onmessage = onMessage
    wsClient.onclose = onClose
}

// == Now actually connect to the secure web sockets
connect({onError, onOpen, onMessage, onClose})

瞧!效果就像魅力😁