Spring 4.3 WebSocket関連の主な変更点(+簡易アプリ作成！！)

今回は、Spring Framework 4.3の変更点紹介シリーズの第6回で、WebSocket関連の変更点を紹介します。

# シリーズ

* 第１回：[Spring 4.3 DIコンテナ関連の主な変更点](http://qiita.com/kazuki43zoo/items/172d132ff8f4ba098888)
* 第２回：[Spring 4.3 データアクセス関連の主な変更点](http://qiita.com/kazuki43zoo/items/bc036b433444f5c33dc4)
* 第３回：[Spring 4.3 キャッシュ関連の主な変更点](http://qiita.com/kazuki43zoo/items/43cea4b36822b58c0562)
* 第４回：[Spring 4.3 JMS関連の主な変更点](http://qiita.com/kazuki43zoo/items/f0142ebe76dbe873bd5d)
* 第５回：[Spring 4.3 Web関連の主な変更点](http://qiita.com/kazuki43zoo/items/53d2ca25c174ff618331)
* 第７回(最終回)：[Spring 4.3 テスト関連の主な変更点](http://qiita.com/kazuki43zoo/items/6b6ecafd8e69a54e4803)

# 動作検証環境

* Spring Framework 4.3.0.RELEASE
* Spring Boot 1.4.0.BUILD-SNAPSHOT (2016/6/11時点)

# WebSocket Messaging Improvements

今回は、WebSocket関連の主な変更点をみていきます。公式リファレンスを見る限りでは、機能追加はないようです。

| No | WebSocket関連の主な変更点 |
| --- | --- |
| 1 | `@SendTo`と`@SendToUser`をクラスレベルに付与することができるようになります。 |


# まず、WebSocketアプリを作ってみようぜ :+1: 

WebSocket関連の変更点は少ないので、WebSocketを使った簡単なアプリを作成した後に、今回の変更点を紹介したいと思います。題材は、Spring Guidesで紹介されている「[Using WebSocket to build an interactive web application](https://spring.io/guides/gs/messaging-stomp-websocket/)」をベースに少しだけアレンジを加えています。

## 開発プロジェクトを作成する

[SPRING INITIALIZR](https://start.spring.io/)にて、Dependenciesに「WebSocket」を選択してプロジェクトをダウンロードしてください。ダウンロードしたZipファイルに任意のディレクトリに解凍し、`pom.xml`に`spring-boot-starter-websocket`が依存ライブラリに追加されていることを確認します。追加されていない場合は追加してください。

```xml:pom.xml
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```

## モデルを作る

### クライアント >>> サーバー間のモデル

```json:形式
{"name":"xxxx"}
```
```java
package com.example.websocket;

public class Message {
    private String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}
```

### サーバー >>> クライアント間のモデル

```json:形式
{"content":"Hello, xxxx!"}
```
```java
package com.example.websocket;

public class Greeting {
    private String content;
    public Greeting(String content) {
        this.content = content;
    }
    public String getContent() {
        return content;
    }
}
```

## `@Controller`を作る


```java
package com.example.websocket;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

import java.util.concurrent.TimeUnit;

@Controller
public class GreetingController {

    @MessageMapping("/hello") // エンドポイントの指定
    @SendTo("/topic/greetings") // メッセージの宛先を指定
    public Greeting greeting(Message message) {
        TimeUnit.SECONDS.sleep(3);
        return new Greeting("Hello, " + message.getName() + "!");
    }

}
```

## WebSocket機能のコンフィギュレーションを行う

```java
package com.example.websocket;

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@EnableWebSocketMessageBroker // WebSocketのメッセージブローカーのBean定義を有効化する
@Configuration
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { // AbstractWebSocketMessageBrokerConfigurerを継承しWebSocket関連のBean定義をカスタマイズする

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/hello").withSockJS(); // WebSocketのエンドポイント (接続時に指定するエンドポイント)を指定
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.setApplicationDestinationPrefixes("/app"); // アプリケーション(Controller)でハンドリングするエンドポイントのプレフィックス
        registry.enableSimpleBroker("/topic", "/queue"); // Topic(Pub-Sub)とQueue(P2P)を有効化 >>> メッセージブローカーがハンドリングする
    }

}
```

ざっくり図で表すと以下のようなイメージになります。

![spr43-websocket-stomp.png](https://qiita-image-store.s3.amazonaws.com/0/117313/f15ca8e9-29fe-93a3-aa9b-ca3ae4f3750a.png)

## クライアント(HTML)を作る

```html:src/main/resources/static/index.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello WebSocket</title>
    <script src="/webjars/sockjs-client/1.0.2/sockjs.js"></script>
    <script src="/webjars/stomp-websocket/2.3.3/stomp.js"></script>
    <script type="text/javascript">
        var stompClient = null;

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('response').innerHTML = '';
        }

        function connect() {
            var socket = new SockJS('/hello'); // WebSocketに接続
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                setConnected(true);
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/greetings', function (greeting) { // 挨拶の応答(/topic/greetings)を購読する
                    showGreeting(JSON.parse(greeting.body).content);
                });
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }

        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("/app/hello", {}, JSON.stringify({'name': name})); // メッセージを送信
        }

        function showGreeting(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }
    </script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
        <label>What is your name?</label><input type="text" id="name"/>
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>
</div>
</body>
</html>
```

sockjsとstompのjsをインストールする(webjarを利用)。

```xml:pom.xml
<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>sockjs-client</artifactId>
	<version>1.0.2</version>
</dependency>

<dependency>
	<groupId>org.webjars</groupId>
	<artifactId>stomp-websocket</artifactId>
	<version>2.3.3</version>
</dependency>
```

## Spring Bootを起動する

```bash
$ ./mvnw spring-boot:run
```

## ブラウザでアクセスする

ブラウザ経由で http://localhost:8080/ にアクセスします。

![spr43-websocket-index.png](https://qiita-image-store.s3.amazonaws.com/0/117313/6211bc34-07e4-2e62-ed20-21c615d04260.png)

「Connect」ボタンを押下して、WebSocketに接続します。

![spr43-websocket-connect.png](https://qiita-image-store.s3.amazonaws.com/0/117313/c1958b91-71d0-640c-169f-688098a1c1e3.png)

名前を入力し「Send」ボタンを押下して、WebSocket経由でController(`/app/hello`)を呼び出します。約3秒後に「 Hello, 名前!」が表示されます。

![spr43-websocket-send.png](https://qiita-image-store.s3.amazonaws.com/0/117313/8ba65a28-a27e-a8be-d8d9-a49cf7b49154.png)

## 例外ハンドリングを実装してみよう

Controller内でエラーが発生したら、送信者だけにエラーメッセージを通知してみましょう。

```json:形式
{"message":"System error occurred."}
```
```java
package com.example.websocket;

public class MessagingError {
    private String message;
    public String getMessage() {
        return message;
    }
    public void setMessage(String message) {
        this.message = message;
    }
}
```

```java
@Controller
public class GreetingController {
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(Message message) throws Exception {
        if ("error".equals(message.getName())) { // 暫定的に例外を発生させるコードを埋め込む
            throw new NullPointerException("System error occurred.");
        }
        TimeUnit.SECONDS.sleep(3);
        return new Greeting("Hello, " + message.getName() + "!");
    }

    // 例外ハンドリング用のメソッドを追加する
    @MessageExceptionHandler
    @SendToUser("/queue/errors") // 送信者のみを宛先にする
    public MessagingError handleException(Throwable exception) {
        MessagingError error = new MessagingError();
        error.setMessage(exception.getMessage());
        return error;
    }

}
```

```js:src/main/resources/static/index.html
function connect() {
    var socket = new SockJS('/hello');
    stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
        setConnected(true);
        console.log('Connected: ' + frame);
        stompClient.subscribe('/topic/greetings', function (greeting) {
            showGreeting(JSON.parse(greeting.body).content);
        });
        stompClient.subscribe('/user/queue/errors', function (error) { // エラー通知用のQueue(/user/queue/errors)を購読
            alert(JSON.parse(error.body).message);
        });
    });
}
```

名前に「error」を入力して「Send」ボタンを押下すると、警告ダイアログが表示されます。

<img width="727" alt="spr43-websocket-error.png" src="https://qiita-image-store.s3.amazonaws.com/0/117313/55467822-2d0d-0e08-9f77-0242fbc27d59.png">

細かい説明は省きましたが、こんな感じでWebSokcetが利用できます！！ 簡単ですね :smile: 
ではでは、ここからはSpring 4.3の変更点を紹介していきます。

# `@SendTo`と`@SendToUser`をクラスレベルに付与することができる :+1: 

Spring 4.3から、`@SendTo`と`@SendToUser`をクラスレベルに付与することで、応答メッセージの宛先を各メソッドで共有することができます。

## `@SendTo`

```java
@SendTo("/topic/greetings") // クラスレベルに指定して、応答先を各メソッドで共有！！
@Controller
public class GreetingController {
    @MessageMapping("/hello")
    public Greeting greeting(Message message) throws Exception {
        TimeUnit.SECONDS.sleep(3);
        return new Greeting("Hello, " + message.getName() + "!");
    }
    // ...
}
```

## `@SendToUser`

`@SendToUser`は送信者のみにメッセージを送信することができるため、エラー応答時に使われることが多い。ここでは、共通の例外ハンドラーを作成し、エラー通知の宛先を各メソッドで共有しています。

```java
package com.example.websocket;

import org.springframework.messaging.handler.annotation.MessageExceptionHandler;
import org.springframework.messaging.simp.annotation.SendToUser;
import org.springframework.web.bind.annotation.ControllerAdvice;

@SendToUser("/queue/errors") // クラスレベルに指定して、応答先を各メソッドで共有！！
@ControllerAdvice
public class MessagingGlobalExceptionHandler {

    @MessageExceptionHandler
    public MessagingError handleException(Throwable exception) {
        MessagingError error = new MessagingError();
        error.setMessage(exception.getMessage());
        return error;
    }

    // ...

}
```

# まとめ

今回は、WebSocket関連の主な変更点を紹介しましたが、大きな変更はないようですね。次回は最終回で、「テスト関連の主な変更点」を紹介する予定です。

# 参考サイト

* http://docs.spring.io/spring/docs/4.3.0.RELEASE/spring-framework-reference/htmlsingle/
* https://spring.io/guides/gs/messaging-stomp-websocket/
* http://spring-boot-camp.readthedocs.io/ja/latest/06-STOMP.html