性能改善メッセージ関連

fb3545c9 · Lee Munkyeong · 2c37e8b7 · fb3545c9 · fb3545c9 · fb3545c9
Commit fb3545c9 authored Jun 13, 2021 by Lee Munkyeong
9 changed files
--- a/public_new/js/chat-db.js
+++ b/public_new/js/chat-db.js
@@ -49,6 +49,14 @@ CHAT_DB.getMessages = function (roomId) {
  }
 };
+CHAT_DB.getMessagesWithMessageId = function (messageId) {
+  if (CHAT_UTIL.isIOS()) {
+    //TODO メッセージ追加呼出。
+  } else if (CHAT_UTIL.isAndroid()) {
+    return JSON.parse(android.getMessageListFromMessageId(messageId));
+  }
+};
 CHAT_DB.getFavoriteUsersNotInRoom = function () {
  if (CHAT_UTIL.isIOS()) {
    return JSON.parse(

--- a/public_new/js/chat-room.js
+++ b/public_new/js/chat-room.js
 var lastscrollvalue;
 window.onscroll = function () {
  beforeScroll = window.scrollY;
+  var beforeHeight = $(".room_container").height();
+  messageCount = $(".chat_message").length;
+  if ($(this).scrollTop() === 0 && messageCount >= PagingSize.MESAGE) {
+    if (!$("#chatLoader").is(":visible")) {
+      let loader = $(
+        '<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
+      );
+      $("#messages").prepend(loader);
+      var messageId = $($(".chat_message").get(0)).data("messageid");
+      var messages;
+      if (typeof android != "undefined") {
+        if (IS_ONLINE == "true") {
+          android.updatePreMessage(messageId);
+        }
+      } else {
+        //TODO 追加メッセージUpdate、get
+      }
+      messages = CHAT_DB.getMessagesWithMessageId(messageId);
+      CHAT_UI.prependMessage(messages);
+      loader.remove();
+      var afterHeight = $(".room_container").height();
+      window.scroll(0, afterHeight - beforeHeight);
+    }
+  }
 };
 $("#roomNameChangeBtn").click(function () {

--- a/public_new/js/chat-ui.js
+++ b/public_new/js/chat-ui.js
@@ -1059,19 +1059,8 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
  let jQueryMessages = $("#messages");
  // スクロールの変化を防ぐため以前画面の高さを保存する
  let beforeHeight = jQueryMessages.prop("scrollHeight");
-  // メッセージ文字列の生成
-  let workVal = "";
-  var userTemplate = getTemplate(TemplateURL.USER_LIST);
-  var userMessageTemplate = getTemplate(TemplateURL.USER_MESSAGE);
+  var userTemplate = getTemplate(TemplateURL.USER_LIST);
-  var myMessageTemplate = getTemplate(TemplateURL.MY_MESSAGE);
-  var systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
-  var openCollaborationMessageTemplate = getTemplate(
-    TemplateURL.OPEN_COLLABORATION_MESSAGE
-  );
  var topUserListTemplate = getTemplate(TemplateURL.CHATROOM_USER_LIST);
@@ -1094,6 +1083,33 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
  let filterObj = jQuery.parseHTML(filterHtml);
  $("#filter").append(filterObj);
+  CHAT_UI.prependMessage(messages);
+  CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
+  CHAT_UI.waitForLoadingVideo(jQueryMessages, CHAT_UI.scrollToBottom);
+  // ユーザ削除ボタン表示しない
+  $("#userSelectionDeleteBtn").hide();
+};
+CHAT_UI.prependMessage = function(messages) {
+  var now = new Date();
+  let jQueryMessages = $("#messages");
+  // スクロールの変化を防ぐため以前画面の高さを保存する
+  let beforeHeight = jQueryMessages.prop("scrollHeight");
+  // メッセージ文字列の生成
+  let workVal = "";
+  var userTemplate = getTemplate(TemplateURL.USER_LIST);
+  var userMessageTemplate = getTemplate(TemplateURL.USER_MESSAGE);
+  var myMessageTemplate = getTemplate(TemplateURL.MY_MESSAGE);
+  var systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
+  var openCollaborationMessageTemplate = getTemplate(
+    TemplateURL.OPEN_COLLABORATION_MESSAGE
+  );
  var checkBeforeDate = "";
  var beforeDate = "";
  messages.forEach(function (message) {
@@ -1175,6 +1191,7 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
        user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
      });
      let html = Mustache.render(template, {
+        messageId: message.messageId,
        roomName: roomName,
        userCount: userInCollaboration.length,
        userList:
@@ -1203,6 +1220,7 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
      let html = Mustache.render(template, {
        text: message.message,
        from: message.loginId,
+        messageId: message.messageId,
        shopMemberId: message.shopMemberId,
        profileImage: message.profileUrl,
        createdAtDay: messageTime.createdAtDay,
@@ -1223,11 +1241,7 @@ CHAT_UI.loadMessages = function (roomId, roomName) {
  });
  // メッセージの画面描画
  jQueryMessages.prepend(workVal);
-  CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
+}
-  CHAT_UI.waitForLoadingVideo(jQueryMessages, CHAT_UI.scrollToBottom);
-  // ユーザ削除ボタン表示しない
-  $("#userSelectionDeleteBtn").hide();
-};
 CHAT_UI.roomDisplayOff = function () {
  if (typeof android != "undefined") {

--- a/public_new/js/chat-websocket-message.js
+++ b/public_new/js/chat-websocket-message.js
@@ -105,6 +105,7 @@ var renderCollaborationMessage = function (
  let messageTime = CHAT_UTIL.formatDate(createdAt);
  return Mustache.render(template, {
    roomName: roomName,
+    messageId: 0,
    userCount: 1,
    userList: userList,
    insertDate: insertDate,
@@ -146,6 +147,7 @@ var renderTextMessage = function (
  let dataInsertedTemplate = Mustache.render(template, {
    text: text,
    from: from,
+    messageId: 0,
    profileImage: profileImagePath,
    shopMemberId: userID,
    createdAtDay: messageTime.createdAtDay,

--- a/public_new/js/constant.js
+++ b/public_new/js/constant.js
@@ -54,6 +54,10 @@ const HostRequestFlag = {
  DOING: 1,
 };
+const PagingSize = {
+  MESAGE: 20
+};
 const messageSeperator = "<::split>";
 const DATA_MESSAGE_SCHEME = "::NOT_MESSAGE";
 const FINISH_ALL_COLLABORATION_SIGNAL = "::ALL_COLLABORATION_END";

--- a/public_new/template/template_close_collaboration_message.html
+++ b/public_new/template/template_close_collaboration_message.html
 <!-- 通話 -->
-<div class="collabo_area_container">
+<div class="collabo_area_container chat_message" data-messageid="{{messageId}}">
  <!-- 時刻 -->
  <div class="collabo_date text-right">
    <span>12:23 PM</span>

--- a/public_new/template/template_my_message.html
+++ b/public_new/template/template_my_message.html
-<div class="my_messages">
+<div class="my_messages chat_message" data-messageid="{{messageId}}">
 <div class="room_right">
  <div class="text">{{text}}</div>
  {{#isToday}}

--- a/public_new/template/template_open_collaboration_message.html
+++ b/public_new/template/template_open_collaboration_message.html
 <!-- 通話 -->
-<div class="collabo_area_container">
+<div class="collabo_area_container chat_message" data-messageid="{{messageId}}">
  <!-- 時刻 -->
  <div class="collabo_date text-right">
    {{#isToday}}

--- a/public_new/template/template_user_message.html
+++ b/public_new/template/template_user_message.html
-<div class="room_left">
+<div class="room_left chat_message" data-messageid="{{messageId}}">
  <figure>
-    <a href="#" data-toggle="modal" data-target="#profileModal1">
+    <a href="#" data-toggle="modal" data-target="#profileModal1">c
      <img src="{{profileImage}}" onError="this.src='./img/noImage.png'" onclick="CHAT_UI.makeNameCard({{shopMemberId}})">
    </a>
  </figure>