var socket; // 名前空間 var CHAT_SOCKET = {}; CHAT_SOCKET.connectSocket = function () { if (IS_ONLINE == 'true') { socket = io(CHAT_SERVER_URL); console.log(socket); setSocketAction(); } else { //オフラインの場合、DBからルーム一覧を表示。 if (CHAT_UTIL.isIOS()) { //TODO IOSの場合 } else if (CHAT_UTIL.isAndroid()) { } } }; /* --------------------------------------------------- * Socket Connect/Disconnectc * --------------------------------------------------- */ function setSocketAction () { socket.on('connect', function() { // socketが接続されたらチャット画面で画面を更新する $('.overlay').removeClass('active undismissable'); // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); // チャットルームに入場する際、sid, loginId, shopName, roomId, roomNameの情報を取得しNodeJsに渡す if (CHAT_UTIL.isIOS()) { webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({}); } else if (CHAT_UTIL.isAndroid()) { android.getLoginParameter(); } CHAT_UI.dismissLoadingIndicator(); }); socket.on('disconnect', function() { console.log('disconnect'); //socketが切断されたら黒画面で画面を更新する $('.overlay').addClass('active undismissable'); //alert('Disconnected from the server'); CHAT_UI.dismissLoadingIndicator(); }); socket.on('connect_error', function() { console.log('connect_error'); CHAT_UI.dismissLoadingIndicator(); }); /* ---------------------------------------------------------------------- * * Chat Room List Tab * * ---------------------------------------------------------------------- */ // Update Room List //TODO APIの連動が終わったら削除予定 /*socket.on('refreshRoomList', function(rooms, activeRoomId = null){ CHAT.globalIsInvite = false; // #36146に対応 let keywordSearchMode = false; if ($('#room-search').val().length > 0) { keywordSearchMode = true; } $('#room_list').html(''); let roomListTitle = getLocalizedString("roomListTitle"); $('.titleRoomName').text(roomListTitle); if (rooms.length === 0) { // #36146に対応 // 検索結果がない場合のメッセージを追加 if (!keywordSearchMode) { let emptyListString = getLocalizedString("roomListEmptyString") $('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`); } else { let emptyListString = getLocalizedString("searchRoomListEmptyString") $('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`); } } // チャットルームの様式を読み込む const template = $('#room-template').html(); rooms.forEach( function(room) { room.profileImagePath = ASSET_PATH + 'images/user-profile.png' if (room.message) { room.message = room.message.toString() } else { room.message = getLocalizedString("noMessages") } let html = Mustache.render(template, { roomName: room.roomName, roomId: room.roomId, profileImage: room.profileImagePath, active: activeRoomId === room.roomId ? 'active_chat' : null, // 現在、入っているルームだとhilight表示 lastMessage: room.message.includes('<img') ? getLocalizedString("image") : (keywordSearchMode ? `${room.message}${getLocalizedString("searchResult")}` : room.message) , time: room.time ? CHAT_UTIL.formatDate(room.time.time).createdAt : '', unreadMsgCnt: room.unreadCnt, userCnt: room.userCnt }); // Click event let obj = $(jQuery.parseHTML(html)).on('click',function(){ if (activeRoomId === room.roomId) { // 既存チャットルームをタッチする場合、チャット画面に遷移 $('#pills-chat-tab').tab('show'); } else { // loadingIndicatorを表示しない CHAT_UI.showLoadingIndicator(); // 新しいチャットルームをタッチする場合、チャットルームの接続処理を実行 socket.emit('joinRoom', room.roomId, room.roomName, function (){ CHAT.saveRoomInfo(room.roomId, room.roomName); $('#messages').html(''); // チャットルーム名を変更する $('.titleRoomName').text(room.roomName).data('roomName', room.roomName); }); } }); // チャットルームリストに追加する $('#room_list').append(obj); }); // #36146に対応 if(rooms.length > 0) { if(!keywordSearchMode) { $(".roomListIcon").show() $('#roomDeleteButton, #arrangeRooms').show() } else { $(".roomListIcon").show() $('#roomDeleteButton, #arrangeRooms').hide() } } else { if(!keywordSearchMode) { $(".roomListIcon").hide() } else { $(".roomListIcon").show() $('#roomDeleteButton, #arrangeRooms').hide() } } $('#createChatRoom').show() // Rotate if(CHAT_UI.isLandscapeMode()) { $(".chat_list").removeClass("col-12").addClass("col-6"); } $("#userSelectionDeleteBtn").hide(); // チャットルームリスト画面に遷移 $('#pills-chatlist-tab').tab('show'); // loadingIndicatorを表示しない CHAT_UI.dismissLoadingIndicator(); });*/ // New Message // #36170 socket.on('newMessage', function(message, roomId, roomName) { let messageTime = CHAT_UTIL.formatDate(message.createdAt); var userMessageTemplate; $.get({ url: "./template/template_user_message.html", async: false } , function(text) { userMessageTemplate = text; }); var myMessageTemplate; $.get({ url: "./template/template_my_message.html", async: false } , function(text) { myMessageTemplate = text; }); var systemMessageTemplate; $.get({ url: "./template/template_system_message.html", async: false } , function(text) { systemMessageTemplate = text; }); let template = userMessageTemplate; if (message.id === socket.id) { // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する template = myMessageTemplate; } message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) try { message.text = decodeURIComponent(message.text) } catch(e) { message.text = message.text } var replacePath = message.text; replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName='); message.text = replacePath; let html = Mustache.render(template, { text: message.text, from: message.from, profileImage: message.profileImagePath, createdAtDay: messageTime.createdAtDay, createdAtTime: messageTime.createdAtTime }); // イメージの場合、img tagを追加する html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html; $('#messages').append(html); // 画像、動画の描画を待ってからスクロール setTimeout(function () { CHAT_UI.scrollToBottom(); }, 300); }); // Notification socket.on('newNotification', function(keyword, event) { var notificationString = getLocalizedString(event, keyword) $('#messageNotification').finish().text(notificationString).delay(500).slideDown().delay(1500).slideUp(); }); // 新しいメッセージを受信する場合の処理 // #36170 // socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){ // let jQueryMessages = $('#messages'); // // スクロールの変化を防ぐため以前画面の高さを保存する // let beforeHeight = jQueryMessages.prop('scrollHeight'); // // メッセージ文字列の生成 // let workVal = ""; // messages.forEach(function(message) { // let template = $('#message-template').html(); // if (message.shopMemberId == shopMemberId) { // template = $('#message-template-me').html(); // } // let messageTime = CHAT_UTIL.formatDate(message.time.time); // // if (users != undefined) { // let user = users.find((user) => user.loginId == message.loginId) // // // userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更 // if (user) { // message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath) // } else { // message.profileImagePath = CHAT.getProfileImgUrl("") // } // } else { // message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) // } // // // #36147 // message.message = message.message.toString(); // var replacePath = message.message; // replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms'); // message.message = replacePath; // let html = Mustache.render(template, { // text: message.message, // from: message.loginId, // profileImage: message.profileImagePath, // createdAtDay: messageTime.createdAtDay, // createdAtTime: messageTime.createdAtTime // }); // html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html; // workVal = html + workVal; // }) // // // メッセージの画面描画 // jQueryMessages.prepend(workVal); // if (beforeHeight !== 0) { // // 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持 // setTimeout(function () { // jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight); // }, 400); // } else { // // 新規に入室の場合は最下部へスクロール // CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom); // // タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得 // if ($(window).height() > jQueryMessages.height()) { // $('#messages').scroll(); // } // } // // // ユーザ削除ボタン表示しない // $("#userSelectionDeleteBtn").hide(); // // CHAT_UI.dismissLoadingIndicator();// add some... // // // チャットに遷移する // $('#pills-chat-tab').tab('show'); // }); // Update User List In Room // サイドバーのユーザーリストアップデート。 /* socket.on('updateUserList', function(users, onlineUsers) { console.log(users); console.log(onlineUsers); if (users.length > 0) { $('#users').removeData(); $('#users').data(users); } else { const data = $('#users').data(); if (data && Object.keys(data).length > 0) { users = Object.keys(data).map(function(key) { return data[key]; }); } } const ul = $('<ul/>', {class: 'list-unstyled components'}); // ユーザーリストを入れる前にユーザー招待ボタンを入れてくれる。 let inviteString = getLocalizedString("inviteUsersButton") ul.append($('<li/>').append(`<a>${inviteString} <i class='fa fa-user-plus'><i/></a>`).on('click', function(event) { $('#dismiss').click(); // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); let isInvite = true; CHAT.globalIsInvite = isInvite; socket.emit('getGroupList', isInvite); })); // ユーザーリストを入れる users.forEach(function(user) { let li = $('<li/>'); let a = $('<a/>').text(user); if (onlineUsers.includes(user)) { // 接続されているユーザにバッジを付ける。 a.append($('<span/>',{class:'badge badge-success'}).text('online')); } li.append(a); ul.append(li); }); $('#users').html(ul); });*/ // Update Group List(Invite) socket.on('refreshGroupList', function(groups, isInvite) { $('#group_list').html(''); const template = $('#group-template').html(); if (groups.length === 0) { $('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>'); } // グループ名と人数を表記する。 groups.forEach(function(group) { let html = Mustache.render(template, { name: group.groupName, info: group.memberCnt + getLocalizedString("people") }); // グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える let obj = $(jQuery.parseHTML(html)).on('click', function() { // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); socket.emit('getUserListInGroup', group.groupId, isInvite); $('#groupName').text(group.groupName); }); $('#group_list').append(obj); }); // Rotate if (CHAT_UI.isLandscapeMode()) { $(".group_list").addClass("col-6").removeClass("col-12"); } // Set Title let memberSelectTitle = getLocalizedString("groupSearch") $('#pills-group-tab').tab('show'); $('#backButton').show(); if (isInvite) { $('.titleRoomName').text(memberSelectTitle); $('#newRoomName, .roomListIcon, .chatRoomIcon').hide(); $('#userSelectionConfirmBtn').show(); $("#userSelectionConfirmBtn").off().on('click', function() { CHAT_UI.setConfirmButtonEvent(isInvite); }); } else { $('.titleRoomName').text(memberSelectTitle); $('.roomListIcon, .chatRoomIcon, #newRoomName').hide(); $('#userSelectionConfirmBtn').show(); $("#userSelectionConfirmBtn").off().on('click', function() { CHAT_UI.setConfirmButtonEvent(isInvite); }); } if (CHAT.globalSelectedUserList.length > 0) { $('#userSelectionLength').text(CHAT.globalSelectedUserList.length); } else { $('#userSelectionLength').text(''); } $('#backButton').off().on('click', function() { // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); if (isInvite) { $('#pills-chat-tab').tab('show'); } else { if (IS_ONLINE == 'true') { android.updateRoomList(); CHAT_UI.refreshRoomList(chatRoomType.DM); CHAT_UI.dismissLoadingIndicator(); } } }); }); // Update User List(Invite) // #36170 socket.on('refreshUserListInGroup', function(users, groupId, isInvite) { $('#user_list').html(''); const template = $('#user-template').html(); // Set Title let memberSelectTitle = getLocalizedString("userSearch") $('.titleRoomName').text(memberSelectTitle); users.forEach( function(user) { // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); user.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath) let html = Mustache.render(template, { id: user.shopMemberId, profileImage: user.profileImagePath, name: user.loginId }); // クリックするとactive クラスを与え、チェック表示を出させる。 let obj = $(jQuery.parseHTML(html)).on('click',function() { if ($(this).find('.userCheckBox.active').length > 0) { // remove CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) { return user.loginId != element.loginId; }); } else { // add CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath}); } $(this).find('.userCheckBox').toggleClass('active'); if (CHAT.globalSelectedUserList.length > 0) { $('#userSelectionLength').text(CHAT.globalSelectedUserList.length); } else { $('#userSelectionLength').text(''); } }); let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) { return selectedUser.loginId == user.loginId; }) if (findObj) { $(obj).find('.userCheckBox').toggleClass('active'); } $('#user_list').append(obj); }) $('.userCheckBox').show(); // Rotate if (CHAT_UI.isLandscapeMode()) { $(".user_list").addClass("col-6").removeClass("col-12"); $(".squareBoxContent span").addClass("landscape_span"); } $('#backButton').off().on('click', function() { // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); socket.emit('getGroupList', isInvite) }); $("#userSelectionConfirmBtn").off().on('click', function() { // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); CHAT_UI.setConfirmButtonEvent(isInvite); }); $('#backButton').show(); $('.roomListIcon, .chatRoomIcon').hide(); $('#userSelectionConfirmBtn').show(); $('.userCheckBox').show(); $('#pills-user-tab').tab('show'); }); /* ---------------------------------------------------------------------- */ /* Show Error Log */ /* ---------------------------------------------------------------------- */ socket.on('showServerError', function(message) { // #36174 // #36215 if (message.includes("SC_FORBIDDEN")) { alert('SC_FORBIDDEN'); return; } if (message == 'server error Ocurred') { message = getLocalizedString("serverErrorOccured"); } else if (message == 'Room not found') { message = getLocalizedString("errorRoomNotFound"); } $("#customAlertTitle").text(message); $("#customAlertOk").text(getLocalizedString("yesTitle")); $('#customAlert').appendTo("body").modal({ backdrop: 'static', keyboard: false }) .on('click', '#customAlertOk', function(e) { }); CHAT_UI.dismissLoadingIndicator(); if (message == "Room not found") { CHAT.saveRoomInfo(); } }); // server's request : user info (retry join) socket.on("retryJoinProcess", () => { var ua = window.navigator.userAgent.toLowerCase(); //if ((ua.indexOf('iphone') > 0 || ua.indexOf('ipad') > 0) && ua.indexOf("safari") == -1) { if (CHAT_UTIL.isIOS()) { // iosでの場合 webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({}); // } else if (ua.indexOf('android') > 0 && ua.indexOf('linux') == -1){ } else if (CHAT_UTIL.isAndroid()) { // androidでの場合 android.getLoginParameter(); } else { CHAT_UI.htmlElementTextInitialize("ko") // webでのsocket connect socket.emit('join', params, function(err) { if (err) { // #36174 $("#customAlertTitle").text(err); $("#customAlertOk").text(getLocalizedString("yesTitle")); $('#customAlert').appendTo("body").modal({ backdrop: 'static', keyboard: false }) .on('click', '#customAlertOk', function(e) { }); } else { if (params.roomName != undefined) { $('.titleRoomName').text(params.roomName).data('roomName', params.roomName); } else { let roomListTitle = getLocalizedString("roomListTitle") $('.titleRoomName').text(roomListTitle) } } // loadingIndicatorを表示しない CHAT_UI.dismissLoadingIndicator(); }); } }) }