Как вернуть JSON из FastAPI (бэкэнд) с помощью веб-сокетов в Vue (интерфейс)? ⇐ Python

[Anonymous]

У меня есть приложение, в котором интерфейс реализован на Vue, а серверная часть использует фреймворк FastAPI. Связь осуществляется через веб-сокеты.
В настоящее время интерфейс позволяет пользователю вводить термин, который отправляется на серверную часть для создания автозаполнения, а также выполнять поиск по URL-адресу, который возвращает объект JSON. При этом я сохраняю этот объект JSON в папке внешнего интерфейса. После этого серверная часть возвращает данные автозаполнения для рассматриваемого термина во внешний интерфейс. Интерфейс отображает aucomplete вместе с данными json.
Однако, когда я изучил немного больше, я заметил, что есть способ отправить JSON, возвращенный URL-адресом запроса, в Vue ( интерфейс), без необходимости сохранять его локально, избегая ошибки, запрещающей выполнение этого процесса более одного раза.
Мой текущий код выглядит следующим образом. Для FastAPI (бэкэнд):
@app.websocket("/")
async def predict_question(websocket: WebSocket):
await websocket.accept()
while True:
input_text = await websocket.receive_text()
autocomplete_text = text_gen.generate_text(input_text)
autocomplete_text = re.sub(r"[\([{})\]]", "", autocomplete_text)
autocomplete_text = autocomplete_text.split()
autocomplete_text = autocomplete_text[0:2]
resp = req.get('www.description_url_search_='+input_text+'')
datajson = resp.json()
with open('/home/user/backup/AutoComplete/frontend/src/data.json', 'w', encoding='utf-8') as f:
json.dump(datajson, f, ensure_ascii=False, indent=4)
await websocket.send_text(' '.join(autocomplete_text))

Файл App.vue (интерфейс):


Title

Version 0.1










import Autocomplete from './components/Autocomplete.vue'
import JsonArq from './components/EstepeJSON.vue'
export default {
name: 'App',
components: {
Autocomplete,
JsonArq: JsonArq
}
}




.main-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Fredoka', sans-serif;
}

h1 {
font-size: 3rem;
}

@import url('https://fonts.googleapis.com/css2?famil ... splay=swap');



Файл Autocomplete.vue в каталоге компонентов:




{{autoComplete}}






export default {
name: 'Autocomplete',
data: function() {
return {
autoComplete: "",
maxChars: 75,
connection: null
}
},
mounted() {
const url = "ws://localhost:8000/"
this.connection = new WebSocket(url);
this.connection.onopen = () => console.log("connection established");
this.connection.onmessage = this.receiveText;
},
methods: {
setCaret() {
const range= document.createRange()
const sel = window.getSelection();
const parentNode = this.$refs.editbar;

if (parentNode.firstChild == undefined) {
const emptyNode = document.createTextNode("");
parentNode.appendChild(emptyNode);
}

range.setStartAfter(this.$refs.editbar.firstChild);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
},
preventInput(event) {
let prevent = false;

// handles capital letters, numbers, and punctuations input
if (event.key == event.key.toUpperCase()) {
prevent = true;
}

// exempt spacebar input
if (event.code == "Space") {
prevent = false;
}

// handle input overflow
const nChars = this.$refs.editbar.textContent.length;
if (nChars >= this.maxChars) {
prevent = true;
}

if (prevent == true) {
event.preventDefault();
}
},
sendText() {
const inputText = this.$refs.editbar.textContent;
this.connection.send(inputText);
},
receiveText(event) {
this.autoComplete = event.data;
}
}
}



Файл EstepeJSON.ue в каталоге компонентов:





Documento




{{ countryList}}








import json from "@/data.json";

export default {
name: "EstepeJson",
data() {
return {
myJson: json,
};
},
};


Пример JSON, возвращаемого URL-адресом:
[
{
"Title": "SOFT-STARTER",
"Cod": "Produto: 15775931",
"Description": "A soft-starter SSW7000 permite o controle de partida/parada e proteção de motores.",
"Technical_characteristics": ["Corrente nominal", "600 A", "Tensão nominal", "4,16 kV", "Tensão auxiliar", "200-240 V", "Grau de proteção", "IP41", "Certificação", "CE"]
},
{
"Title": "SOFT-STARTER SSW",
"Cod": "Produto: 14223395",
"Description": "A soft-starter SSW7000 permite o controle de partida/parada e proteção de motores de indução trifásicos de média tensão.",
"Technical_characteristics": ["Corrente nominal", "125 A", "Tensão nominal", "6,9 kV", "Tensão auxiliar", "200-240 V", "Grau de proteção", "IP54/NEMA12", "Certificação", "CE"]
}
]


Подробнее здесь: https://stackoverflow.com/questions/746 ... e-frontend