184 lines
7.3 KiB
JavaScript
184 lines
7.3 KiB
JavaScript
$(function () {
|
|
|
|
// const server = "https://164.92.112.47:5005:5005";
|
|
const server = "http://localhost:5005";
|
|
|
|
let socket = io(server, {
|
|
transports: ['websocket']
|
|
});
|
|
|
|
let isChatBoxOpen = false;
|
|
let email = null;
|
|
// let email = 'testuser@gmail.com';
|
|
|
|
if (typeof io !== 'undefined') {
|
|
socket.on('connect', function () {
|
|
});
|
|
|
|
}
|
|
|
|
|
|
if (!email) {
|
|
|
|
generate_message('Hi There, Whats Your Email?', 'user');
|
|
|
|
$("#chatForm").submit(function (e) {
|
|
e.preventDefault();
|
|
email = $("#chat-input").val();
|
|
if (email.trim() === '') {
|
|
return false;
|
|
}
|
|
|
|
$("#chatForm")[0].reset();
|
|
let data = {
|
|
socket: socket.id,
|
|
email: email
|
|
}
|
|
|
|
socket.emit("user__connected", data);
|
|
|
|
// let refreshUsers = (data) => {
|
|
// socket.emit("refreshUsers", data);
|
|
// }
|
|
// refreshUsers(data);
|
|
|
|
// let fetchUserMessages = () => {
|
|
// socket.emit("open__chatBox", data);
|
|
// }
|
|
// fetchUserMessages();
|
|
|
|
|
|
});
|
|
}
|
|
|
|
var INDEX = 0;
|
|
|
|
$("#chat-submit").click(function (e) {
|
|
|
|
if (email) {
|
|
e.preventDefault();
|
|
let msg = $("#chat-input").val();
|
|
if (msg.trim() === '') {
|
|
return false;
|
|
}
|
|
|
|
let data = {
|
|
"socket": socket.id,
|
|
"from": email,
|
|
"to": 'admin',
|
|
"msg": encodeURIComponent(msg),
|
|
"send_by": 'user',
|
|
"date": new Date()
|
|
}
|
|
|
|
socket.emit("send__message", data);
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
function generate_message(msg, type) {
|
|
let str = "";
|
|
str += "<div id='cm-msg-' class=\"chat-msg " + type + "\">";
|
|
str += " <div class=\"cm-msg-text\">";
|
|
str += decodeURIComponent(msg);
|
|
str += " <\/div>";
|
|
str += " <p class=\"icon-time-text\">";
|
|
str += " <span>";
|
|
str += " <svg xmlns='//www.w3.org/2000/svg' width='16.662' height='19.416' viewBox='0 0 16.662 19.416'><path id='Path_1' data-name='Path 1' d='M11.554,3.388V2h5.554V3.388Zm2.083,10.344h1.388V8.41H13.637Zm.694,7.683a8,8,0,0,1-3.228-.66A8.454,8.454,0,0,1,6.66,16.313a8.23,8.23,0,0,1,0-6.456A8.454,8.454,0,0,1,11.1,5.413a8,8,0,0,1,3.228-.66,8.113,8.113,0,0,1,2.916.521,8.028,8.028,0,0,1,2.43,1.446l1.18-1.18.972.972-1.18,1.18a8.533,8.533,0,0,1,1.423,2.245,7.665,7.665,0,0,1,.59,3.147A8,8,0,0,1,22,16.313a8.454,8.454,0,0,1-4.443,4.443A8,8,0,0,1,14.331,21.416Zm0-1.388a6.914,6.914,0,0,0,6.942-6.942,6.7,6.7,0,0,0-2.025-4.918,6.7,6.7,0,0,0-4.918-2.025A6.7,6.7,0,0,0,9.413,8.167a6.7,6.7,0,0,0-2.025,4.918,6.914,6.914,0,0,0,6.942,6.942ZM14.331,13.108Z' transform='translate(-6 -2)' /></svg >";
|
|
str += " <\/span>";
|
|
str += new Date().toLocaleTimeString();
|
|
str += " <\/p>";
|
|
str += " <\/div>";
|
|
$(".chat-logs").append(str);
|
|
$("#cm-msg").hide().fadeIn(300);
|
|
if (type === 'self') {
|
|
$("#chat-input").val('');
|
|
}
|
|
$(".chat-logs").stop().animate({ scrollTop: $(".chat-logs")[0].scrollHeight }, 1000);
|
|
}
|
|
|
|
|
|
$("#chat-circle").click(function () {
|
|
isChatBoxOpen = true;
|
|
$("#chat-circle").toggle('scale');
|
|
$(".chat-box").toggle('scale');
|
|
$(".chat-logs").stop().animate({ scrollTop: $(".chat-logs")[0].scrollHeight }, 1000);
|
|
|
|
});
|
|
|
|
$(".chat-box-toggle").click(function () {
|
|
isChatBoxOpen = false;
|
|
$("#chat-circle").toggle('scale');
|
|
$(".chat-box").toggle('scale');
|
|
});
|
|
|
|
socket.on('user__connected', function (data) {
|
|
generate_message(data, 'user');
|
|
});
|
|
|
|
socket.on('server__error', function (data) {
|
|
generate_message(data, 'user');
|
|
});
|
|
|
|
socket.on('send__message', function (data) {
|
|
generate_message(data, 'self');
|
|
});
|
|
|
|
socket.on('open__chatBox', function (data) {
|
|
let msgLi = ''
|
|
|
|
data.map(function (message) {
|
|
|
|
if (message.send_by === 'user') {
|
|
msgLi += `<div id='cm-msg-${message.id}' class="chat-msg self">
|
|
<div class="cm-msg-text">
|
|
${decodeURIComponent(data.message)}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
else {
|
|
msgLi += `<div id='cm-msg-${message.id}' class="chat-msg user">
|
|
<div class="cm-msg-text">
|
|
${decodeURIComponent(data.message)}
|
|
</div>
|
|
<p class="icon-time-text">
|
|
<span>
|
|
<svg xmlns='http://www.w3.org/2000/svg' width='16.662' height='19.416' viewBox='0 0 16.662 19.416'><path id='Path_1' data-name='Path 1' d='M11.554,3.388V2h5.554V3.388Zm2.083,10.344h1.388V8.41H13.637Zm.694,7.683a8,8,0,0,1-3.228-.66A8.454,8.454,0,0,1,6.66,16.313a8.23,8.23,0,0,1,0-6.456A8.454,8.454,0,0,1,11.1,5.413a8,8,0,0,1,3.228-.66,8.113,8.113,0,0,1,2.916.521,8.028,8.028,0,0,1,2.43,1.446l1.18-1.18.972.972-1.18,1.18a8.533,8.533,0,0,1,1.423,2.245,7.665,7.665,0,0,1,.59,3.147A8,8,0,0,1,22,16.313a8.454,8.454,0,0,1-4.443,4.443A8,8,0,0,1,14.331,21.416Zm0-1.388a6.914,6.914,0,0,0,6.942-6.942,6.7,6.7,0,0,0-2.025-4.918,6.7,6.7,0,0,0-4.918-2.025A6.7,6.7,0,0,0,9.413,8.167a6.7,6.7,0,0,0-2.025,4.918,6.914,6.914,0,0,0,6.942,6.942ZM14.331,13.108Z' transform='translate(-6 -2)' /></svg >
|
|
</span>
|
|
${new Date().toLocaleTimeString()}
|
|
</p>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
|
|
//$(".chat-logs").append(msgLi);
|
|
|
|
});
|
|
|
|
socket.on('receive__admin__message', (data) => {
|
|
let msgLi = ``;
|
|
msgLi += `<div id='cm-msg-${data.id}' class="chat-msg user">
|
|
<div class="cm-msg-text">
|
|
${decodeURIComponent(data.msg)}
|
|
</div>
|
|
<p class="icon-time-text">
|
|
<span>
|
|
<svg xmlns='http://www.w3.org/2000/svg' width='16.662' height='19.416' viewBox='0 0 16.662 19.416'><path id='Path_1' data-name='Path 1' d='M11.554,3.388V2h5.554V3.388Zm2.083,10.344h1.388V8.41H13.637Zm.694,7.683a8,8,0,0,1-3.228-.66A8.454,8.454,0,0,1,6.66,16.313a8.23,8.23,0,0,1,0-6.456A8.454,8.454,0,0,1,11.1,5.413a8,8,0,0,1,3.228-.66,8.113,8.113,0,0,1,2.916.521,8.028,8.028,0,0,1,2.43,1.446l1.18-1.18.972.972-1.18,1.18a8.533,8.533,0,0,1,1.423,2.245,7.665,7.665,0,0,1,.59,3.147A8,8,0,0,1,22,16.313a8.454,8.454,0,0,1-4.443,4.443A8,8,0,0,1,14.331,21.416Zm0-1.388a6.914,6.914,0,0,0,6.942-6.942,6.7,6.7,0,0,0-2.025-4.918,6.7,6.7,0,0,0-4.918-2.025A6.7,6.7,0,0,0,9.413,8.167a6.7,6.7,0,0,0-2.025,4.918,6.914,6.914,0,0,0,6.942,6.942ZM14.331,13.108Z' transform='translate(-6 -2)' /></svg >
|
|
</span>
|
|
${new Date().toLocaleTimeString()}
|
|
</p>
|
|
</div>
|
|
`;
|
|
|
|
$(".chat-logs").append(msgLi);
|
|
$(".chat-logs").stop().animate({ scrollTop: $(".chat-logs")[0].scrollHeight }, 1000);
|
|
|
|
});
|
|
|
|
//https://codepen.io/shivapandey/pen/dWdRYM
|
|
|
|
}) |