React.js + Spring Boot その３

こんにちは、前回に続きReact.js + Spring Bootを学習します。前回、ページング処理、データ登録、データ削除まで実装しました。今回はデータ更新、WebSocketを見ていきます。

前回ブログ

参考サイト：spring.io

データ更新

Employeeのフィールドにversionを追加します。更新すると+1され、更新対象が他による更新がない確認を行うことができます。

loadFromServer()を書き換えます。

1つ目のthen()は、linksが追加されています。2つ目のthen()はUpdateボタンを押したときにデータ取得になります。3つ目のthen()は説明を読んだのですがよく分かりません。GETで取得したデータをマージするとのこと。

更新用のダイアログをapp.jsに追加します。ほとんどCreateDialogと同じです。

onUpdate()で更新処理を行います。APIのPUTを呼び出しています。大事なところは、If-MatchでEtagを比較しているところでしょうか。一致した場合だけ更新して、一致しない場合412のレスポンスを返します。

あとはEmployeeにUpdateDialogを呼び出すボタンを付けます。

コマンドプロンプトから「mvnw.cmd spring-boot:run」を実行して「http://localhost:8080」にアクセスします。

UpdateDialogで「engineer」を「software engineer」に更新します。

一覧が自動的に更新されます。

2つタブを開いて両方ダイアログを開いた状態で片方を更新して、もう一方を更新しようとすると412のレスポンスが返ってくるのも確認できます。

WebSocket

サーバー側の設定から行います。pox.xmlにspring-boot-starter-websocketを追加します。WebSocketの設定は以下のようにします。

イベントハンドラーを実装します。それぞれ、登録、削除、更新のメッセージを送るメソッドを実装します。

React.js側はapp.jsに呼び出しを追加します。

websocket-listener.jsではWebSocketを設定します。サーバー側のエンドポイントにあわせてください。

app.jsのcomponetDidMount()にWebSocketのイベントを登録します。

callback関数はそれぞれ以下。登録時は最後のページに遷移する。削除、更新時は現在のページを更新する。

sockjs-clientとstompjsは追加でインストールしてあげる必要があります。package.jsonに追加してください。

ただこのままではビルドでこけました。websocket-listener.jsを下記のように変更しました。（4-5行目）

コマンドプロンプトから「mvnw.cmd spring-boot:run」を実行して「http://localhost:8080」にアクセスします。

2つタブを開いて片方で更新した後、もう片方の一覧も更新されています。

ダイアログを開いていても同様です。

おわりに

React.js + Spring Boot で簡単なアプリケーションを実装し、データ更新、排他制御、WebSocketによる同期処理の確認を行いました。

React.jsを使用するとコードがシンプルになるのが良いですね。jQueryでDOM操作をゴリゴリ書いていたのと逆です。

コンポーネントベースの記述で各コンポーネントが独立するので保守しやすいです。

以上、React.js + Spring Bootは今回で終りです。