parent
1afe462c0b
commit
eba441b624
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,79 @@ |
||||
<!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 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); |
||||
}); |
||||
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> </li><li> </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> |
Reference in new issue