質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1164閲覧

WebSocket通信が失敗する。フロントエンド:typescript(angular)、バックエンド:java(spring-boot)

3955

総合スコア10

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/09/01 14:09

編集2022/09/03 10:12

やりたいこと

angularで作成しているフロントエンドとjava(spring-boot)で作成しているバックエンドでWebSocket通信を行いたいです。

困っていること

websocket通信をフロントから投げると、下記のようなエラーになります。(chromeのデベロッパーツールのコンソールから抜粋してます。)
login.component.ts:20 WebSocket connection to 'ws://localhost:8080/test' failed:

ネットワークタブでは以下のようにstatusが Finishedになります。
イメージ説明

試してみたこと

・websocketのリクエストパスを変えてみる
⇒"ws://localhost:8080/webSocket/test"とか"ws://localhost:80/test"
※wssでもしてみましたが、ローカルでやっているし暗号化とかしていないので、java側は反応しませんでした。

・「npm install -g wscat」でwscatをインストールして通信してみる
⇒成功する。
※angularでも同じurlをリクエストしているのに、、、

何か見落としてがあるのかもしれないので、お気づきの方がいらっしゃいましたら、ご教示いただけると幸いです。m(__)m

実装

javaのプロジェクト構成
イメージ説明
angularのプロジェクト構成
イメージ説明

java

java

1package com.example.demo.webSocket; 2 3import java.io.IOException; 4 5import org.springframework.web.socket.CloseStatus; 6import org.springframework.web.socket.TextMessage; 7import org.springframework.web.socket.WebSocketSession; 8import org.springframework.web.socket.handler.TextWebSocketHandler; 9 10/** 11 * WebSocketのHandler 12 */ 13public class MessageHandler extends TextWebSocketHandler { 14 /** 15 * 接続確立 16 */ 17 @Override 18 public void afterConnectionEstablished(WebSocketSession session) throws Exception { 19 System.out.println("WebSocketの接続が確立しました。"); 20 } 21 /** 22 * メッセージの送受信 23 */ 24 @Override 25 public void handleTextMessage(WebSocketSession session, TextMessage message) { 26 System.out.println("メッセージ受信:" + message.getPayload()); 27 try { 28 TextMessage outputMessage = new TextMessage("メッセージ返信:送信内容=" + message.getPayload()); 29 session.sendMessage(outputMessage); 30 } catch (IOException e) { 31 e.printStackTrace(); 32 } 33 } 34 /** 35 * 接続終了 36 */ 37 @Override 38 public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { 39 System.out.println("WebSocketの接続が終了しました。"); 40 } 41}

java

1package com.example.demo.webSocket; 2import org.springframework.context.annotation.Bean; 3import org.springframework.context.annotation.Configuration; 4import org.springframework.web.socket.WebSocketHandler; 5import org.springframework.web.socket.config.annotation.EnableWebSocket; 6import org.springframework.web.socket.config.annotation.WebSocketConfigurer; 7import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry; 8 9/** 10 * WebSocketの管理 11 */ 12 13@Configuration 14@EnableWebSocket 15public class WebSocketConfig implements WebSocketConfigurer { 16 /** 17 * WebSocketの登録 18 */ 19 @Override 20 public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { 21 registry.addHandler(messageHandler(),"/test"); 22 } 23 /** 24 * WebSocketHandler(コントロールするクラス)を定義 25 * @return WebSocketHandler 26 */ 27 @Bean 28 public WebSocketHandler messageHandler() { 29 return new MessageHandler(); 30 } 31}

angular

typescript

1import { Component, OnInit } from '@angular/core'; 2import { LoginModel } from '../loginModel'; 3import { Router } from '@angular/router' 4import { environment } from './../../environments/environment'; 5 6@Component({ 7 selector: 'app-login', 8 templateUrl: './login.component.html', 9 styleUrls: ['./login.component.css'] 10}) 11export class LoginComponent implements OnInit { 12 13 model = new LoginModel('', ''); 14 idVaridFlg = false; 15 passwordVaridFlg = false; 16 17 constructor(private router: Router) { } 18 19 ngOnInit(): void { 20 var ws = new WebSocket("ws://localhost:8080/test"); 21 } 22}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jimbe

2022/09/01 17:47

まずは問題がクライアントなのかサーバなのかを切り分けてください。 (とりあえず wscat とやらでサーバは動作していることが確認されているのであれば、 java や springboot のタグは外しても良いのでは。)
3955

2022/09/01 23:32

返信ありがとうございます! 確かに、サーバ側は問題なさそうです。 ご指摘の通り、javaとspringbootのタグは外します。
guest

回答1

0

自己解決

以下を付け加えました。
setAllowedOrigins("*");
おそらく、リクエスト元(angular:4200ポート)とリクエスト先(java:8080ポート)でオリジンが異なるためだったのかなと、、
デフォルトはリクエスト元も8080ポートでないとサーバが許可してくれないのかと思います。

java

1package com.example.demo.webSocket; 2 3import org.springframework.context.annotation.Bean; 4import org.springframework.context.annotation.Configuration; 5import org.springframework.web.socket.WebSocketHandler; 6import org.springframework.web.socket.config.annotation.EnableWebSocket; 7import org.springframework.web.socket.config.annotation.WebSocketConfigurer; 8import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry; 9/** 10 * WebSocketの管理 11 */ 12@Configuration 13@EnableWebSocket 14public class WebSocketConfig implements WebSocketConfigurer { 15 /** 16 * WebSocketの登録 17 */ 18 @Override 19 public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { 20 registry.addHandler(messageHandler(), "/test").setAllowedOrigins("*"); 21 } 22 /** 23 * WebSocketHandler(コントロールするクラス)を定義 24 * @return WebSocketHandler 25 */ 26 @Bean 27 public WebSocketHandler messageHandler() { 28 return new MessageHandler(); 29 } 30}

投稿2022/09/03 01:12

3955

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問