'How do I write and read data in a browser with a COM port?

I am trying to read and write data from hardware through the browser.

Here's what the hardware does: Send --> Data is simply sent from the unit. Writing --> I write data and when the data is sent correctly, the unit sends back a receive signal. This means that I must first send and then read directly what the device returns as a response.

Global variables:

var flag= false;
var port;

Reading method

//Reads data from the Hardware
function readDataFromHardware(time) {
    // Checks if the browser can open the serial Port
    if  ("serial" in navigator) {
        hardwareData= '';
        readData();


        async function readData()
        {
            if (flag == false)
            {
                port = await navigator.serial.requestPort();
                await port.open({ baudRate: 115200, dataBits: 8, stopBits: 1, parity: "none"});
                flag = true;
            }


            //Send "R" to hardware to get data
            const encoder = new TextEncoder();
            const writer = port.writable.getWriter();
            await writer.write(encoder.encode("R"));
            writer.releaseLock();


            //Wait 1 second and read Port
            setTimeout(async function () {
                const reader = port.readable.getReader();

                try {
                    while (true)
                    {
                        const { value, done } = await reader.read();
                        if (done)
                        {
                            console.log('LOCK');
                            reader.releaseLock();
                            break;
                        }
                        if (value)
                        {
                            // do somthing...
                        }
                    }
                }
                catch (error)
                {
                
                }
            }, time);
        }
    }
}

Writing method

function writeData() 
{
    if ("serial" in navigator) 
    {
        hardwareData = '';
        var outputString = getStringtoSend();
        writeDataAsync();


        async function writeDataAsync() {
            if (flag == false) {
                port = await navigator.serial.requestPort();
                await port.open({ baudRate: 115200, dataBits: 8, stopBits: 1, parity: "none" });
                flag = true;
            }

            //Send "W" to hardware so that the device is ready to receive the data
            const encoder = new TextEncoder();
            const writer = port.writable.getWriter();
            await writer.write(encoder.encode("W"));

            setTimeout(function () 
            {
                writer.write(encoder.encode(outputString));
                writer.write(encoder.encode("\r"));
                writer.releaseLock();

                proofIfDataSent();
            },300);
        }
    }
}

If the dtaen have been received correctly, the device returns a feedback value to see if the values have been received, this is the proofIfDataSent(); method.

async function proofIfDataSent()
{
    setTimeout(async function () 
    {
        const reader = port.readable.getReader();

        try {
            while (true) {
                const { value, done } = await reader.read();
                if (done) {
                    reader.releaseLock();
                }
                if (value) {
                    // do somthing...
                }
            }
        }
        catch (error) {
        }
    }, 300);
}

The methods work individually if I, for example, only read or only write. My goal is that as soon as I have selected the port I can read and write as well. However, I get the following error message:

Uncaught (in promise) TypeError: Failed to execute 'getReader' on 'ReadableStream': ReadableStreamDefaultReader constructor can only accept readable streams that are not yet locked to a reader



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source