Spring BootにWebSocketを導入する
今回はSpring BootにWebSocketを導入し、クライアント側のJavaScriptから送受信してみました。
ブラウザのWebSocketを利用しているのでライブラリは使用していません。
まずはbuild.gradleのdependenciesに以下の依存関係を追加します。
implementation 'org.springframework.boot:spring-boot-starter-websocket'
WebSocketConfig.java
WebSocketのエンドポイントを設定するための設定クラスを作成します。
addHandlerメソッドで、WebSocketエンドポイント（例：/ws）と対応するハンドラークラスを指定します。
setAllowedOrigins("*")で、どのオリジンからも接続を許可しています。特定のオリジンのみ許可したい場合は、ここを変更してください。
package com.example.demo;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");
}
}
MyWebSocketHandler.java
WebSocketの接続を管理するためのハンドラークラスを作成します。
handleTextMessageメソッドで、クライアントから受け取ったメッセージを処理し、返信を行います。
package com.example.demo;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
public class MyWebSocketHandler extends TextWebSocketHandler {
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
// メッセージを受け取った際の処理
String payload = message.getPayload();
System.out.println("Received: " + payload);
// クライアントにメッセージを返す
session.sendMessage(new TextMessage("Hello! You sent: " + payload));
}
}
WebSocket.html
クライアントサイド（HTML + JavaScript）からWebSocketに接続します。
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Client</title>
</head>
<body>
<h2>WebSocket Test</h2>
<button onclick="sendMessage()">Send Message</button>
<p id="response"></p>
<script>
var socket = new WebSocket("ws://localhost:8080/demo/ws");
socket.onopen = function() {
console.log("Connected");
};
socket.onmessage = function(event) {
document.getElementById("response").innerText = "Received: " + event.data;
};
socket.onclose = function() {
console.log("Disconnected");
};
function sendMessage() {
socket.send("Hello, server!");
}
</script>
</body>
</html>下記が実行結果です。ボタンをクリックするとWebSocketで送受信し、受信したメッセージを表示しています。
今回は最低限の実装しかしていませんが、とても簡単にWebSocketで送受信できましたね！