diff --git a/api.js b/api.js index 7521469..f591ff5 100644 --- a/api.js +++ b/api.js @@ -56,6 +56,8 @@ wss.on('connection', (ws, req) => { ws.on('close', () => { user.splice(user.indexOf(thisuser), 1); console.log(`${req.socket.remoteAddress} (${thisuser}) closed`) + wss.clients.forEach(client => + client.send(JSON.stringify({type: "room", name: "open chat", user: user}))) }) ws.send(JSON.stringify({type: "info", time: Date.now(), content: "connected"})) diff --git a/public/sym/expand_more-black-24dp.svg b/public/sym/expand_more-black-24dp.svg new file mode 100644 index 0000000..3a8e084 --- /dev/null +++ b/public/sym/expand_more-black-24dp.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/error.vue b/src/components/error.vue index 1511f62..a8a28ad 100644 --- a/src/components/error.vue +++ b/src/components/error.vue @@ -31,6 +31,7 @@ name: "error", background-color: #E53935; border-radius: 15px; box-shadow: 3px 3px 10px #111; + animation: slide-from-left alternate 0.2s; } #errorBox{ display: none; diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue index 2645085..3b6df14 100644 --- a/src/components/newMessage.vue +++ b/src/components/newMessage.vue @@ -25,8 +25,8 @@ export default { this.msg.content.text = "" 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) + //let msgContainer = document.getElementById("messagesContainer") + //msgContainer.scrollTo(0, msgContainer.scrollHeight) } }, resizeMessageBanner(){ diff --git a/src/main.js b/src/main.js index e56184a..3a8c102 100644 --- a/src/main.js +++ b/src/main.js @@ -72,8 +72,8 @@ new Vue({ } }).$mount('#app') -const wsurl = 'ws://127.0.0.1:8090' -//const wsurl = 'wss://chat.adb.sh:8080' +//const wsurl = 'ws://127.0.0.1:8090' +const wsurl = 'wss://chat.adb.sh:8080' const socket = new WebSocket(wsurl) function element(id){ return document.getElementById(id)} @@ -102,7 +102,9 @@ socket.onmessage = (e) => { else if (msg.type === 'message'){ chatroom.messages.push(msg) let msgContainer = document.getElementById("messagesContainer") - if (msgContainer.scrollHeight < msgContainer.scrollTop + 1000) msgContainer.scrollTo(0, msgContainer.scrollHeight) + if (msg.content.user === chatroom.username || msgContainer.scrollHeight < msgContainer.scrollTop + 1000) + setTimeout(() => {msgContainer.scrollTo(0, msgContainer.scrollHeight)}, 50) + else document.getElementById("scrollDown").style.display = "block" } } diff --git a/src/views/chat.vue b/src/views/chat.vue index 91c31f9..48e2784 100644 --- a/src/views/chat.vue +++ b/src/views/chat.vue @@ -14,6 +14,7 @@ + @@ -26,16 +27,25 @@ import newMessage from '@/components/newMessage.vue'; import topBanner from '@/components/topBanner.vue'; import main from '@/main.js'; import ChatInformation from "@/components/chatInformation"; +import Icon from "@/components/icon"; export default { name: 'chat', components: { + Icon, ChatInformation, message, messageReceive, newMessage, topBanner }, + methods:{ + scrollToBottom(){ + let msgContainer = document.getElementById("messagesContainer") + msgContainer.scrollTo(0, msgContainer.scrollHeight) + document.getElementById("scrollDown").style.display = "none" + } + }, data(){ return { chatroom: main.data().chatroom @@ -59,4 +69,11 @@ export default { margin-top: 1rem; margin-bottom: 1rem; } +#scrollDown{ + position: absolute; + background-color: #fff; + bottom: 5rem; + right: 1rem; + display: none; +}