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