var socket = io(CHAT_SERVER_URL); /* --------------------------------------------------- * Socket Connect/Disconnect * --------------------------------------------------- */ socket.on('connect', function (){ // socketが接続されたらチャット画面で画面を更新する jQuery('.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(); } }); socket.on('disconnect', function (){ //socketが切断されたら黒画面で画面を更新する jQuery('.overlay').addClass('active undismissable'); //alert('Disconnected from the server'); CHAT_UI.dismissLoadingIndicator(); }); socket.on('connect_error', function (){ // jQuery('.overlay').addClass('active undismissable'); // #36174 // $("#customAlertTitle").text(getLocalizedString("errorConnect")); // $("#customAlertOk").text(getLocalizedString("yesTitle")); // // $('#customAlert').appendTo("body").modal({ // backdrop: 'static', // keyboard: false // }) // .on('click', '#customAlertOk', function(e) { // }); CHAT_UI.dismissLoadingIndicator(); }); /* ---------------------------------------------------------------------- * * Chat Room List Tab * * ---------------------------------------------------------------------- */ // Update Room List socket.on('refreshRoomList', function(rooms, activeRoomId = null){ CHAT.globalIsInvite = false; // チャットルームリストを削除する jQuery('#room_list').html(''); // #36146に対応 let roomListTitle = getLocalizedString("roomListTitle") $('.titleRoomName').text(roomListTitle) let keywordSearchMode = false; if(jQuery('#roomKeyword').val().length > 0) { keywordSearchMode = true; } if (rooms.length === 0) { // #36146に対応 // 検索結果がない場合のメッセージを追加 if (!keywordSearchMode) { let emptyListString = getLocalizedString("roomListEmptyString") jQuery('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`); } else { let emptyListString = getLocalizedString("searchRoomListEmptyString") jQuery('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`); } } // チャットルームの様式を読み込む const template = jQuery('#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(jQuery.parseHTML(html)).on('click',function(){ if (activeRoomId === room.roomId) { // 既存チャットルームをタッチする場合、チャット画面に遷移 jQuery('#pills-chat-tab').tab('show'); } else { // loadingIndicatorを表示しない CHAT_UI.showLoadingIndicator(); // 新しいチャットルームをタッチする場合、チャットルームの接続処理を実行 socket.emit('joinRoom', room.roomId, room.roomName, function (){ CHAT.saveRoomInfo(room.roomId, room.roomName); jQuery('#messages').html(''); // チャットルーム名を変更する jQuery('.titleRoomName').text(room.roomName).data('roomName', room.roomName); }); } }); // チャットルームリストに追加する jQuery('#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() } } jQuery('#createChatRoom').show() // Rotate if(CHAT_UI.isLandscapeMode()) { $(".chat_list").removeClass("col-12").addClass("col-6"); } jQuery("#userSelectionDeleteBtn").hide(); // チャットルームリスト画面に遷移 jQuery('#pills-chatlist-tab').tab('show'); // loadingIndicatorを表示しない CHAT_UI.dismissLoadingIndicator(); }); // New Message // #36170 socket.on('newMessage', function (message, roomId, roomName){ let template = jQuery('#message-template').html(); if (message.id === socket.id) { // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する template = jQuery('#message-template-me').html(); } let messageTime = CHAT_UTIL.formatDate(message.createdAt); message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) try { message.text = decodeURIComponent(message.text) } catch(e) { message.text = message.text } 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; jQuery('#messages').append(html); // 画像、動画の描画を待ってからスクロール setTimeout(function () { CHAT_UI.scrollToBottom(); }, 1500); }); // Notification socket.on('newNotification', function(keyword, event){ var notificationString = getLocalizedString(event, keyword) jQuery('#messageNotification').finish().text(notificationString).delay(500).slideDown().delay(1500).slideUp(); }); // 新しいメッセージを受信する場合の処理 // #36170 socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){ let jQueryMessages = jQuery('#messages'); // スクロールの変化を防ぐため以前画面の高さを保存する let beforeHeight = jQueryMessages.prop('scrollHeight'); // メッセージ文字列の生成 let workVal = ""; messages.forEach(function(message) { let template = jQuery('#message-template').html(); if (message.shopMemberId == shopMemberId) { template = jQuery('#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(); 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()) { jQuery('#messages').scroll(); } } // ユーザ削除ボタン表示しない jQuery("#userSelectionDeleteBtn").hide(); CHAT_UI.dismissLoadingIndicator();// add some... // チャットに遷移する jQuery('#pills-chat-tab').tab('show'); }); // Update User List In Room // サイドバーのユーザーリストアップデート。 socket.on('updateUserList', function(users, onlineUsers){ if (users.length > 0) { jQuery('#users').removeData(); jQuery('#users').data(users); } else { const data = jQuery('#users').data(); if(data && Object.keys(data).length > 0){ users = Object.keys(data).map(function(key) { return data[key]; }); } } const ul = jQuery('<ul/>', {class: 'list-unstyled components'}); // ユーザーリストを入れる前にユーザー招待ボタンを入れてくれる。 let inviteString = getLocalizedString("inviteUsersButton") ul.append(jQuery('<li/>').append(`<a>${inviteString} <i class='fa fa-user-plus'><i/></a>`).on('click', function(event){ jQuery('#dismiss').click(); // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); let isInvite = true; CHAT.globalIsInvite = isInvite; socket.emit('getGroupList', isInvite); })); // ユーザーリストを入れる users.forEach(function (user){ let li = jQuery('<li/>'); let a = jQuery('<a/>').text(user); if (onlineUsers.includes(user)) { // 接続されているユーザにバッジを付ける。 a.append(jQuery('<span/>',{class:'badge badge-success'}).text('online')); } li.append(a); ul.append(li); }); jQuery('#users').html(ul); }); // Update Group List(Invite) socket.on('refreshGroupList', function(groups, isInvite){ jQuery('#group_list').html(''); const template = jQuery('#group-template').html(); if (groups.length === 0) { jQuery('#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(jQuery.parseHTML(html)).on('click',function(){ // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); socket.emit('getUserListInGroup', group.groupId, isInvite); jQuery('#groupName').text(group.groupName); }); jQuery('#group_list').append(obj); }); // Rotate if(CHAT_UI.isLandscapeMode()) { jQuery(".group_list").addClass("col-6").removeClass("col-12"); } // Set Title let memberSelectTitle = getLocalizedString("inviteUsersTitle") jQuery('#pills-group-tab').tab('show'); jQuery('#backButton').show(); if (isInvite) { jQuery('.titleRoomName').text(memberSelectTitle); jQuery('#newRoomName, .roomListIcon, .chatRoomIcon').hide(); jQuery('#userSelectionConfirmBtn').show(); jQuery("#userSelectionConfirmBtn").off().on('click', function(){ CHAT_UI.setConfirmButtonEvent(isInvite); }); } else { jQuery('.titleRoomName').text(memberSelectTitle); jQuery('.roomListIcon, .chatRoomIcon, #newRoomName').hide(); jQuery('#userSelectionConfirmBtn').show(); jQuery("#userSelectionConfirmBtn").off().on('click', function(){ CHAT_UI.setConfirmButtonEvent(isInvite); }); } if (CHAT.globalSelectedUserList.length > 0) { jQuery('#userSelectionLength').text(CHAT.globalSelectedUserList.length); } else { jQuery('#userSelectionLength').text(''); } jQuery('#backButton').off().on('click', function() { // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); if (isInvite) { jQuery('#pills-chat-tab').tab('show'); } else { socket.emit('getRoomList'); } }); }); // Update User List(Invite) // #36170 socket.on('refreshUserListInGroup', function(users, groupId, isInvite){ jQuery('#user_list').html(''); const template = jQuery('#user-template').html(); 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(jQuery.parseHTML(html)).on('click',function(){ if (jQuery(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}); } jQuery(this).find('.userCheckBox').toggleClass('active'); if (CHAT.globalSelectedUserList.length > 0) { jQuery('#userSelectionLength').text(CHAT.globalSelectedUserList.length); } else { jQuery('#userSelectionLength').text(''); } }); let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) { return selectedUser.loginId == user.loginId; }) if (findObj) { jQuery(obj).find('.userCheckBox').toggleClass('active'); } jQuery('#user_list').append(obj); }) jQuery('.userCheckBox').show(); // Rotate if(CHAT_UI.isLandscapeMode()) { jQuery(".user_list").addClass("col-6").removeClass("col-12"); $(".squareBoxContent span").addClass("landscape_span"); } jQuery('#backButton').off().on('click', function() { // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); socket.emit('getGroupList', isInvite) }); jQuery("#userSelectionConfirmBtn").off().on('click', function(){ // loadingIndicatorを表示 CHAT_UI.showLoadingIndicator(); CHAT_UI.setConfirmButtonEvent(isInvite); }); jQuery('#backButton').show(); jQuery('.roomListIcon, .chatRoomIcon').hide(); jQuery('#userSelectionConfirmBtn').show(); jQuery('.userCheckBox').show(); jQuery('#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) { jQuery('.titleRoomName').text(params.roomName).data('roomName', params.roomName); } else { let roomListTitle = getLocalizedString("roomListTitle") $('.titleRoomName').text(roomListTitle) } } // loadingIndicatorを表示しない CHAT_UI.dismissLoadingIndicator(); }); } })