<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Poke</title> <script src="/socket.io/socket.io.js"></script> <script> var socket=io("/poke"); var conns=[]; var self_info={id:-1,nick:"",status:""}; function pokeLink(cOrId){ var c; if(typeof cOrId=="number"){ for(var i=0;i<conns.length;i++)if(conns[i].id==cOrId)break; if(i==conns.length)return document.createElement("span"); c=conns[i]; } else c=cOrId; var span=document.createElement("span"); if(c.id==self_info.id)span.classList.add("pokelink_self"); else span.classList.add("pokelink"); span.appendChild(document.createTextNode(c.nick)); if(c.id!=self_info.id){ span.addEventListener("click",function(ev){socket.emit("poke",c.id);}); } return span; } socket.on("reset",function(){ conns=[]; var ul=document.getElementById("connectionlist"),l=ul.children; for(var i=l.length-1;i>=0;i--)ul.removeChild(l[i]); ul=document.getElementById("notificationlist");l=ul.children; for(var i=l.length-1;i>=0;i--)ul.removeChild(l[i]); }); socket.on("self",function(s_i){ self_info=s_i; }); socket.on("connection add",function(c){ conns.push(c); var li=document.createElement("li"); li.classList.add("connection"); li.setAttribute("poke_id",c.id); li.appendChild(pokeLink(c)); var span=document.createElement("span"); span.classList.add("connectionstatus"); span.appendChild(document.createTextNode("")); li.appendChild(span); document.getElementById("connectionlist").appendChild(li); }); socket.on("connection remove",function(id){ var i; for(i=0;i<conns.length;i++)if(conns[i].id==id)break; if(i==conns.length)return; //? conns.splice(i,1); var ul=document.getElementById("connectionlist"),l=ul.children; for(i=0;i<l.length;i++)if(l[i].getAttribute("poke_id")==id)break; if(i==l.length)return; //? ul.removeChild(l[i]); }); socket.on("status",function(obj){ var id=obj.id,st=obj.status; var i; for(i=0;i<conns.length;i++)if(conns[i].id==id)break; if(i==conns.length)return; conns[i].status=st; var ul=document.getElementById("connectionlist"),l=ul.children; for(i=0;i<l.length;i++)if(l[i].getAttribute("poke_id")==id)break; if(i==l.length)return; //? l[i].children[1].firstChild.nodeValue=st?"("+st+")":""; }); socket.on("poke",function(id){ var notiflist=document.getElementById("notificationlist"); var li=document.createElement("li"); li.classList.add("notification"); var span=document.createElement("span"); span.appendChild(document.createTextNode("Poke from ")); span.appendChild(pokeLink(id)); li.appendChild(span); notiflist.appendChild(li); setTimeout(function(){ notiflist.removeChild(li); },3000); }); function changeStatus(st){ socket.emit("status",st); } </script> <style> body{ font-family:Monaco,Monospace; } span.pokelink{ color:#44f; cursor:pointer; transition:color .3s; } span.pokelink:hover{ color:#77f; } ul#notificationlist{ list-style-type:none; } span.connectionstatus{ font-size:small; margin-left:10px; font-style:italic; } </style> </head> <body> <table style="width:100%"><tbody><tr> <td style="vertical-align:top"> <h2>Users</h2> <ul id="connectionlist"></ul> </td> <td style="vertical-align:top;text-align:right"> <h2>Notifications</h2> <ul id="notificationlist"></ul> </td> </tr></tbody></table> <input type="text" placeholder="change status..." size="30" style="margin-top:20px" onkeypress="if(event.keyCode!=13)return true;changeStatus(this.value);this.value=''"> </body> </html>