<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/bootstrap-table.css" rel="stylesheet">
<link href="css/styless.css" rel="stylesheet">
<!--Icons-->
<script src="js/lumino.glyphs.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<div class="col-md-12" style = "display: none;" id = "chatContainer">
<div class="panel panel-default chat">
<div class="panel-heading" id="accordion"><svg class="glyph stroked two-messages"><use xlink:href="#stroked-two-messages"></use></svg> Chat</div>
<div class="panel-body">
<ul id = "chatLi">
<li class="right clearfix">
<span class="chat-img pull-right">
<img src="http://placehold.it/80/dde0e6/5f6468" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="pull-left primary-font">Jane Doe</strong> <small class="text-muted">6 mins ago</small>
</div>
<p>
Mauris dignissim porta enim, sed commodo sem blandit non. Ut scelerisque sapien eu mauris faucibus ultrices. Nulla ac odio nisl. Proin est metus, interdum scelerisque quam eu, eleifend pretium nunc. Suspendisse finibus auctor lectus, eu interdum sapien.
</p>
</div>
</li>
<li class="left clearfix">
<span class="chat-img pull-left">
<img src="http://placehold.it/80/30a5ff/fff" alt="User Avatar" class="img-circle" />
</span>
<div class="chat-body clearfix">
<div class="header">
<strong class="primary-font">John Doe</strong> <small class="text-muted">32 mins ago</small>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante turpis, rutrum ut ullamcorper sed, dapibus ac nunc. Vivamus luctus convallis mauris, eu gravida tortor aliquam ultricies.
</p>
</div>
</li>
</ul>
</div>
<div class="panel-footer">
<div class="input-group">
<input id="btn-input-chat" type="text" class="form-control input-md" placeholder="Type your message here..." />
<span class="input-group-btn">
<button class="btn btn-success btn-md" id="btn-chat">Send</button>
</span>
</div>
</div>
</div>
</div><!--/.col-->
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var wsUri = "ws://localhost:9000/";
websocket = new WebSocket(wsUri);
websocket.onopen = function (ev) {
alert(ev.message);
}
$('#btn-chat').click(function () {
var userName = 'userName';
var message = $('#btn-input-chat').val();
if(userName === "" || message === ""){
//document.getElementById("createResult").innerHTML = "All fields are required, please enter all fields";
alert('all fields are required');
return;
}
var objDiv = document.getElementById("chatLi");
objDiv.scrollTop = objDiv.scrollHeight;
var msg = {
userName: userName,
message: message
};
websocket.send(JSON.stringify(msg));
});
websocket.onmessage = function (ev) {
var msg = JSON.parse(ev.data);
var type = msg.type;
var userName = msg.userName;
var message = msg.message;
var messageTime = msg.messageTime;
if(type == 'usermsg'){
$('#chatLi').append('<li class="left clearfix">\
<span class="chat-img pull-left">\
<img src="http://placehold.it/80/30a5ff/fff" alt="User Avatar" class="img-circle" />\
</span>\
<div class="chat-body clearfix">\
<div class="header">\
<strong class="primary-font">' + userName + '</strong> <small class="text-muted">' + messageTime + '</small>\
</div>\
<p>\
' + message + ' \
</p>\
</div>\
</li>');
}
var options = {
body: userName + " Created sent a message",
icon: 'icon.png'
}
if(!("Notification" in window)){
//alert("This browser does not support desktop notification");
}else if(Notification.permission === "granted"){
var notification = new Notification('New Record', options);
}else if(Notification.permission !== "denied"){
Notification.requestPermission(function (permission){
if(permission === "granted"){
var notification = new Notification('New Record', options);
}
});
}
$('#btn-input-chat').val('');
var objDiv = document.getElementById("chatLi");
objDiv.scrollTop = objDiv.scrollHeight;
};
websocket.onerror = function (ev) {
$('#chatLi').append("<tr><td class=\"system_error\">Error Occurred - " + ev.data + "</td></tr>");
};
websocket.onclose = function (ev) {
$('#chatLi').append("<tr><td class=\"system_msg\">Connection Closed - " + ev.data + "</td></tr>");
};
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/chart.min.js"></script>
<script src="js/chart-data.js"></script>
<script src="js/easypiechart.js"></script>
<script src="js/easypiechart-data.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/bootstrap-table.js"></script>
|
Download
