やりたいこと
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}
回答1件