hacklabbo/hod8-chatstream
17
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Isolate code

Browse source
This commit is contained in:
odoacre 2022-11-07 16:50:29 +01:00
parent 3a8a85d117
commit d12c3d42f6
3 changed files with 127 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
server/public/index.css Normal file
View file

@ -0,0 +1,94 @@
body {
box-sizing: border-box;
margin: 0;
padding: 0;
padding-bottom: 3rem;
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
overflow: hidden;
width: 100vw;
}
iframe {
width: 100%;
height: 50vh;
}
#form {
border-top: 1px solid black;
background: #eee;
padding: 0.25rem;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
height: 3em;
box-sizing: border-box;
justify-content: center;
}
#username {
font-size: small;
margin: 0;
padding: 0;
text-align: center;
}
#username a {
padding: 0;
margin: 0;
}
#input {
border: none;
padding: 0 1rem;
flex-grow: 1;
border-radius: 2rem;
margin: 0.25rem;
}
#input:focus {
outline: none;
}
#form>button {
background: #333;
border: none;
padding: 0 1rem;
margin: 0.25rem;
border-radius: 3px;
outline: none;
color: #fff;
}
#messages {
list-style-type: none;
width: 98%;
margin: 0 auto;
padding: 0px;
background: #eee;
border-radius: 5px;
overflow-y: scroll;
max-height: 20vh;
}
#messages>li {
padding: 0.5rem 1rem;
border-bottom: 1px solid black;
}
#messages>li:nth-child(odd) {
background: #efefef;
}
h1 {
text-align: center;
padding: 0;
margin-top: 5px;
margin-bottom: 5px;
}
#chat #title {
text-align: center;
}

35
server/public/index.html
View file

@ -119,41 +119,6 @@
</form> </form>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script>
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(http|ftp|https):\/\/([\w-]+\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?)/ig;
return text.replace(exp, "<a href='$1'>$1</a>");
}
var username = '';
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
// document.querySelector('iframe').contentWindow.document.removeChild(document.querySelector('iframe').contentWindow.document.body.querySelector('title'))
form.addEventListener('submit', function (e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function (msg) {
var item = document.createElement('li');
// console.log(username);
item.innerHTML = replaceURLWithHTMLLinks(`${msg}`);
messages.appendChild(item).scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
});
socket.on('username', function (msg) {
let domUsername = document.querySelector('#value');
domUsername.textContent = msg.split('@@@')[0];
domUsername.setAttribute('href', msg.split('@@@')[1]);
username = msg;
});
</script>
</body> </body>
</html> </html>

33
server/public/index.js Normal file
View file

@ -0,0 +1,33 @@
function replaceURLWithHTMLLinks(text) {
var exp = /(\b(http|ftp|https):\/\/([\w-]+\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?)/ig;
return text.replace(exp, "<a href='$1'>$1</a>");
}
var username = '';
var socket = io();
var form = document.getElementById('form');
var input = document.getElementById('input');
// document.querySelector('iframe').contentWindow.document.removeChild(document.querySelector('iframe').contentWindow.document.body.querySelector('title'))
form.addEventListener('submit', function (e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', function (msg) {
var item = document.createElement('li');
// console.log(username);
item.innerHTML = replaceURLWithHTMLLinks(`${msg}`);
messages.appendChild(item).scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
});
socket.on('username', function (msg) {
let domUsername = document.querySelector('#value');
domUsername.textContent = msg.split('@@@')[0];
domUsername.setAttribute('href', msg.split('@@@')[1]);
username = msg;
});