first working chat version

chatInformations
adb 4 years ago
parent e86f0635c1
commit fd4fff2a78

@ -36,6 +36,7 @@ wss.on('connection', (ws, req) => {
ws.send(JSON.stringify({type: "error", content: "your message was empty"})) ws.send(JSON.stringify({type: "error", content: "your message was empty"}))
else{ else{
msg.content.user = thisuser msg.content.user = thisuser
msg.content.text = msg.content.text.replace(/</g, "&lt").replace(/>/g, "&gt").replace(/\n/g, "<br>")
wss.clients.forEach(client => { wss.clients.forEach(client => {
if (client !== ws) client.send(JSON.stringify(msg))}) if (client !== ws) client.send(JSON.stringify(msg))})
} }

@ -22,8 +22,21 @@ export default {
if (this.msg.content.text !== "") { if (this.msg.content.text !== "") {
this.msg.time = Date.now() this.msg.time = Date.now()
main.methods.sendWebSocket(this.msg) main.methods.sendWebSocket(this.msg)
//just for now, ik it's dirty
document.getElementById('messages').innerHTML +=
`<div class="messageContainer" data-v-032da2b2="">
<div class="message" data-v-032da2b2="">
${this.msg.content.text
.replace(/</g, "&lt")
.replace(/>/g, "&gt")
.replace(/\n/g, "<br>")}
</div>
</div>`;
this.msg.content.text = "" this.msg.content.text = ""
this.resizeMessageBanner() document.getElementById("messagesContainer").style.height = "calc(100% - 7rem)"
document.getElementById("newMessageInput").style.height = "1.25rem"
let msgContainer = document.getElementById("messagesContainer")
msgContainer.scrollTo(0, msgContainer.scrollHeight)
} }
}, },
resizeMessageBanner(){ resizeMessageBanner(){
@ -33,7 +46,6 @@ export default {
let msgContainer = document.getElementById("messagesContainer") let msgContainer = document.getElementById("messagesContainer")
msgContainer.style.height msgContainer.style.height
= `calc(100% - ${id.parentElement.clientHeight}px - 3rem)` = `calc(100% - ${id.parentElement.clientHeight}px - 3rem)`
//msgContainer.scrollTo(0, msgContainer.scrollHeight)
} }
}, },
data(){ data(){
@ -67,7 +79,7 @@ export default {
margin-bottom: 1rem; margin-bottom: 1rem;
left: 2rem; left: 2rem;
min-height: 1.25rem; min-height: 1.25rem;
max-height: 14rem; max-height: 10rem;
width: calc(100% - 7rem); width: calc(100% - 7rem);
height: 1.25rem; height: 1.25rem;
background-color: #fff0; background-color: #fff0;

@ -91,11 +91,13 @@ socket.onmessage = (e) => {
else if (msg.type === 'message'){ else if (msg.type === 'message'){
//just for now, ik it's dirty //just for now, ik it's dirty
element('messages').innerHTML += element('messages').innerHTML +=
`<div class="messageContainer" data-v-032da2b2=""> `<div class="messageContainer" data-v-a1576e28="">
<div class="message" data-v-032da2b2=""> <div class="message" data-v-a1576e28="">
${msg.content.text} ${msg.content.text}
</div> </div>
</div>`; </div>`;
let msgContainer = document.getElementById("messagesContainer")
if (msgContainer.scrollHeight < msgContainer.scrollTop + 1000) msgContainer.scrollTo(0, msgContainer.scrollHeight)
} }
} }

@ -2,27 +2,9 @@
<div> <div>
<div ref="msgContainer" id="messagesContainer" class="messagesContainer"> <div ref="msgContainer" id="messagesContainer" class="messagesContainer">
<div id="messages" class="messages"> <div id="messages" class="messages">
<message msg="Hey :D" /> <p style="margin-left: 1rem; font-style: italic;">You entered the chat</p>
<message msg="Du bist blööööd xD" /> <message style="display: none;" />
<messageReceive msg="Du auch" /> <messageReceive style="display: none;" />
<message msg="lol" />
<messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
<message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
Fusce scelerisque pellentesque erat quis sollicitudin.
Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
Nam suscipit ex eget urna accumsan pulvinar. Pellentesque fringilla placerat feugiat.
Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
Nullam non turpis consequat, placerat lectus nec, ornare orci.
Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
/>
<messageReceive msg="Du hast Pizza!" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
<message msg="und Kuchen :P" />
</div> </div>
</div> </div>
<newMessage /> <newMessage />

Loading…
Cancel
Save