React中订阅Azure Web PubSub服务触发未处理TypeError错误

问题背景 #

按照Azure官方文档编写的纯JavaScript代码可正常接收订阅消息，但将逻辑迁移至React类组件的componentDidMount()方法时，出现类型错误。

纯JS可正常运行代码 #

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类组件报错代码 #

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;

错误信息 #

× 未处理的拒绝（TypeError）：'instanceof'的右侧不是对象

堆栈跟踪截图 #

• 堆栈跟踪1：
• 堆栈跟踪2：
• 堆栈跟踪3：

解决办法 #

1. 替换WebSocket依赖：ws库是为Node.js环境设计的，浏览器本身内置WebSocket对象，不需要额外安装该包。删除const WebSocket = require('ws');，直接使用原生WebSocket。

2. 改用ES模块导入：React项目默认使用ES模块语法，将require替换为import：

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

3. 添加资源清理逻辑：在组件卸载时关闭WebSocket连接，避免内存泄漏：

   componentWillUnmount() {
       console.log("Unmounting....")
       if (this.ws) {
           this.ws.close();
       }
   }
   

   同时在connectToPubSub中把WebSocket实例挂载到组件实例：

   this.ws = new WebSocket(token.url);
   

4. 规范环境变量配置：如果使用环境变量，React项目中变量名需以REACT_APP_开头，通过.env文件配置后再读取。

修改后的核心代码片段：

import React from "react";
import { WebPubSubServiceClient } from '@azure/web-pubsub';

class AzurePubSubTest extends React.Component {
    constructor(_props, _context) {
        super(_props, _context);
        this.connectToPubSub = this.connectToPubSub.bind(this);
        this.ws = null;
        this.state = {};
    }

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

    componentWillUnmount() {
        console.log("Unmounting....")
        if (this.ws) {
            this.ws.close();
        }
    }

    async connectToPubSub() {
        const hub = "hub1";
        const endpoint = "Endpoint=https://***check.webpubsub.azure.com;AccessKey=***;Version=1.0;"

        const service = new WebPubSubServiceClient(endpoint, hub);
        const token = await service.getClientAccessToken();
        this.ws = new WebSocket(token.url);
        
        this.ws.on('open', () => console.log('connected'));
        this.ws.on('message', data => console.log('收到消息: %s', data));
        this.ws.on('error', error => console.error('连接错误:', error));
    }

    render() {
        return <div>Testing....</div>;
    }
}

export default AzurePubSubTest;

内容的提问来源于stack exchange，提问作者Nandha