autoscroll and error update

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"}))

public/sym/expand_more-black-24dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="24px" height="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>

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;

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")
+        //let msgContainer = document.getElementById("messagesContainer")
-        msgContainer.scrollTo(0, msgContainer.scrollHeight)
+        //msgContainer.scrollTo(0, msgContainer.scrollHeight)
       }
     },
     resizeMessageBanner(){

src/main.js

@@ -72,8 +72,8 @@ new Vue({
   }
 }).$mount('#app')
 
-const wsurl = 'ws://127.0.0.1:8090'
+//const wsurl = 'ws://127.0.0.1:8090'
-//const wsurl = 'wss://chat.adb.sh:8080'
+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"
   }
 }
 

src/views/chat.vue

@@ -14,6 +14,7 @@
       </div>
     </div>
     <newMessage />
+    <icon v-on:click.native="scrollToBottom()" id="scrollDown" ic="./sym/expand_more-black-24dp.svg" />
     <topBanner />
     <chatInformation />
   </div>
@@ -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;
+}
 </style>