メッセージ自動更新

# メッセージ自動更新

# 概要
Spring開発にて、メッセージ機能で自動更新を行う際に、  
WebSocketを使わずに実装する方法

# 目次
1. 処理イメージ
2. 準備
3. それぞれのファイルでの記載内容

# 1.処理イメージ

    ① メッセージはDBに格納されている
    ② メッセージ画面(messageRoom.html)遷移時に、DBに格納されたメッセージを表示(履歴)
    ③ Ajaxにて5秒ごとにイベント発生
    ④ コントローラーでDBから非同期で取得
    ⑤ ④で取得したメッセージをmessageDisplay.htmlに渡す
    ⑥ AjaxにてmessageRoom.htmlのid="newMessage"の箇所に追加していく

# 2.準備
- messageRoom.html
    - メッセージ画面
- messageDisplay.html
    - メッセージ画面の中で、更新後に表示されるメッセージ
        →messageRoom.htmlの中に追加される
- Ajax.js
    - 非同期通信
- messageController.java
    - 非同期通信の実態

# 3.それぞれのファイルでの記載内容
※抜粋

```html:messageRoom.html
<div class="messageBackground" id="ajaxReloadTop">
    <div class="messageTimeLine">
        <div class="messageContents">
            <!-- 
                履歴が表示(参考程度)
                ※message表示箇所
            -->
            <div th:if="${messageLogList.size} &gt; 0">
                <!-- メッセージ数ループ -->
                <div class="messageMemberContents" th:each="message : ${messageLogList} ">
                    <!-- メッセージ左側（相手） (USER_IDがLoginUserIdと一致しないとき、画像とメッセージを左側に表示)-->
                    <div class="messageContentsLeft" th:if=" ${LoginUserId} != ${message.getUSER_ID()}">
                        <!-- アイコン表示(相手) -->
                        <div class="leftIcon">
                            <img th:src="@{'images/' + ${MainImageList.get(0)}}" alt="Ω" width="75px" height="75px">
                        </div>
                        <!-- メッセージ表示(相手) -->
                        <div class="leftContents">
                            <div class="messageLeftBox">
                                <p th:text="${message.getMESSAGE()}" class="leftMessage"></p>
                            </div>
                        </div>
                        <!-- 回り込みを解除（スタイルはcssで充てる）-->
                        <div class="release_float"></div>
                    </div>
                    <div class="messageContentsRight" th:if=" ${LoginUserId} == ${message.getUSER_ID()}">
                        <!-- メッセージ表示(自分) (USER_IDがLoginUserIdと一致するとき、画像とメッセージを右側に表示)-->
                        <div class="rightContents">
                            <div class="messageRightBox">
                                <div th:text="${message.getMESSAGE()}" class="rightMessage"></div>
                            </div>
                        </div>
                        <!-- アイコン表示(自分) -->
                        <div class="rightIcon">
                            <img th:src="@{'images/' + ${MainImageList.get(1)}}" alt="Ω" width="75px" height="75px">
                        </div>
                        <!-- 回り込みを解除（スタイルはcssで充てる）-->
                        <div class="release_float"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--
            本命
            新規メッセージが飛んできた場合ここに表示される
        -->
        <div id="newMessage"></div>
    </div>
</div>

```
※下記の記載のみのファイルを作成する
　htmlタグなどの記載は不要
　上記の
　※message表示箇所
　と同じ記載

```html:messageDisplay.html
<div th:if="${messageLogList.size} &gt; 0">
    <!-- メッセージログの数ループ -->
    <div class="messageMemberContents" th:each="message : ${messageLogList} ">
        <!-- メッセージ左側（相手） (USER_IDがLoginUserIdと一致しないとき、画像とメッセージを左側に表示)-->
        <div class="messageContentsLeft" th:if=" ${LoginUserId} != ${message.getUSER_ID()}">
            <!-- アイコン表示(相手) -->
            <div class="leftIcon">
                <img th:src="@{'images/' + ${MainImageList.get(0)}}" alt="Ω" width="75px" height="75px">
            </div>
            <!-- メッセージ表示(相手) -->
            <div class="leftContents">
                <div class="messageLeftBox">
                    <p th:text="${message.getMESSAGE()}" class="leftMessage"></p>
                </div>
            </div>
            <!-- 回り込みを解除（スタイルはcssで充てる）-->
            <div class="release_float"></div>
        </div>
        <div class="messageContentsRight" th:if=" ${LoginUserId} == ${message.getUSER_ID()}">
            <!-- メッセージ表示(自分) (USER_IDがLoginUserIdと一致するとき、画像とメッセージを右側に表示)-->
            <div class="rightContents">
                <div class="messageRightBox">
                    <div th:text="${message.getMESSAGE()}" class="rightMessage"></div>
                </div>
            </div>
            <!-- アイコン表示(自分) -->
            <div class="rightIcon">
                <img th:src="@{'images/' + ${MainImageList.get(1)}}" alt="Ω" width="75px" height="75px">
            </div>
            <!-- 回り込みを解除（スタイルはcssで充てる）-->
            <div class="release_float"></div>
        </div>
    </div>
</div>
```

```js:Ajax.js
$(document).ready(function () {
    /* messageReloadへPOSTしする */
    function addNewMessage() {
        $.ajax({
            type: "POST",
            url: "/messageReload",
        })
            .done(function (data) {
                /* 新規メッセージを追加したHTMLをID:new_messageに追加していく */
                $("#newMessage").append(data);
            })
    }
    /* 5秒ごとにイベントを発生させる */
    $(function () {
        setInterval(function () {
            addNewMessage();
        }, 5000);
    });
}
```

```java:messageController.java
    // メッセージ自動更新の際に呼び出される
    @PostMapping("/messageReload")
    public String getNewMessage(@ModelAttribute CHATROOM chatRoom, Model model) {

        /* 
            DBから自動更新で表示するメッセージを取得する処理を実装(省略)
        */

        /* 未読のメッセージを渡す */
        model.addAttribute("messageLogList", "hogehoge"));

        /*
        *   その他にも、message.htmlに渡すべきデータもここで渡す(省略)
        */

        /* 新規メッセージ分をreturn */
        return "messageDisplay";
    }

```

# まとめ
　本当に力技になりますが、これによって、WebSocketを使わずにSpringでメッセージ機能を実装する際の機能として、メッセージの自動更新を実装することができる。