86 lines
3.7 KiB
HTML
86 lines
3.7 KiB
HTML
<!doctype html>
|
|
<head>
|
|
<title>{{ sitename }} Webchat</title>
|
|
<link rel="stylesheet" type="text/css" href="/styles.css">
|
|
<link rel="stylesheet" type="text/css" href="/local.css">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
#wrapper {border: 3px solid black; display: inline-block; width: 100%; height: 100%;}
|
|
body { font: 13px; background: white; height: 100%; color: black; }
|
|
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
|
|
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; color: black; background: white; }
|
|
form button { width: 9%; background: #074115; border: none; padding: 10px; color: #074115;}
|
|
#messages { list-style-type: none; margin: 0; padding: 0; }
|
|
#messages li { padding: 5px 10px; }
|
|
</style>
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script>
|
|
var socket = io();
|
|
var room;
|
|
function send(){
|
|
let m = document.getElementById('m').value;
|
|
if(m.startsWith('/nick')){
|
|
socket.emit('NICK', {
|
|
nick: m.split(' ')[1],
|
|
password: m.split(' ')[2]
|
|
});
|
|
}
|
|
else if(m.startsWith('/join')){
|
|
socket.emit('LEAVEROOM', room);
|
|
socket.emit('JOINROOM', m.split(' ')[1]);
|
|
room = m.split(' ')[1];
|
|
}
|
|
else if(m.startsWith('/kick')){
|
|
socket.emit('KICK', {nick: m.split(' ')[1], room: room});
|
|
}
|
|
else if(m.startsWith('/list')){
|
|
socket.emit('LIST', {room: room});
|
|
}
|
|
else socket.emit('MSG', {room: room, msg: m});
|
|
document.getElementById('m').value = '';
|
|
}
|
|
socket.on('MSG', function(data){
|
|
document.getElementById('messages').innerHTML+='<li><b>'+data.nick+':</b> '+data.msg+'</span></li>';
|
|
window.scrollTo(0,document.body.scrollHeight);
|
|
});
|
|
socket.on('ALERT', function(data){
|
|
document.getElementById('messages').innerHTML+='<li><i>'+data+'</i></li>';
|
|
window.scrollTo(0,document.body.scrollHeight);
|
|
});
|
|
socket.on('JOINED', function(data){
|
|
document.getElementById('messages').innerHTML+='<li><i>'+data.nick+' has joined the chat</i></li>';
|
|
window.scrollTo(0,document.body.scrollHeight);
|
|
});
|
|
socket.on('LEFT', function(data){
|
|
document.getElementById('messages').innerHTML+='<li><i>'+data.nick+' has left the chat</i></li>';
|
|
window.scrollTo(0,document.body.scrollHeight);
|
|
});
|
|
socket.on('LIST', function(data){
|
|
document.getElementById('messages').innerHTML+='<li><i>'+data+'</i></li>';
|
|
window.scrollTo(0,document.body.scrollHeight);
|
|
});
|
|
function getUrlParameter(name) {
|
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
|
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
|
var results = regex.exec(location.search);
|
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
|
};
|
|
socket.once('connect', () => {
|
|
iname = getUrlParameter('nick');
|
|
iroom = getUrlParameter('room');
|
|
if(iname !== '') socket.emit('NICK', {nick: iname});
|
|
if(iroom !== '') {
|
|
socket.emit('JOINROOM', iroom);
|
|
room = iroom;
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<ul id="messages"></ul><li style="list-style-type: none; margin: 0; padding: 5px 10px;"> </li><li style="list-style-type: none; margin: 0; padding: 5px 10px;"> </li>
|
|
</div>
|
|
<form id="f" action="" onSubmit="send(); return false">
|
|
<input id="m" autocomplete="off" /><button><img src="/send.png" alt="send" width="15px" style="display: inline-block;"></img></button>
|
|
</form>
|
|
</body> |