How do I connect the HM10 to a web app and use it for two-way communication

Question

Last time I posted a problem stating that no matter what I did, the BLE module (what I now know was actually a HC-06) did not work when trying to communicate with a web app. Since then, I have gotten a new HM10 module and replaced the previous HC-06 to try and make it work. To put it simply, it still does not work.

I've spent the past few days trying to get this thing to work. I tried logging everything, trying to reduce things to a simpler state, and isolating segments of the code, but it just does not want to work. First thing I tried was to run the code as is. Arduino Code:

    #include <SoftwareSerial.h>
    #define BT_RX_PIN 10
    #define BT_TX_PIN 11
    String btdata = " ";
    String screen;
    SoftwareSerial bt(BT_RX_PIN, BT_TX_PIN);

    void setup() {
        Serial.begin(9600);
        bt.begin(9600);
    }
    void loop() {
        ...
        screen = "some string";
        Serial.println(screen);
        bt.print(screen);
        btdata = bt.readString();
        Serial.println(btdata);
    }    

JS Code:

function read(event) {
    console.log("reading");
    let buffer = event.target.value.buffer;
    let view = new Uint8Array(buffer);
    let decodedMessage = String.fromCharCode.apply(null, view);

    let newNode = document.createElement('p');
    newNode.classList.add("received-message");
    newNode.textContent = decodedMessage;

    document.getElementById("terminal").appendChild(newNode);

    let placeholder = document.getElementsByClassName('placeholder');
    if(placeholder.length != 0) placeholder[0].remove();

    console.log(decodedMessage);
}

async function write(event){
    let message = document.getElementById("message-input").value;
    message += '\n';
    let buffer = new ArrayBuffer(message.length);
    let encodedMessage = new Uint8Array(buffer);
    
    for(let i=0; i<message.length; i++){
        encodedMessage[i] = message.charCodeAt(i);
    }

    await serialCharacteristic.writeValue(encodedMessage);
    document.getElementById("message-input").value = null;
}


document.getElementById('connect').addEventListener("click", connect);
document.getElementById('send').addEventListener("click", write);

The idea is to send some string to the web app, have the web app do some stuff with the String sent, then return it. So, it prints to the HM10, then it receives from the HM10. Now, while this is the current form of the code, I did consider some possible reasons why it didn't work. I tried using bt.available(), (either using a while loop or if statement) but that either resulted in an infinite loop or the same problem as the above code segment. The output for this code segment was:

some string

some string

some string
...

So, basically it was not managing to receive anything at all. So the btdata was just assigned as the blank string. I checked by highlighting it, there wasn't even a space, literally just without any characters at all.

Now, taking a look at the Arduino, the TX light does flash whenever I try to send a message with it, but the web app developer console never logs anything. That confuses me even more, since that to me seems like the HM10 is trying to send the string, but it just never reaches the web app even though they are connected.

I did take the code from a github repository my friend recommended to me since he used it and got it to work. So I naturally thought maybe my additional code was causing the issue. I didn't see how as I didn't interact with the HM10 outside of the segment shown above, but I was desperate. So I reverted mostly everything back to the way it was as in the original repository (barring a few logging statements), and ran the code again.

Arduino Code:

#include <SoftwareSerial.h>

#define BT_RX_PIN 10
#define BT_TX_PIN 11

SoftwareSerial BT(BT_TX_PIN, BT_RX_PIN);

String message;

void setup() {
  BT.begin(9600);
  Serial.begin(9600);
}

void loop() {
  if(BT.available() ){
    message = BT.readStringUntil('\n');
    message += " received";
    BT.println(message);
    Serial.println(message);
  }
}

Now a new issue was popping up. Whenever I tried connecting the HM10 to the web app, there would be an error: index-93a81548.js:21 Uncaught (in promise) DOMException: GATT Server is disconnected. Cannot retrieve services. (Re)connect first with device.gatt.connect.

Now my previous confusion goes out the window as I am now more confused. I looked up the error (as you do), and found that the most common fix that I could find was restarting Windows or simply retrying. In my case neither fix worked. This confuses me some more as it worked perfectly fine earlier insofar as the connection went, but now it does not even connect.

I tried a few small changes, and looking up the HM10 documentation, as well as the documentation for the SoftwareSerial library. As far as I could tell, nothing was explicitly wrong. Furthermore, most HM10 articles I found used it with connected to an Android, not a web app. So I'm really running out of ideas here. Any clues on why this doesn't work?