Я работаю над проектом приложения группового чата с использованием узла, express, а во внешнем интерфейсе я использую ajax. поэтому, когда любой пользователь добавляет или добавляет сообщение, как я могу автоматически c загрузить веб-страницу и одновременно показать недавно добавленные данные на веб-странице. в настоящее время я использую это:
window.location.reload(true);
, но это произошло только в том же браузере на той же странице, но не в другом браузере.
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CHAT APP</title>
<!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jquery emoji picker -->
<link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.css">
<!-- Jquery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Emoji Data -->
<link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.tw.css">
<!-- Latest compiled and minified JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-->
<style>
body {
margin-left: 20px;
margin-top: 30px;
background: url('https://cdn.dribbble.com/users/74401/screenshots/1645509/astronaut.png') no-repeat center center fixed;
background-size: 100% 100%;
}
.chat-section {
display: none;
}
#noMsgErr {
display: none;
}
h1, h2 {
color: darkgray;
}
</style>
</head>
<body>
<!-- User Registration Form. To be displayed only for the first time. -->
<div class="container-fluid">
<div id="userRegistration">
<h2>Register Yourself First!</h2>
<div class="row">
<div class="col-md-11">
<div class="well">
<label>Enter UserName: </label>
<input type="text" class="form-control" placeholder="Enter user name" id="registeredUser"
onkeydown="if(event.keyCode == 13) { $('#regUserSubmitBtn').click();}"/>
<br>
<button type="button" class="btn btn-default btn-success" id="regUserSubmitBtn"> SUBMIT </button>
</div>
</div>
</div>
</div>
<div class="chat-section">
<h1 class="text-center">Let's Chat!</h1>
<div class="row">
<div class="col-md-3 col-md-offset-0" id='onlineUsersSection'>
<div class="well">
<label>Online Users:</label><br>
<ul id="users"></ul>
</div>
</div>
<div class="col-md-8 chatDiv">
<div id="chats"></div>
<div class="well" id="typeMsgSection">
<label for="Chats" class='peopleTyping'>Type Message: </label>
<br/>
<input type="text" placeholder="enter message" id="sentMessage" class="form-control"
onkeydown="if(event.keyCode == 13) {$('#hitSend').click();}"></input>
<br/>
<div class="alert alert-danger" id="noMsgErr">
<p>Blank Messsages are not entertained</p>
</div>
<br/>
<div class="row">
<div class="col-md-10">
<button class="btn btn-block btn-primary" id="hitSend">Send</button>
</div>
<div class="col-md-2">
<button class="btn btn-warning" id="clearChat">Clear Chat</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
$(document).ready(function() {
var domHeight = document.body.scrollHeight;
var hasMsg = false; // to check whether there is some value in the input message field, so that once there is a value in the input message field, we need not check again on "keyup". We only need to check once there is no value in the input message field.
console.log('domHeight', domHeight);
var flag = true;
/* SECTION - DOM Caching */
$userRegistration = $('#userRegistration');
$registeredUser = $('#registeredUser');
$users = $('#users');
$chats = $('#chats');
$sentMessage = $('#sentMessage');
$hitSend = $('#hitSend');
$clearChat = $('#clearChat');
$regUserSubmitBtn = $('#regUserSubmitBtn');
$typeMsgSection = $('#typeMsgSection');
$registeredUser.focus(); // giving the user name input field the cursor.
var socketClient = io();
socketClient.on('connect', function() {
console.log('connected on client - ', socketClient.id);
if($chats.html() == 0) {
$clearChat.attr('disabled', true);
}
$hitSend.attr('disabled', true);
});
/* SECTION - User typing the message */
$sentMessage.on('keyup', function() {
if($(this).val()) {
//$("#noMsgErr").hide();
$hitSend.attr('disabled', false);
if(!hasMsg) {
hasMsg = true; // if there is some value in the input message field, we need not check again.
socketClient.emit('addTypingUsers');
}
} else {
$hitSend.attr('disabled', true);
hasMsg = false; // if there is some value in the input message field, we might check again until there is some value.
// if there is no value in the input message field, remove the current user from "Typing users" list.
socketClient.emit('removeTypingUsers');
}
});
/* SECTION - Sending a new Message */
$hitSend.on('click', function(event) {
event.preventDefault();
let msg = $sentMessage.val();
if(msg == '') {
//$("#noMsgErr").show();
return;
}
$sentMessage.val('');
socketClient.emit("oldMessage", {msg: msg});
hasMsg = false;
// once the message is sent, remove the name of the user from "Typing users" list.
socketClient.emit('removeTypingUsers');
$('.peopleTyping').text('Type Message: ');
});
/* SECTION - Clear Chat */
$clearChat.on('click', function() {
$clearChat.attr('disabled', true); // disabling the clear chats button.
$sentMessage.focus(); // setting cursor on input field.
flag = true;
domHeight = document.body.scrollHeight;
// remove scroll bar, height, padding slowly from the chats section.
$chats.animate({
'height': '0px',
'overflow-y': 'hidden',
'padding-right': '0px'
}, 'slow', function() {
$chats.removeAttr('style');
$chats.empty();
});
$typeMsgSection.css({
'margin-top': '0px'
});
$('.peopleTyping').text('Type Message: ');
});
/* SECTION - User Registration */
$regUserSubmitBtn.on('click', function() {
var currentUser = $registeredUser.val();
if(currentUser == '') {
alert('please enter a name');
return;
}
socketClient.emit("thisUser", {user: currentUser, onlineStatus: 'green'});
$registeredUser.val('');
$userRegistration.fadeOut("slow", function() {
// remove the user registration section and show chats section on the page
$(".chat-section").fadeIn("slow");
// activating the jquery emoji picker
$sentMessage.emojiPicker({
position: 'right'
});
var $emojiPickerDiv = $('#typeMsgSection > div')[0];
$emojiPickerDiv.style.width = '100%';
// taking care of the UI gliches that come when jquery-emoji-picker is installed
// makes the 'text' input take the width of the div it is enclosed in
$sentMessage[0].style.width = '100%';
// makes the 'text' input responsive
$sentMessage[0].style.display = 'flex';
// to put the cursor on "#sentMessage" input text field
$sentMessage.focus();
});
});
/* SECTION - Appending new message */
socketClient.on('newMessage', function(data) {
let prevOffsetTop = 0, currOffsetTop = 0;
if($chats.html() == '') {
prevOffsetTop = $typeMsgSection.offset.top;
}
$chats.append('<div class="well well-sm" style="font-size: 18px">' + '<strong>'+ data.user + ': </strong>' + data.msg + '</div>').fadeIn('slow');
$chats.scrollTop($chats[0].scrollHeight);
if($chats.contents().length == 1) {
currOffsetTop = $typeMsgSection.offset.top;
}
$typeMsgSection.css({
'margin-top': '15px'
});
// when the user sends a message, the "chats" section must become fixed at the end of the page. Hence, we scrolled the window down. (params : (x, y) // x = document.boyd.scrollwidth, y = document.body.scrollHeight)
//window.scrollTo(0, document.body.scrollHeight);
//console.log('domHeight', domHeight);
if(flag && ($typeMsgSection.offset().top + $typeMsgSection.height() + parseInt($typeMsgSection.css('margin-top'))
+ parseInt($('body').css('margin-top')) + currOffsetTop - prevOffsetTop >= domHeight)) {
$chats.css({
'overflow-y': 'scroll', // giving the chats section a scroll bar.
'padding-right': '10px', // padding at the side of scroll bar.
'height': $typeMsgSection.position().top - parseInt($('body').css('margin-top')) - parseInt($typeMsgSection.css('margin-top'))
});
$chats.scrollTop($chats[0].scrollHeight);
flag = false;
}
$clearChat.attr('disabled', false);
})
/* SECTION - user Online/Away - making the current user "Away" once the fouce on the browser tab is shifted*/
$(window).blur(function() {
// sending the server an event that will change the current users status to "Away" on server level.
socketClient.emit("updateUserStatus", 'yellow');
return;
});
/* SECTION - user Online/Away - making the current user "Online" once the focus on the browser tab is back. */
$(window).focus(function() {
// sending the server an event that will change the current users status to "Away" on server level.
socketClient.emit("updateUserStatus", 'green');
return;
});
/* SECTION - showing online users */
socketClient.on('all-Users', function(obj) {
let html = '';
let imgSrc = ''; // variable to store the source of either "Yellow dot" or "Green dot" (for Online/Away symbol).
for (let i = 0; i < obj.length; i++) {
if(obj[i].status == 'green') {
imgSrc = ' <img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Online_dot.png" alt="online-green-dot" height="8px" width="8px"/> ';
} else {
imgSrc = ' <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Yellow_Dot_by_DraGoth.png/600px-Yellow_Dot_by_DraGoth.png" alt="online-green-dot" height="8px" width="8px"/> ';
}
html += '<li class="list-group-item"> ' + imgSrc + obj[i].user + '</li>';
}
$users.empty();
$users.append(html);
});
/* SECTION - showing typing users */
socketClient.on('showTypingUsers', function(data) {
let str = ''; // will store the names of users currently typing. (If their no. is less than 3)
var cnt = 0; // variable that stores the number of people currently typing other than the current user.
data.forEach(function(obj) {
if(obj.uId != socketClient.id) {
str += obj.uName + ', ';
cnt++;
}
});
str = str.substring(0, str.length - 2);
if(cnt == 0) {
$('.peopleTyping').text('Type Message: ');
}
else if(cnt == 1) {
$('.peopleTyping').text('Type Message: ' + str + ' is typing...');
}
else if(cnt == 2){
$('.peopleTyping').text('Type Message: ' + str + ' are typing...');
}
else {
$('.peopleTyping').text('Type Message: ' + cnt + ' people are typing...');
}
});
});
</script>
<!-- jquery emoji picker -->
<script type="text/javascript" src="js/jquery.emojipicker.js"></script>
<script type="text/javascript" src="js/jquery.emojis.js"></script>
</html>