reactjs - How to test network diagnostics on local using azure communication library in react? - Stack Overflow

admin管理员组

文章数量:1123690

I have implemented the code as per #network-values. Code is on my local. Now, I want to test it like if internet is off then display Network not available message on screen. However, everything is on my local, it is not triggering the event. Following is my code:

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

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

And following is NetworkDiagnostics file:

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
}

How can I test it on my local? Or is there anything that I am missing out?

Thank you, Trupti

本文标签： reactjsHow to test network diagnostics on local using azure communication library in reactStack Overflow