Chat Client HTML - Maes95/TFG-WebChat GitHub Wiki
Ejemplo de cliente HTML, por defecto escucha del puerto 9000
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<style>
*{box-sizing:border-box}body{background-color:#edeff2;font-family:"Calibri","Roboto",sans-serif}@media(max-width:768px){.chat_window{top:2%;left:2%;right:2%;bottom:2%}}@media(min-width: 768px){.chat_window{top:10%;left:20%;right:20%;height:500px}}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)}.chat_window{position:absolute;border-radius:10px;background-color:#fff;box-shadow:0 10px 20px rgba(0,0,0,0.15);background-color:#f8f8f8;overflow:hidden}.top_menu{background-color:#fff;width:100%;padding:20px 0 15px;box-shadow:0 1px 30px rgba(0,0,0,0.1)}.top_menu .buttons{margin:3px 0 0 20px;position:absolute}.top_menu .buttons .button{width:16px;height:16px;border-radius:50%;display:inline-block;margin-right:10px;position:relative}.top_menu .buttons .button.close{background-color:#f5886e}.top_menu .buttons .button.minimize{background-color:#fdbf68}.top_menu .buttons .button.maximize{background-color:#a3d063}.top_menu .title{text-align:center;color:#bcbdc0;font-size:20px}.messages{position:relative;list-style:none;padding:20px 10px 0;margin:0;height:347px;overflow-y:scroll;overflow-x:hidden}.messages .message{clear:both;overflow:hidden;margin-bottom:15px;transition:all .5s linear;opacity:0}.messages .message.left .avatar{background-color:#f5886e;float:left}.messages .message.left .text_wrapper{background-color:rgba(0,0,0,0.05);padding-top:10px}.messages .message.left .text_wrapper::after,.messages .message.left .text_wrapper::before{right:100%;border-right-color:#ffe6cb}.messages .message.right .avatar{background-color:#fdbf68;float:right}.messages .message.right .text_wrapper{background-color:#c7eafc;float:right}.messages .message.right .text{color:#45829b}.messages .message.appeared{opacity:1}.messages .message .avatar{width:60px;height:60px;border-radius:50%;display:inline-block}.messages .message .text_wrapper{display:inline-block;padding:15px;border-radius:6px;min-width:100px;position:relative}.messages .message .text_wrapper .text{font-size:18px;font-weight:300}.bottom_wrapper{position:relative;width:100%;background-color:#fff;padding:20px;position:absolute;bottom:0}.bottom_wrapper .message_input_wrapper{display:inline-block;height:50px;border-radius:25px;border:1px solid #bcbdc0;width:calc(100% - 160px);position:relative;padding:0 20px}.bottom_wrapper .message_input_wrapper .message_input{border:none;height:100%;box-sizing:border-box;width:calc(100% - 40px);position:absolute;outline-width:0;color:gray}.bottom_wrapper .send_message{width:140px;height:50px;display:inline-block;border-radius:50px;background-color:#a3d063;border:2px solid #a3d063;color:#fff;cursor:pointer;transition:all .2s linear;text-align:center;float:right}.bottom_wrapper .send_message:hover{color:#a3d063;background-color:#fff}.bottom_wrapper .send_message .text{font-size:18px;font-weight:300;display:inline-block;line-height:48px}.message_template{display:none}.system_msg{color:#BDBDBD;font-style:italic;text-align:center;padding-bottom:1em}.user_name{color:rgba(0,0,0,0.6);text-transform:capitalize;font-style:italic}
</style>
</head>
<body>
<div class="chat_window">
<div class="top_menu">
<div class="buttons">
<div class="button close"></div>
<div class="button minimize"></div>
<div class="button maximize"></div>
</div>
<div class="title">Room</div>
</div>
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper"><input class="message_input" placeholder="Type your message here..." /></div>
<div class="send_message">
<div class="icon"></div>
<div class="text">Send</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="text_wrapper">
<span class="user_name"></span>
<div class="text"></div>
</div>
</li>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- JAVASCRIPT -->
<script language="javascript" type="text/javascript">
const port = 9000;
var colors = [
'#46BFBD', // GREEN
'#6435C9', // VIOLET
'#ff6384', // RED
'#FDB45C', // ORANGE
'#45b7cd' // BLUE
];
$(document).ready(function() {
var users = [];
var chat = prompt("Chat name", "Room 1");
if(chat == null || chat === ''){
chat = "Room 1";
}
$('.title').html(chat);
var name = prompt("User name", "user1");
if(name == null || name === ''){
name = "user1";
}
const websocket = new WebSocket("ws://localhost:"+port+"/chat");
websocket.onopen = function(ev) {
newSystemMessage('Connected');
websocket.send(JSON.stringify({ chat : chat, name : name }));
}
websocket.onmessage = function(ev) {
var msg = JSON.parse(ev.data);
var color = getColor(msg.name);
if (msg.type == 'system') {
newSystemMessage(msg.message);
} else {
var $message = $('.message_template .message').clone();
$message.addClass(msg.name == name ? 'right' : 'left').find('.text').html(msg.message);
if(msg.name != name){
$message.find('.user_name').html(msg.name);
$message.find('.user_name').css("color", color)
}
$('.messages').append($message);
}
setTimeout(function () {
$message.addClass('appeared');
}, 0);
$('.messages').animate({ scrollTop: $('.messages').prop('scrollHeight') }, 300);
};
websocket.onerror = function(ev) {
newSystemMessage("Error Occurred - "+ ev.data );
};
websocket.onclose = function(ev) {
newSystemMessage('Connection Closed');
};
$(document).keypress(function(e) {
if(e.which == 13) sendMessage();
});
$('.send_message').click(sendMessage);
function sendMessage(){
var message = $('.message_input').val();
if (message == "") return;
websocket.send(JSON.stringify({ message : message, name : name, chat: chat }));
$('.message_input').val('');
}
function newSystemMessage(text){
$('.messages').append("<div class=\"system_msg\">"+text+"</div>");
}
function getColor(_name){
if(_name == name) return;
var index = users.indexOf(_name);
if(index == -1){
users.push(_name);
index = users.indexOf(_name);
}
return colors[index % colors.length]
}
});
</script>
</body>
</html>