Skip to content

C
chat_webview
Commit b994ba6e by Lee Munkyeong
Options

チャット詳細実装

parent 0ce71caa
Showing with 168 additions and 75 deletions
public/js/chat-ui.js
...@@ -131,7 +131,7 @@ $('#room-search').on('input', function(event) { ...@@ -131,7 +131,7 @@ $('#room-search').on('input', function(event) {
// 検索結果が有る場合、結果を表示する // 検索結果が有る場合、結果を表示する
socket.emit('roomSearch', encodeURIComponent($('#room-search').val())); socket.emit('roomSearch', encodeURIComponent($('#room-search').val()));
} else { } else {
if (isOnline == 'true') { if (IS_ONLINE == 'true') {
android.updateRoomList(); android.updateRoomList();
CHAT_UI.refreshRoomList(); CHAT_UI.refreshRoomList();
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
...@@ -396,7 +396,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) { ...@@ -396,7 +396,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
CHAT_UI.showLoadingIndicator(); CHAT_UI.showLoadingIndicator();
socket.emit('leaveRoom', function() { socket.emit('leaveRoom', function() {
CHAT.saveRoomInfo(); CHAT.saveRoomInfo();
if (isOnline == 'true') { if (IS_ONLINE == 'true') {
android.updateRoomList(); android.updateRoomList();
CHAT_UI.refreshRoomList(); CHAT_UI.refreshRoomList();
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
...@@ -654,15 +654,16 @@ CHAT_UI.showConfirmView = function(isInvite) { ...@@ -654,15 +654,16 @@ CHAT_UI.showConfirmView = function(isInvite) {
let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(','); let newRoomName = CHAT.globalLoginParameter.loginId + ',' + userNameList.join(',');
// ルーム名のURIencodingを行う // ルーム名のURIencodingを行う
const encodedRoomName = encodeURIComponent(newRoomName); //const encodedRoomName = encodeURIComponent(newRoomName);
//todo android create room api //todo android create room api
//android.createChatRoom(type,userIdList,encodedRoomName) need to add joinRoom method and call here as callback .. android.createChatRoom("1",userIdList.join(','),newRoomName);
socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
/*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
socket.emit('joinRoom', newRoomId, newRoomName, function () { socket.emit('joinRoom', newRoomId, newRoomName, function () {
CHAT.saveRoomInfo(newRoomId, newRoomName); CHAT.saveRoomInfo(newRoomId, newRoomName);
$('#messages').html(''); $('#messages').html('');
...@@ -670,10 +671,7 @@ CHAT_UI.showConfirmView = function(isInvite) { ...@@ -670,10 +671,7 @@ CHAT_UI.showConfirmView = function(isInvite) {
$("#userSelectionDeleteBtn").hide(); $("#userSelectionDeleteBtn").hide();
$('#pills-chat-tab').tab('show'); $('#pills-chat-tab').tab('show');
}); });
}); });*/
/*socket.on('createNewRoom', (shopMemberIdList, newRoomName, callback) => { /*socket.on('createNewRoom', (shopMemberIdList, newRoomName, callback) => {
const user = onlineUsers.getUser(socket.id) const user = onlineUsers.getUser(socket.id)
...@@ -940,6 +938,9 @@ CHAT_UI.refreshRoomList = function() { ...@@ -940,6 +938,9 @@ CHAT_UI.refreshRoomList = function() {
}); });
// Click event // Click event
let obj = $(jQuery.parseHTML(html)).on('click', function() { let obj = $(jQuery.parseHTML(html)).on('click', function() {
let roomId = $(this).data('roomId');
let roomName = $(this).data('roomname');
CHAT_UI.joinRoom(roomId,roomName);
//TODO ルームに入る処理追加必要 //TODO ルームに入る処理追加必要
}); });
// チャットルームリストに追加する // チャットルームリストに追加する
...@@ -973,3 +974,91 @@ CHAT_UI.refreshRoomList = function() { ...@@ -973,3 +974,91 @@ CHAT_UI.refreshRoomList = function() {
// loadingIndicatorを表示しない // loadingIndicatorを表示しない
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
}; };
CHAT_UI.joinRoom = function(roomId,roomName) {
console.log(roomId);
if (IS_ONLINE == 'true') {
android.updateMessages(roomId);
// socket.emit('joinRoom', roomId, roomName, function() {
// $('#messages').html('');
// $('.titleRoomName').text(roomName).data('roomName', roomName);
// $('#pills-chat-tab').tab('show');
// $("#message-search").attr("placeholder", $("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
// });
} else {
}
//var roomInfo = android.getMessages(roomId);
//ui.loadMessages();
};
CHAT_UI.loadMessages = function(messages, shopMemberId, users, roomId, roomName) {
$('#messages').html('');
$('.titleRoomName').text(roomName).data('roomName', roomName);
$('#pills-chat-tab').tab('show');
$("#message-search").attr("placeholder", $("#message-search").attr("placeholder")+getLocalizedString("chat_search_placeholder"));
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');
};
\ No newline at end of file
public/js/chat-websocket.js
...@@ -2,14 +2,17 @@ var socket; ...@@ -2,14 +2,17 @@ var socket;
connectSocket(IS_ONLINE); connectSocket(IS_ONLINE);
function connectSocket(isOnline) { function connectSocket(isOnline) {
console.log(isOnline)
if (isOnline == 'true') { if (isOnline == 'true') {
socket = io(CHAT_SERVER_URL); socket = io(CHAT_SERVER_URL);
console.log('insOnline');
setSocketAction(); setSocketAction();
android.updateRoomList(); android.updateRoomList();
CHAT_UI.refreshRoomList(); CHAT_UI.refreshRoomList();
CHAT_UI.dismissLoadingIndicator(); CHAT_UI.dismissLoadingIndicator();
$('#createChatRoom').show(); $('#createChatRoom').show();
} else { } else {
console.log('insOffline');
//オフラインの場合、DBからルーム一覧を表示。 //オフラインの場合、DBからルーム一覧を表示。
if (CHAT_UTIL.isIOS()) { if (CHAT_UTIL.isIOS()) {
//TODO IOSの場合 //TODO IOSの場合
...@@ -211,72 +214,72 @@ function setSocketAction () { ...@@ -211,72 +214,72 @@ function setSocketAction () {
// 新しいメッセージを受信する場合の処理 // 新しいメッセージを受信する場合の処理
// #36170 // #36170
socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){ // socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){
let jQueryMessages = $('#messages'); // let jQueryMessages = $('#messages');
// スクロールの変化を防ぐため以前画面の高さを保存する // // スクロールの変化を防ぐため以前画面の高さを保存する
let beforeHeight = jQueryMessages.prop('scrollHeight'); // let beforeHeight = jQueryMessages.prop('scrollHeight');
// メッセージ文字列の生成 // // メッセージ文字列の生成
let workVal = ""; // let workVal = "";
messages.forEach(function(message) { // messages.forEach(function(message) {
let template = $('#message-template').html(); // let template = $('#message-template').html();
if (message.shopMemberId == shopMemberId) { // if (message.shopMemberId == shopMemberId) {
template = $('#message-template-me').html(); // template = $('#message-template-me').html();
} // }
let messageTime = CHAT_UTIL.formatDate(message.time.time); // let messageTime = CHAT_UTIL.formatDate(message.time.time);
//
if (users != undefined) { // if (users != undefined) {
let user = users.find((user) => user.loginId == message.loginId) // let user = users.find((user) => user.loginId == message.loginId)
//
// userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更 // // userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
if (user) { // if (user) {
message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath) // message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)
} else { // } else {
message.profileImagePath = CHAT.getProfileImgUrl("") // message.profileImagePath = CHAT.getProfileImgUrl("")
} // }
} else { // } else {
message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath) // message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
} // }
//
// #36147 // // #36147
message.message = message.message.toString(); // message.message = message.message.toString();
var replacePath = message.message; // var replacePath = message.message;
replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms'); // replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms');
message.message = replacePath; // message.message = replacePath;
let html = Mustache.render(template, { // let html = Mustache.render(template, {
text: message.message, // text: message.message,
from: message.loginId, // from: message.loginId,
profileImage: message.profileImagePath, // profileImage: message.profileImagePath,
createdAtDay: messageTime.createdAtDay, // createdAtDay: messageTime.createdAtDay,
createdAtTime: messageTime.createdAtTime // createdAtTime: messageTime.createdAtTime
}); // });
html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html; // html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
workVal = html + workVal; // workVal = html + workVal;
}) // })
//
// メッセージの画面描画 // // メッセージの画面描画
jQueryMessages.prepend(workVal); // jQueryMessages.prepend(workVal);
if (beforeHeight !== 0) { // if (beforeHeight !== 0) {
// 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持 // // 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
setTimeout(function () { // setTimeout(function () {
jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight); // jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
}, 400); // }, 400);
} else { // } else {
// 新規に入室の場合は最下部へスクロール // // 新規に入室の場合は最下部へスクロール
CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom); // CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
// タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得 // // タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
if ($(window).height() > jQueryMessages.height()) { // if ($(window).height() > jQueryMessages.height()) {
$('#messages').scroll(); // $('#messages').scroll();
} // }
} // }
//
// ユーザ削除ボタン表示しない // // ユーザ削除ボタン表示しない
$("#userSelectionDeleteBtn").hide(); // $("#userSelectionDeleteBtn").hide();
//
CHAT_UI.dismissLoadingIndicator();// add some... // CHAT_UI.dismissLoadingIndicator();// add some...
//
// チャットに遷移する // // チャットに遷移する
$('#pills-chat-tab').tab('show'); // $('#pills-chat-tab').tab('show');
}); // });
// Update User List In Room // Update User List In Room
// サイドバーのユーザーリストアップデート。 // サイドバーのユーザーリストアップデート。
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment