First time socket connection failed on production server.

[Rahulnagarwal]

Many times it did not gave any output for first time socket connection but works for second time or iff i refreshed the page. It always works on localhost but some times it did not return on production maybe due to some race condition or connection failed.

 const onStartRecording = async () => {
    try {
      const token = await localStorage.getItem('user_token_demo');
      if (url == '' || url == null || url == undefined) {
             
      }
      socket = io(url, { 
        extraHeaders: {
          'Authorization': `Bearer ${token}`
        }
      });
    
      var validate_token_url = process.env.REACT_APP_EXT_API_BASE_URL + "/validate-token";
      var result = postRequestWithAuthenticationHeader(validate_token_url, {}).then((response) => {
        if (response.status == 401) {
          clearSessionAndRedirect();
          return;
        }
        return response.json()
      })
      if (!stream.current) {
        await onStartStreaming()
      }
      if (stream.current) {
        const audioTrack = stream.current.getAudioTracks()[0];
        const sampleRate = audioTrack.getSettings().sampleRate;
        if (!recorder.current) {
          const {
            default: { RecordRTCPromisesHandler, StereoAudioRecorder },
          } = await import('recordrtc')

          const recorderConfig: Options = {
            mimeType: 'audio/webm;codecs=pcm',
            numberOfAudioChannels: 1, // mono
            recorderType: StereoAudioRecorder,
            // sampleRate: 16000, 
            timeSlice: streaming ? timeSlice : undefined,
            type: 'audio',
            ondataavailable:
              autoTranscribe && streaming ? onDataAvailable : undefined,
          }
          recorder.current = new RecordRTCPromisesHandler(
            stream.current,
            recorderConfig
          )
        }
        if (!encoder.current) {
          const { Mp3Encoder } = await import('@breezystack/lamejs')
          encoder.current = new (Mp3Encoder as any)(1, sampleRate, 96);
        }
        if (recorder != undefined && recorder.current != undefined) {
          const recordState = await recorder.current.getState()
          if (recordState === 'inactive' || recordState === 'stopped') {
            await recorder.current.startRecording()
          }
          if (recordState === 'paused') {
            await recorder.current.resumeRecording()
          }
          if (nonStop) {
            onStartTimeout('stop')
          }
          sessionTranscript.current = undefined;
          timeoutFunction.current = setTimeout(handleMaxRecordingDuration, 900000); //15 minute timer : 900000
          setRecording(true);
        }
      }
    } catch (err) {
      console.error(err)
    }
  }


const onStartStreaming = async () => {
    try {
      const audioContext = new AudioContext();
      const gainNode = audioContext.createGain();
      const gainFactor = 0.7; // Example gain factor (2x amplification)
      gainNode.gain.value = gainFactor;
      if (stream.current) {
        stream.current.getTracks().forEach((track) => track.stop())
      }
      stream.current = await navigator.mediaDevices.getUserMedia({
        // audio: true,
        audio: {
          echoCancellation: true,
          noiseSuppression: true,
          //autoGainControl: true,
        }
      })

      const source = audioContext.createMediaStreamSource(stream.current);
      source.connect(gainNode); // Connect the source to the gain node
      const destination = audioContext.createMediaStreamDestination();
      gainNode.connect(destination); // Connect the gain node
      stream.current = destination.stream;

      if (!listener.current) {
        const { default: hark } = await import('hark')
        listener.current = hark(stream.current, {
          interval: speakInterval,
          play: false,
        })
        listener.current.on('speaking', onStartSpeaking)
        listener.current.on('stopped_speaking', onStopSpeaking)
      }
    } catch (err) {
      console.error(err)
    }
  }



 useEffect(() => {
    if (socket != null && socket != undefined) {
      socket.on('response', (data: any) => {
        var text;

        if (data != '' || (sessionTranscript.current == null || sessionTranscript.current == '' || sessionTranscript.current == undefined)
          || (sessionTranscript.current != null && sessionTranscript.current != undefined)) {
          if ((editorIndex > 0) && !readOnlyEditor) {
            text = data
          } else {
            if (sessionTranscript.current != null) {
              text = sessionTranscript.current + " " + data;
            }
            else {
              text = data;
            }
          }
        }
        if (data != '') {
          const blob: any = null;
          sessionTranscript.current = text;
          setTranscript(
            {
              blob,
              text: text,
            })
        }

        if (!recording && !transcribing) {
          setLoading(false);
        }
      });

      socket.on('disconnect', function () {
        console.log('disconnected to server');
      });

      return () => {
        socket.off('response');
      };
    }

  }, [editorIndex, readOnlyEditor, socket]);

Edit by @darrachequesne: format

[darrachequesne]

Hi!

I see the socket is a global object, is it possible that onStartRecording() is called twice?

To prevent this kind of issue, we recommend initializing the client in another file (with autoConnect: false), and then call socket.connect() when needed.

Please check https://socket.io/how-to/use-with-react