本記事では、Spring BootでSockJSを利用したWebSocketの実装方法を説明します。 SockJSは、WebSocketが利用できない場合に自動的にフォールバックトランスポートを使用するため、さまざまなブラウザやネットワーク環境での接続性が向上します。

サーバ側の実装

1. 依存関係の追加

pom.xml ファイルに spring-boot-starter-websocket 依存関係を追加します。

pom.xml

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2. WebSocket設定クラスの作成

WebSocketConfig クラスを作成し、SockJSを有効にします。

WebSocketConfig.java

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;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(messageHandler(), "/test")
                .setAllowedOrigins("<-- 自分のドメインを設定 -->") // CORSの設定
                .withSockJS(); // SockJSを有効にする
    }

    @Bean
    public WebSocketHandler messageHandler() {
        return new MessageHandler();
    }
}

3. WebSocketハンドラクラスの作成

TextWebSocketHandlerを継承したMessageHandlerクラスを作り、接続確立時、メッセージ受信時、接続終了時の操作を記述していきます。

MessageHandler.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の接続が終了しました。");
    }
}

クライアント側の実装

1. HTMLファイルの作成

index.html ファイルを作成し、以下のコードを追加します。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SockJS Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.2/sockjs.min.js"></script>
    <script src="sockjs-websocket.js"></script>
</head>
<body>
    <h1>SockJS Example</h1>
    <input type="text" id="message" placeholder="メッセージを入力">
    <button onclick="sendMessage()">送信</button>
    <div id="messages"></div>
</body>
</html>

2. JavaScriptファイルの作成

sockjs-websocket.js ファイルを作成し、以下のコードを追加します。

sockjs-websocket.js

$(function() {
    let socket;
    let messagesElement = $("#messages");

    // WebSocketへの接続
    function connectWebSocket() {
        socket = new SockJS("/test");

        // WebSocket接続確立時の処理
        socket.onopen = function (event) {
            console.log("WebSocket connected.");
        };

        // WebSocketでメッセージ受信時の処理
        socket.onmessage = function (event) {
            let messageElement = $("<div>").text("受信: " + event.data);
            messagesElement.append(messageElement);
        };

        // WebSocket接続終了時の処理
        socket.onclose = function (event) {
            console.log("WebSocket disconnected.");
        };
    }

    // メッセージ送信
    function sendMessage() {
        let messageInput = $("#message");
        let messageText = messageInput.val();
        if (socket && messageText) {
            socket.send(messageText);
            let messageElement = $("<div>").text("送信: " + messageText);
            messagesElement.append(messageElement);
            messageInput.val("");
        }
    }

    // 送信ボタンクリック時のイベント
    $("#sendButton").on("click", sendMessage);

    // ページ読み込み時にWebSocketへ接続
    connectWebSocket();
});

これで、Spring BootでSockJSを使ったWebSocketの実装が完了しました。index.html をブラウザで開き、メッセージを送信して受信ができることを確認してください。SockJSは、WebSocketが利用できない場合に自動的にフォールバックトランスポートを使用するため、さまざまなブラウザやネットワーク環境での接続性が向上します。