Spring Boot と React.js による WebSocket 接続

Question

React.jsocks クライアントを Spring Boot バックエンド Web ソケットに接続しようとしていますが、接続できません。Chrome コンソールに次のようなエラーが表示されます。

Chrome コンソール エラー

Spring Boot 部分にはエラーはありませんが、次のような警告がいくつかあります。

Spring Boot コンソール

なぜ接続できないのですか? 私のreact.js部分は次のようになります:

リーリー

そして私の Spring Boot 構成クラス:

リーリー

ネットワークソケットコントローラーについても同様に、私はこの部分を書きました:

リーリー

ソックスを使用してreact.jsフロントエンドとSpring Bootバックエンドを接続しようとしましたが、接続できません

私の process.env.REACT_APP_ROOT_URL は次のとおりです: http://localhost:1998 および @Value("${blog.app.front}") プライベート文字列 URL。この部分の値は次のとおりです: http://localhost:3000

Answer 1

問題はクライアント側またはサーバー側にある可能性があります。最初のステップは、テスト ツールを使用してサーバーを分離してテストできるようにすることです。コードでは SockJS の STOMP プロトコルを使用しているため、これは簡単ではありません。

SockJS を使用する必要がない場合があります。 STOMP と SockJS の使用を参照してください。したがって、最初のステップは、SockJS の使用を削除し、それが機能するかどうかを確認することです。

次のステップは、STOMP の使用をキャンセルすることです。より簡単な方法は、プレーン テキスト メッセージを使用することです。これを行う場合、wscat などのコマンド ライン ツール、または WebSocketKing などの Chrome ブラウザ プラグインを使用して、サーバーを自分でテストできます。サーバーがテスト ハーネスを使用できるようになると、クライアント コードをテストに使用できるようになります。

私も同様の問題に遭遇し、WebSocket テキスト メッセージとして送信される JSON メッセージを使用して独自のプロトコルを開発することになりました。 WebSocket King を使用してサーバーを分離してテストできます。 Brill Middleware の最後までスクロールすると、WebSocket King の使用例が表示されます。