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

Question

やりたいこと

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

package com.example.demo.webSocket;

import java.io.IOException;

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

/**
 * WebSocketのHandler
 */
public class MessageHandler extends TextWebSocketHandler {
    /**
     * 接続確立
     */
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("WebSocketの接続が確立しました。");
    }
    /**
     * メッセージの送受信
     */
    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) {
        System.out.println("メッセージ受信:" + message.getPayload());
        try {
            TextMessage outputMessage = new TextMessage("メッセージ返信：送信内容=" + message.getPayload());
            session.sendMessage(outputMessage);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    /**
     * 接続終了
     */
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("WebSocketの接続が終了しました。");
    }
}

package com.example.demo.webSocket;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

/**
 * WebSocketの管理
 */

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
  /**
   * WebSocketの登録
   */
  @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(messageHandler(),"/test");
    }
  /**
   * WebSocketHandler（コントロールするクラス）を定義
   * @return WebSocketHandler
   */
    @Bean
    public WebSocketHandler messageHandler() {
        return new MessageHandler();
    }
}

angular

import { Component, OnInit } from '@angular/core';
import { LoginModel } from '../loginModel';
import { Router } from '@angular/router'
import { environment } from './../../environments/environment';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  model = new LoginModel('', '');
  idVaridFlg = false;
  passwordVaridFlg = false;

  constructor(private router: Router) { }

  ngOnInit(): void {
    var ws = new WebSocket("ws://localhost:8080/test");
  }
}

Comments

[jimbe]

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

[3955]

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

Answer 1

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

package com.example.demo.webSocket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
/**
 * WebSocketの管理
 */
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
  /**
   * WebSocketの登録
   */
  @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(messageHandler(), "/test").setAllowedOrigins("*");
    }
  /**
   * WebSocketHandler（コントロールするクラス）を定義
   * @return WebSocketHandler
   */
    @Bean
    public WebSocketHandler messageHandler() {
        return new MessageHandler();
    }
}