Azure speech to text giving WebSocket error in docker

Question

I'm making a website using Next.js 14, and I want to add speech-to-text functionality to it. I followed this sample code as a guide: https://github.com/Azure-Samples/AzureSpeechReactSample. Locally, it's working as expected; the token is being fetched from the backend, and if I refresh, it fetches from the cookie, and I can see it's working.

However, once I push it to a Docker container running on an Azure VM, it sometimes works, but usually, it doesn't, without me changing any code. Sometimes restarting the server makes it work, but sometimes it doesn't.

Working locally on Chrome:

Issue on Azure VM:

Also the local version works on chrome and edge but it doesnt work on firefox and gives a similar websocket error as on the server:

Heres a screenshot of it not working then briefly working on the server:

I'm not seeing any specific error messages or logs in the Docker container, except for the WebSocket error in the browser terminal.

Heres what the network log looks like when running locally:
Network log on server seems to get no response from azure:

Hosting Environment Details:

• Azure VM: Standard B1ms (1 vcpus, 2 GiB memory)
• Operating System: Linux (ubuntu 20.04)
• Docker version 25.0.2, build 29cf629

Azure Region: UK South (uksouth)

Intermittent Behavior: The issue is intermittent; sometimes it works fine for a while, and then it stops working without any code changes or server restarts.

I've tried switching from free speech tier to a standard one and its still the same issue.

Please let me know if you need any additional information or if you have any suggestions on how to troubleshoot this issue further.

Answer 1

Hello @Andris Kokins , I'm glad that you were able to partially resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this! Since the Microsoft Q&A community has a policy that " The question author cannot accept their own answer. They can only accept answers by others ", I'll repost your solution in case you'd like to "Accept " the answer.

Issue: Azure speech to text giving WebSocket error in docker

Solution:

Adding this to token_util.jsx made it work but it still works on chrome but firefox still gives the websocket error, might be related to this bug:- https://github.com/microsoft/cognitive-services-speech-sdk-js/issues/814#issuecomment-2056775876

import { unstable_noStore } from 'next/cache'; 
unstable_noStore(); 
const res = await fetch('/api/token', {next: {revalidate: 0}});

Here is the full code of token_util.js for reference:

// token_util.js
// https://github.com/Azure-Samples/AzureSpeechReactSample

import Cookie from 'universal-cookie';

export async function getTokenOrRefresh() {
    const cookie = new Cookie();
    const speechToken = cookie.get('speech-token');

    if (speechToken === undefined) {
        try {
            const res = await fetch('/api/token', {next: {revalidate: 0}});
            if (!res.ok) {
                throw new Error(`Failed to fetch speech token: ${res.status} ${res.statusText}`);
            }
            const data = await res.json();
            const token = data.token;
            const region = data.region;
            cookie.set('speech-token', region + ':' + token, { maxAge: 540, path: '/' });

            console.log('Token fetched from back-end: ' + token);
            return { authToken: token, region: region };
        } catch (err) {
            console.log(err);
            return { authToken: null, error: err.message };
        }
    } else {
        console.log('Token fetched from cookie: ' + speechToken);
        const idx = speechToken.indexOf(':');
        return { authToken: speechToken.slice(idx + 1), region: speechToken.slice(0, idx) };
    }
}

Thank you again for your time and patience throughout this issue.

Regards,
Vasavi

Please remember to "Accept Answer" if any answer/reply helped, so that others in the community facing similar issues can easily find the solution.