Update.

src/snek/static/app.js

@@ -151,7 +151,13 @@ export class App extends EventHandler {
     ws = null;
     rpc = null;
     audio = null;
-    user = {};
+    user = {}; 
+    typeLock = null;
+    typeListener = null
+    typeEventChannelUid = null
+    async set_typing(channel_uid){
+    	this.typeEventChannel_uid = channel_uid
+    }
 
     async ping(...args) {
         if (this.is_pinging) return false
@@ -173,16 +179,25 @@ export class App extends EventHandler {
         this.ping_interval = setInterval(() => {
             this.ping("active")
         }, 15000)
-
+	this.typeEventChannelUid = null
+	this.typeListener = setInterval(()=>{
+		if(this.typeEventChannelUid){
+			this.rpc.set_typing(this.typeEventChannelUid)
+			this.typeEventChannelUid = null
+		}
+	})
 
         const me = this
         this.ws.addEventListener("connected", (data) => {
             this.ping("online")
         })
+	
         this.ws.addEventListener("channel-message", (data) => {
             me.emit("channel-message", data);
         });
-
+	this.ws.addEventListener("event",(data)=>{
+		console.info("aaaa")	
+	})
         this.rpc.getUser(null).then(user => {
             me.user = user;
         });

src/snek/static/base.css

@@ -366,6 +366,24 @@ a {
   color: #fff;
 }
 
+@keyframes glow {
+    0% {
+	box-shadow: 0 0 5px #3498db;
+    }
+    50% {
+	box-shadow: 0 0 20px #3498db, 0 0 30px #3498db;
+    }
+    100% {
+	box-shadow: 0 0 5px #3498db;
+    }
+}
+
+.glow {
+    animation: glow 1s;
+}
+
+
+
 @media only screen and (max-width: 768px) {
     
     header{

src/snek/static/socket.js

@@ -81,8 +81,13 @@ export class Socket extends EventHandler {
         }
         if (data.channel_uid) {
             this.emit(data.channel_uid, data.data);
+	    if(!data['event'])
             this.emit("channel-message", data);
         }
+	this.emit("data", data.data)
+	if(data['event']){
+	    this.emit(data.event, data)
+	}
     }
 
     disconnect() {
@@ -134,4 +139,4 @@ export class Socket extends EventHandler {
             me.sendJson(call);
         });
     }
-}
+}

src/snek/templates/web.html

@@ -24,7 +24,7 @@
 
 <script type="module">
     import { app } from "/app.js";
-
+    import { Schedule } from "/schedule.js";
     const channelUid = "{{ channel.uid.value }}";
 
     function getInputField(){
@@ -40,7 +40,9 @@
                     app.rpc.sendMessage(channelUid, message);
                     e.target.value = '';
                 }
-            }
+	    }else{
+		app.rpc.set_typing(channelUid)
+	    }
         });
         document.querySelector("upload-button").addEventListener("upload",function(e){
             getInputField().focus();
@@ -74,6 +76,30 @@
             }
         });
 
+	 function triggerGlow(uid) {
+	 	document.querySelectorAll(".avatar").forEach((el)=>{
+		   const div = el.closest('a');
+		   if(el.href.indexOf(uid)!=-1){
+			el.classList.add('glow')
+		    	let originalColor = el.style.backgroundColor 
+			//console.error(originalColor)
+			//el.style.backgroundColor = 'black'
+			setTimeout(()=>{
+			//	el.style.backgroundColor = originalColor
+			//	console.error(el.style.backgroundColor)
+				el.classList.remove('glow')
+			},1200)
+		    }
+
+	      })
+ 	
+    	}
+	app.ws.addEventListener("set_typing",(data)=>{
+		triggerGlow(data.data.user_uid)	
+
+	})
+		
+
         const chatInput = document.querySelector(".chat-area")
         chatInput.addEventListener("drop", async (e) => {
             e.preventDefault();

src/snek/view/rpc.py

@@ -33,6 +33,21 @@ class RPCView(BaseView):
         async def db_update(self, table_name, record):
             self._require_login()
             return await self.services.db.update(self.user_uid, table_name, record)
+        async def set_typing(self,channel_uid):
+            self._require_login()
+            user = await self.services.user.get(self.user_uid)
+            return await self.services.socket.broadcast(channel_uid, {
+                "channel_uid": "293ecf12-08c9-494b-b423-48ba1a2d12c2",
+                "event": "set_typing",
+                "data": {
+                    "event":"set_typing",
+                    "user_uid": user['uid'],
+                    "username": user["username"],
+                    "nick": user["nick"],
+                    "channel_uid": channel_uid
+                }
+            })
+
         async def db_delete(self, table_name, record):
             self._require_login()
             return await self.services.db.delete(self.user_uid, table_name, record)