メッセージ自動更新

概要

Spring開発にて、メッセージ機能で自動更新を行う際に、

WebSocketを使わずに実装する方法

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.それぞれのファイルでの記載内容

※抜粋

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表示箇所
　と同じ記載

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>

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);
    });
}

messageController.java

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

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

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

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

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

まとめ

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

メッセージ自動更新

メッセージ自動更新

概要

目次

1.処理イメージ

2.準備

3.それぞれのファイルでの記載内容

まとめ