Как правильно посылать и получать данные у WebSocket?

Question

[Викентий]

Пытаюсь написать TS\JS скрипт с использованием WebSocket, чтобы с сервером общаться, но я не пойму, как лучше всего, правильно, сделать отправку и получение данных.
Логика такая, что мне нужно отправить данные, дождаться ответа, вернуть ответ из метода и перейти дальше по коду.
С помощью ИИ и интернета сделал что-то такое:

sendMethod(method_name: string, data: any): Promise<any> {
        return new Promise((resolve, reject) => {
            let method = {
                method_name: method_name,
                data: data,
            };
    
            let messageHandler = (event:MessageEvent) => {
                // Обработка полученного результата
                this.socket.removeEventListener('message', messageHandler);
                let result = JSON.parse(event.data);
                resolve(result);
            };
            // Добавляем обработчик для получения результата
            this.socket.addEventListener('message', messageHandler);
    
            // Отправляем метод
            this.socket.send(JSON.stringify(method));
        });
    }

И уже сам метод:

get_info_about_video(video_uuid:string){
        let result = this.sendMethod(
            "get_info_about_video",
            {
                video_uuid: video_uuid,
            }
        ).then(result => {
            return result;
        });
        console.log(result)
        return result
    }

Но есть ощущение, что это не работает так как мне нужно.
Поэтому я спрашиваю тут, может кто-то знает, как лучше\правильно\чище реализовать такое?

Comments

[imko]

this.socket.removeEventListener('message', messageHandler);

Это чат так once сделал?

[Викентий]

imko, прости, вопроса не понял

[imko]

Викентий, у addEventListener метода есть опция once чтоб он срабатывал один раз и отрубался. Я говорю это чат (ии) что ли придумал его вынести в переменную и через ремув снимать?

[Викентий]

imko, видимо да)

Answer 1

[Антон Антон]

Я сделал так: протокол взял json rpc:

let requestCounter = 0
let jsonRpcPromises = {}
function jsonrpc (method, params) {
  const dataToSend = { jsonrpc: '2.0', method, params, id: ++requestCounter }
  socket.send(JSON.stringify(dataToSend))
  return new Promise((resolve, reject) => {
    jsonRpcPromises[requestCounter] = { resolve, reject }
  })
}

function completeJsonrpc (message) {
  const { id, error, result } = message
  if (error !== undefined) {
    jsonRpcPromises[id]?.reject(error)
  } else {
    jsonRpcPromises[id]?.resolve(result)
  }
  delete (jsonRpcPromises[id])
}

//
    socket.onmessage = function (event) {
      const message = JSON.parse(event.data)
///
      if (message.jsonrpc) {
        completeJsonrpc(message)
      } else if (...) {
/// 
    }

Код выше намеренно упрощен, в нем нет обработок крайних случаев (типа обрыва связи, реконнекта с продолжением или без продолжения обработки, кривых id и т.п.)

сам протокол упрощен, нет пакетного режима, передача идет по одному сообщению, а не массивами (потому что с сокетом это не нужно)

Comments

[Викентий]

Благодарю, что поделился.
Моя проблема в том, что мне нужно последовательно выполнить запросы.
Сначала получить информацию о видео:

let video = this.api.get_info_about_video(this.video_uuid);

get_info_about_video(video_uuid:string){
        let result = this.sendMethod(
            "get_info_about_video",
            {
                video_uuid: video_uuid,
            }
        ).then(result => {
            return result;
        });
        console.log(result)
        return result
    }

Потом уже на его основе выполнить следующий метод
и так далее

[Антон Антон]

Викентий, ну так всё правильно.

async function get_info_about_video(video_uuid) {
    return await jsonrpc('get_info_about_video', {video_uuid})
}

[Викентий]

Антон Антон, хм, похоже не уйти от async. Тогда попробую, спасибо

[Антон Антон]

Викентий, А то, что ты делаешь предполагает не более одного запроса параллельно, что далеко не всегда так. Но ничего не мешает убрать id, сделать сигнатуру как тебе надо и сделать один промис по аналогии с кодом выше.