javascript 从react订阅Azure发布子Web服务导致未经处理的拒绝(TypeError)

pdkcd3nj  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(112)

基于official documentation,我能够获得订阅的消息。当我简单地运行javascript代码时,它运行没有任何错误。

const WebSocket = require('ws');
const { WebPubSubServiceClient } = require('@azure/web-pubsub');

async function main() {
  const hub = "hub1";
  let service = new WebPubSubServiceClient(process.env.WebPubSubConnectionString, hub);
  let token = await service.getClientAccessToken();
  let ws = new WebSocket(token.url);
  ws.on('open', () => console.log('connected'));
  ws.on('message', data => console.log('Message received: %s', data));
}

main();

但当我尝试在React类的componentDidMount()函数中执行此操作时,遇到错误。

import React from "react";

// == Azure WebPuSub
// import { WebPubSubServiceClient } from '@azure/web-pubsub';
// import { WebSocket } from 'ws';
const { WebPubSubServiceClient } = require('@azure/web-pubsub');
const WebSocket = require('ws');

class AzurePubSubTest extends React.Component {

    constructor(_props, _context) {
        super(_props, _context);
        this.connectToPubSub = this.connectToPubSub.bind(this);
        this.state = {
        }
    }

    async componentDidMount() {
        console.log("===Mounting....")
        await this.connectToPubSub();
    }

    componentWillUnmount() {
        console.log("Unmounting....")
    }

    async connectToPubSub() {
        const hub = "hub1";
        let endpoint;
        // endpoint = process.env.WebPubSubConnectionString;
        endpoint = "Endpoint=https://***check.webpubsub.azure.com;AccessKey=***;Version=1.0;"
        // endpoint = "wss://***check.webpubsub.azure.com/client/hubs/Hub?access_token=***"; 
        console.log("process.env.WebPubSubConnectionString");
        console.log(endpoint);

        let service = new WebPubSubServiceClient(endpoint, hub);
        let token = await service.getClientAccessToken();
        let ws = new WebSocket(token.url);
        ws.on('open', () => console.log('connected'));
        ws.on('message', data => console.log('Message received: %s', data));

    }

    render() {
        const user = { username: "Check" };
        let testMessages = [];
        if (testMessages === undefined || testMessages === null) {
            testMessages = [];
        }

        return (
            <div>Testing....</div>
        )
    }
}

export default AzurePubSubTest;

×未经处理的拒绝(类型错误):“instanceof”的右侧不是对象
堆栈跟踪1

堆栈跟踪2

堆栈跟踪3

hm2xizp9

hm2xizp91#

  • 这里的问题与websocket一起使用的Jsonwebtoken软件包有关。
  • Jsonwebtoken主要是为运行在Web服务器上的NodeJS构建的,因此它不能完全用于react应用程序的客户端呈现
  • 尝试安装最新版本的jsonwebtoken,否则理想的工作方式是在react应用程序和azure pubsub之间使用一个中介。
  • 此方法的一个解决方案是使用带有azure Web发布子输入/输出绑定的azure函数,然后使用react应用中的WebSocket连接到azure函数。
  • 这里你需要一个带有azure pub sub的输入绑定的HTTP触发器。这个触发器将返回你可以在react应用的web套接字中使用的URL。

函数. json(用于http触发器):

{
"bindings":[
            {
                "authLevel": "anonymous",
                "type": "httpTrigger",
                "direction": "in",
                "name": "req"
            },
            {
                "type": "http", 
                "direction": "out",
                "name": "res"
            },
            {
                "type": "webPubSubConnection",
                "name": "connection",
                "hub": "notification",
                "direction": "in"
            }
    ]
}
  • 这里我使用一个时间触发器发送消息,并在一个简单的HTML文件中创建了一个WebSocket,该HTML文件使用不同的HTTP触发器提供服务。

相关问题