如何在React中使用azure通信库在本地测试网络诊断？

Question

我已经按照https://learn.microsoft.com/en-us/azure/communication-services/concepts/voice-video-calling/user-faceing-diagnostics?pivots=platform-web#network实现了代码-价值观。代码在我本地。现在，我想测试它，就像互联网关闭一样，然后在屏幕上显示网络不可用消息。然而，一切都在我本地，它没有触发事件。以下是我的代码：

import {networkDiagnostics} from '../common/NetworkDiagnostics';
import {Features} from '@azure/communication-calling';

const CallScreen = () => {
    const userFacingDiagnostics = call?.feature(Features.UserFacingDiagnostics)
    React.useEffect(() => {    
      const netErr = userFacingDiagnostics?.network.on('diagnosticChanged', networkDiagnostics);
    }, [userFacingDiagnostics]);
}

以下是网络诊断文件：

import { useState } from 'react';
import { NetworkDiagnosticChangedEventArgs, DiagnosticQuality, Features } from '@azure/communication-calling';

export const networkDiagnostics = (
  diagnosticInfo: NetworkDiagnosticChangedEventArgs
) => {
  const [networkQualityMessage, setNetworkQualityMessage] = useState('');
  console.log(`Diagnostic changed: ` +
    `Diagnostic: ${diagnosticInfo.diagnostic}` +
    `Value: ${diagnosticInfo.value}` +
    `Value type: ${diagnosticInfo.valueType}`);

  if (diagnosticInfo.valueType === 'DiagnosticQuality') {
    switch (diagnosticInfo.diagnostic) {
      case 'networkReconnect':
        if (diagnosticInfo.value === DiagnosticQuality.Poor) {
          setNetworkQualityMessage('Poor Network');
        } else if (diagnosticInfo.value === DiagnosticQuality.Bad) {
          setNetworkQualityMessage('Network is disconnected');
        } else if (diagnosticInfo.value === DiagnosticQuality.Good) {
          setNetworkQualityMessage('Network is connected');
        }
        break;
      case 'networkReceiveQuality':
        if (diagnosticInfo.value === DiagnosticQuality.Poor) {
          setNetworkQualityMessage('Poor Network');
        } else if (diagnosticInfo.value === DiagnosticQuality.Bad) {
          setNetworkQualityMessage('Problem with Network');
        } else if (diagnosticInfo.value === DiagnosticQuality.Good) {
          setNetworkQualityMessage('Network is connected');
        }
        break;
    }
  } else if (diagnosticInfo.valueType === 'DiagnosticFlag') {
    switch (diagnosticInfo.diagnostic) {
      case 'noNetwork':
        if (diagnosticInfo.value === true) {
          setNetworkQualityMessage('No Network available');
        } else if (diagnosticInfo.value === false) {
          setNetworkQualityMessage('Network available');
        }
        break;
      case 'networkRelaysNotReachable':
        if (diagnosticInfo.value === true) {
          setNetworkQualityMessage('Internet connection is fluctuating.');
        } else if (diagnosticInfo.value === false) {
          setNetworkQualityMessage('Stable internet connection is available');
        }
        break;
    }
  }

  return networkQualityMessage
}

如何在本地测试？或者我有什么遗漏的吗？

谢谢你， 特鲁普蒂

Answer 1

下面的代码是在react中使用azure通信库添加网络诊断

要为 Azure 通信服务资源启用呼叫诊断，请按照以下步骤操作：

• 创建 Azure Log Analytics 工作区并为资源添加诊断设置。您可以按照此处提供的说明执行此操作。确保通过 Azure Monitor 中的诊断设置启用日志。

import React, { useState } from "react";
import {
  CommunicationIdentityClient,
} from "@azure/communication-identity";
import {
  AzureCommunicationTokenCredential,
} from "@azure/communication-common";
import {
  CallClient,
  Features,
} from "@azure/communication-calling";

const connectionString = "<COMMUNICATION_SERVICES_CONNECTION_STRING>";
const App = () => {
  const [callAgent, setCallAgent] = useState(null);
  const [call, setCall] = useState(null);
  const [networkQualityMessage, setNetworkQualityMessage] = useState("");

  const initializeCallAgent = async () => {
    try {
      const identityClient = new CommunicationIdentityClient(connectionString);
      const { token } = await identityClient.createUserAndToken(["voip"]);
      const agent = await new CallClient().createCallAgent(
        new AzureCommunicationTokenCredential(token)
      );

      setCallAgent(agent);
      console.log("Call Agent Initialized");
    } catch (error) {
      console.error("Failed to initialize Call Agent:", error);
    }
  };

  const startCall = async () => {
    if (!callAgent) {
      console.error("Call Agent is not initialized.");
      return;
    }

    try {
      const currentCall = callAgent.startCall(
        [{ phoneNumber: "+9191" }],
        { alternateCallerId: { phoneNumber: "+186" } }
      );

      setCall(currentCall);
      console.log("Call started");
      subscribeToCallDiagnostics(currentCall);
    } catch (error) {
      console.error("Error starting call:", error);
    }
  };

  const subscribeToCallDiagnostics = (currentCall) => {
    if (!currentCall) return;

    const userFacingDiagnostics = currentCall.feature(Features.UserFacingDiagnostics);
    if (userFacingDiagnostics) {
      userFacingDiagnostics.network.on("diagnosticChanged", (diagnosticInfo) => {
        console.log("Diagnostic changed:", diagnosticInfo);
        handleNetworkDiagnostics(diagnosticInfo);
      });
    }
  };

  const handleNetworkDiagnostics = (diagnosticInfo) => {
    if (diagnosticInfo.valueType === "DiagnosticQuality") {
      if (diagnosticInfo.diagnostic === "networkReceiveQuality") {
        switch (diagnosticInfo.value) {
          case "Good":
            setNetworkQualityMessage("Network quality is good.");
            break;
          case "Poor":
            setNetworkQualityMessage("Network quality is poor.");
            break;
          case "Bad":
            setNetworkQualityMessage("Network quality is bad.");
            break;
          default:
            break;
        }
      }
    } else if (diagnosticInfo.valueType === "DiagnosticFlag") {
      if (diagnosticInfo.diagnostic === "noNetwork") {
        if (diagnosticInfo.value) {
          setNetworkQualityMessage("No network available.");
        } else {
          setNetworkQualityMessage("Network is available.");
        }
      }
    }
  };

  const hangUpCall = async () => {
    if (!call) {
      console.error("No active call to hang up.");
      return;
    }

    try {
      await call.hangUp();
      setCall(null);
      console.log("Call ended");
    } catch (error) {
      console.error("Error hanging up call:", error);
    }
  };

  return (
    <div className="App">
      <h1>Azure Communication Services with Network Diagnostics</h1>
      <button onClick={initializeCallAgent}>
        Initialize Call Agent
      </button>
      <button onClick={startCall} disabled={!callAgent}>
        Start Call
      </button>
      <button onClick={hangUpCall} disabled={!call}>
        Hang Up
      </button>
      <div>
        {networkQualityMessage && <p>{networkQualityMessage}</p>}
      </div>
    </div>
  );
};

export default App;

输出：

请参阅此 MSDOC，使用 Azure 通信服务将视频通话添加到您的应用程序

Azure 通信服务呼叫Web 应用程序的诊断功能的代码取自此参考文献git。

import React, { useState } from "react";
import {
  CallClient,
  LocalVideoStream,
  Features,
} from "@azure/communication-calling";
import { AzureCommunicationTokenCredential } from "@azure/communication-common";
import "./App.css";

const App = () => {
  const [callAgent, setCallAgent] = useState(null);
  const [call, setCall] = useState(null);
  const [incomingCall, setIncomingCall] = useState(null);
  const [networkQualityMessage, setNetworkQualityMessage] = useState("");

  const initializeCallAgent = async (userAccessToken) => {
    try {
      const callClient = new CallClient();
      const tokenCredential = new AzureCommunicationTokenCredential(userAccessToken);
      const agent = await callClient.createCallAgent(tokenCredential);

      agent.on("incomingCall", (args) => {
        setIncomingCall(args.incomingCall);
      });

      setCallAgent(agent);
      console.log("Call Agent Initialized");
    } catch (error) {
      console.error("Failed to initialize Call Agent:", error);
    }
  };

  const startCall = async (calleeAcsUserId) => {
    try {
      const currentCall = callAgent.startCall([{ communicationUserId: calleeAcsUserId }]);
      setCall(currentCall);
      subscribeToCallDiagnostics(currentCall);
    } catch (error) {
      console.error("Error starting call:", error);
    }
  };

  const acceptIncomingCall = async () => {
    try {
      const acceptedCall = await incomingCall.accept();
      setCall(acceptedCall);
      subscribeToCallDiagnostics(acceptedCall);
    } catch (error) {
      console.error("Error accepting call:", error);
    }
  };

  const subscribeToCallDiagnostics = (currentCall) => {
    if (!currentCall) return;

    const userFacingDiagnostics = currentCall.feature(Features.UserFacingDiagnostics);
    if (userFacingDiagnostics) {
      userFacingDiagnostics.network.on("diagnosticChanged", (diagnosticInfo) => {
        console.log("Diagnostic changed:", diagnosticInfo);
        handleNetworkDiagnostics(diagnosticInfo);
      });
    }
  };

  const handleNetworkDiagnostics = (diagnosticInfo) => {
    if (diagnosticInfo.valueType === "DiagnosticQuality") {
      if (diagnosticInfo.diagnostic === "networkReceiveQuality") {
        switch (diagnosticInfo.value) {
          case "Good":
            setNetworkQualityMessage("Network quality is good.");
            break;
          case "Poor":
            setNetworkQualityMessage("Network quality is poor.");
            break;
          case "Bad":
            setNetworkQualityMessage("Network quality is bad.");
            break;
          default:
            break;
        }
      }
    } else if (diagnosticInfo.valueType === "DiagnosticFlag") {
      if (diagnosticInfo.diagnostic === "noNetwork") {
        if (diagnosticInfo.value) {
          setNetworkQualityMessage("No network available.");
        } else {
          setNetworkQualityMessage("Network is available.");
        }
      }
    }
  };

  const hangUpCall = async () => {
    try {
      await call.hangUp();
      setCall(null);
    } catch (error) {
      console.error("Error hanging up call:", error);
    }
  };

  return (
    <div className="App">
      <h1>Azure Communication Services - Network Diagnostics</h1>
      <div>
        <input
          type="text"
          id="user-access-token"
          placeholder="Enter User Access Token"
          onBlur={(e) => initializeCallAgent(e.target.value)}
        />
      </div>
      <div>
        <input type="text" id="callee-acs-user-id" placeholder="Enter Callee ACS User ID" />
        <button onClick={() => startCall(document.getElementById("callee-acs-user-id").value)}>
          Start Call
        </button>
        <button onClick={acceptIncomingCall} disabled={!incomingCall}>
          Accept Call
        </button>
        <button onClick={hangUpCall} disabled={!call}>
          Hang Up
        </button>
      </div>
      <div>
        {networkQualityMessage && <p>{networkQualityMessage}</p>}
      </div>
    </div>
  );
};

export default App;

输出：

要检索呼叫诊断中的数据仅在几个小时后（显然是 2-5 小时）才可见，这是令人惊讶的。