Изменение состояния в React вызывает ошибку 429 с Azure SignalR

Question

Я пытаюсь создать приложение React с Azure SignalR, используя этот учебник в качестве основы. Я ничего не изменил в отношении сервера SignalR, , который можно найти здесь . Я использую JS версию. В противном случае приложение работает нормально, но всякий раз, когда состояние изменяется, запросы отправляются в SignalR или что-то в том же духе, что в итоге приводит к ошибке 429. Это вывод, когда состояние изменяется один раз:

[2020-01-09T15:11:42.207Z] Information: Normalizing '/api' to 'http://localhost:3000/api'.
[2020-01-09T15:11:42.437Z] Information: WebSocket connected to wss://bpm-drawing.service.signalr.net/client/?hub=chat&id=5_gylFnC52hduxXnoFT7dgb3b5d12b1&access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYmYiOjE1Nzg1ODI3MDIsImV4cCI6MTU3ODU4NDUwMiwiaWF0IjoxNTc4NTgyNzAyLCJhdWQiOiJodHRwczovL2JwbS1kcmF3aW5nLnNlcnZpY2Uuc2lnbmFsci5uZXQvY2xpZW50Lz9odWI9Y2hhdCJ9.byfLiITpaUPm9OLxjn-EN8XcwDT3_j6tdoN2uSdR91k.
[2020-01-09T15:11:42.440Z] Information: Using HubProtocol 'json'.

Достаточное количество последовательных изменений состояния вызывает ошибку 429. Некоторые сообщения об ошибках:

WebSocket connection to 'wss://bpm-drawing.service.signalr.net/client/?hub=chat&id=zer-1PBd58usOkZ2n-3Wuwb3b5d12b1&access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYmYiOjE1Nzg1ODI4OTYsImV4cCI6MTU3ODU4NDY5NiwiaWF0IjoxNTc4NTgyODk2LCJhdWQiOiJodHRwczovL2JwbS1kcmF3aW5nLnNlcnZpY2Uuc2lnbmFsci5uZXQvY2xpZW50Lz9odWI9Y2hhdCJ9.t7HPErziiAbQX1PLONvtF3tSHa4ezcBNgAhb0tgNJYA' failed: Error during WebSocket handshake: Unexpected response code: 429
[2020-01-09T15:14:59.060Z] Error: Failed to start the transport 'WebSockets': Error: There was an error with the transport.
POST https://bpm-drawing.service.signalr.net/client/negotiate?hub=chat&negotiateVersion=1 429
[2020-01-09T15:14:59.143Z] Error: Failed to complete negotiation with the server: Error
[2020-01-09T15:14:59.148Z] Error: Failed to start the connection: Error
Errors.ts:20 Uncaught (in promise) Error
    at new HttpError (Errors.ts:20)
    at XMLHttpRequest.xhr.onload (XhrHttpClient.ts:70)

Я немного расширил код, но этого достаточно, чтобы вызвать ошибку:

import React from "react";
const signalR = require("@microsoft/signalr");

export const App = () => {
  const [message, setMessage] = React.useState("");
  const connection = new signalR.HubConnectionBuilder()
    .withUrl(`/api`)
    .configureLogging(signalR.LogLevel.Information)
    .build();
  connection.onclose(() => console.log("disconnected"));
  connection.start();

  function updateMsg(e) {
    e.preventDefault();
    setMessage(e.target.value);
  }

  return (
    <div>
      <form>
        <input
          type="text"
          placeholder="Type message here..."
          onChange={updateMsg}
        />
      </form>
    </div>
  );
};

export default App;

Сервер npm просто имеет много из

[HPM] POST /api/negotiate?negotiateVersion=1 -> http://localhost:7071

Answer 1

Хорошо, проблема в том, что код внутри приложения запускается каждый раз, когда обновляется состояние, поэтому соединение снова устанавливается. До сих пор не выяснил, как ее решить, но, по крайней мере, я знаю, в чем причина.