I have a program that generates notes based on a topic, using OpenAI’s API. I am using Flask-SocketIO to make it happen in real time on the website. I send the request to the API by clicking a button on the website, and it is supposed to update the InnerHTML of a div to the However, when I click the button, it comes up with an error on screen and in the console:

Failed to load resource: the server responded with a status of 405 (METHOD NOT ALLOWED)

I am also getting another error in the console, when I first submit the form to generate the notes:

WebSocket connection to 'ws://127.0.0.1:5000/socket.io/' failed: Invalid frame header

Here is my code:

script.js

var socket = io('http://127.0.0.1:5000/');
socket.on('connect', function() {
    console.log('connected')
});

function createSpan() {
    var c = 1
    var subheadings = []
    for (let i of document.getElementsByTagName('li')) { // This iterates through each subheading
        blankSpace = document.createElement('div');
        blankSpace.id = 'p' + c;
        var buttonTxt = i.innerHTML;
        subheadings.push(buttonTxt)
        genNotesBtn.onclick = function() {
            socket.emit('notesGen', { text: subheadings[c-1], targetId: blankSpace.id });
        }
        c++;
    }
}

socket.on('notes', function(data) {
    var targetElement = document.getElementById(data.targetId);
    if (targetElement) {
        targetElement.innerHTML = data.notes;
    }
});

app.py

from flask import Flask, render_template, request
from flask_socketio import SocketIO, emit

app = Flask(__name__)
socketio = SocketIO(app)

@app.route('/')
def index():
    return render_template('index2.html')

@socketio.on('notesGen')
def notesGen(data):
    detail = request.form.get('detailSelectorDropdown') # Gets data from a form asking about the level of detail the notes should be.
    threadid = notesGenThread(data.get('text'), detail)
    notes = notesGenRun(threadid)
    print('received notesGen event with data: ' + str(data.get('text')))
    emit('notes', {'notes': notes, 'targetId': data['targetId']})

if __name__ == '__main__':
    socketio.run(app, debug=True)

I changed the data I was emitting to JSON, however this did not make a difference. Furthermore, the socket.on function in script.js was originally inside the function, however I put it outside. Once again this didn’t make a difference.