aboutsummaryrefslogtreecommitdiff
path: root/webclient
diff options
context:
space:
mode:
authortomsmeding <tom.smeding@gmail.com>2017-03-27 22:29:30 +0200
committertomsmeding <tom.smeding@gmail.com>2017-03-27 22:29:30 +0200
commitcfb46db181612d42d0be02789db6203f7d9a6db0 (patch)
tree59b6227017be489f8f3a8957f88cde73ba83a040 /webclient
parent11f606c269e3b7cca1848bc227e8e38321fb6e3e (diff)
webclient: Basic messaging possible
Diffstat (limited to 'webclient')
-rw-r--r--webclient/client.html178
1 files changed, 150 insertions, 28 deletions
diff --git a/webclient/client.html b/webclient/client.html
index 3472cb8..2305c17 100644
--- a/webclient/client.html
+++ b/webclient/client.html
@@ -7,13 +7,13 @@
var sock=null,username=null;
var roomlist=[":console"];
var currentroom=":console";
-var roomlogs={":console":[]};
+var roomlogs=new Map([[":console",[]]]);
-(function(){
+var uniqid=(function(){
var id=1;
- function uniqid(){
+ return function uniqid(){
return id++;
- }
+ };
})();
var net_callbacks={};
@@ -24,6 +24,32 @@ function net_send(msg,cb){
net_callbacks[id]=cb;
}
+function fancysplit(text,freespace){
+ var obj={
+ word: [],
+ rest: [],
+ };
+ var cursor=0,idx;
+ if(freespace){
+ while(cursor<text.length&&text[cursor]==" ")cursor++;
+ }
+ while(cursor<text.length){
+ idx=text.indexOf(" ",cursor);
+ if(idx==-1)idx=text.length;
+ obj.word.push(text.slice(cursor,idx));
+ obj.rest.push(text.slice(cursor));
+ if(idx==text.length)break;
+ cursor=idx+1;
+ if(freespace){
+ while(cursor<text.length&&text[cursor]==" ")cursor++;
+ } else if(cursor==text.length){
+ obj.word.push("");
+ obj.rest.push("");
+ }
+ }
+ return obj;
+}
+
function reconnect(){
if(sock)sock.close();
@@ -34,14 +60,13 @@ function reconnect(){
updateStatus();
updateRoomList();
sock.addEventListener("message",function(msg){
- var spl=msg.split(" ",2);
- var id=spl[0],type=spl[1];
- var rest=msg.slice(id.length+type.length+2);
+ var spl=fancysplit(msg.data,false);
+ console.log(msg.data);
+ var id=spl.word[0],type=spl.word[1];
if(id=="_push"){
if(type=="message"){
- spl=rest.split(" ",2);
- var r=spl[0],u=spl[1];
- addRoomEntry(r,"message",[u,rest.slice(r.length+u.length+2)]);
+ var r=spl.word[2],u=spl.word[3];
+ addRoomEntry(r,"message",[u,spl.rest[4]]);
} else {
alert("Unknown push message type '"+type+"'!");
}
@@ -49,9 +74,9 @@ function reconnect(){
var fn=net_callbacks[id];
var obj;
if(type=="ok")fn(true);
- else if(type=="error")fn(null,rest);
- else if(type=="name")fn(rest);
- else if(type=="list")fn(rest.split(" ").slice(1));
+ else if(type=="error")fn(null,spl.rest[2]);
+ else if(type=="name")fn(spl.rest[2]);
+ else if(type=="list")fn(spl.word.slice(3));
else alert("Unknown server response message type '"+type+"'!");
} else {
alert("No callback for server message id '"+id+"'!");
@@ -70,6 +95,27 @@ function reconnect(){
});
}
+function fetchRoomList(){
+ net_send("list_rooms",function(list,err){
+ if(err){
+ addRoomEntry(":console","error",["Unable to fetch room list: "+err]);
+ } else {
+ var roomid;
+ for(roomid in roomlogs.keys()){
+ if(roomid!=":console")roomlogs.delete(roomid);
+ }
+ roomlist=[":console"];
+ var i;
+ for(i=0;i<list.length;i++){
+ roomlist.push(list[i]);
+ roomlogs.set(list[i],[]);
+ // fetchRoomHistory(list[i]);
+ }
+ updateRoomList();
+ }
+ });
+}
+
function updateStatus(){
var str=null;
if(!sock||sock.readyState>=2){
@@ -99,7 +145,9 @@ function updateRoomList(){
if(roomlist[i]==currentroom)div.classList.add("selected");
div.addEventListener("click",function(roomid){
currentroom=roomid;
+ updateRoomList();
drawRoom(currentroom);
+ document.getElementById("roominput").focus();
}.bind(this,roomlist[i]));
div.appendChild(document.createTextNode(roomlist[i]));
rldiv.appendChild(div);
@@ -117,7 +165,7 @@ function drawRoom(roomid){
else roomtitle.firstChild.nodeValue=roomid;
var tr,td;
- var items=roomlogs[roomid];
+ var items=roomlogs.get(roomid);
if(!items){
alert("drawRoom on nonexistent roomid '"+roomid+"'!");
return;
@@ -130,17 +178,28 @@ function drawRoom(roomid){
function drawRoomEntry(type,args){
var tbody=document.getElementById("roomlog");
var tr=document.createElement("tr");
- var td;
+ var td1=document.createElement("td"),td2=document.createElement("td");
+ var node1=document.createTextNode(""),node2=document.createTextNode("");
+ td1.appendChild(node1); td2.appendChild(node2);
+ tr.appendChild(td1); tr.appendChild(td2);
+ tbody.appendChild(tr);
switch(type){
case "message":
- td=document.createElement("td");
- td.appendChild(document.createTextNode(args[0]));
- tr.appendChild(td);
- td=document.createElement("td");
- td.classList.add("message");
- td.appendChild(document.createTextNode(args[1]));
- tr.appendChild(td);
- tbody.appendChild(tr);
+ tr.classList.add("message");
+ node1.nodeValue="<"+args[0]+">";
+ node2.nodeValue=args[1];
+ break;
+
+ case "error":
+ tr.classList.add("error");
+ node1.nodeValue="--";
+ node2.nodeValue=args[0];
+ break;
+
+ case "notice":
+ tr.classList.add("notice");
+ node1.nodeValue="--";
+ node2.nodeValue=args[0];
break;
default:
@@ -150,21 +209,73 @@ function drawRoomEntry(type,args){
}
function addRoomEntry(roomid,type,args){
- if(!roomlogs[roomid]){
+ if(!roomlogs.get(roomid)){
alert("addRoomEntry on nonexistent roomid '"+roomid+"'!");
return;
}
- roomlogs[roomid].push([type,args]);
+ roomlogs.get(roomid).push([type,args]);
if(roomid==currentroom){
drawRoomEntry(type,args);
}
}
+function executeCommand(roomid,text){
+ var spl=fancysplit(text,true);
+ if(spl.word.length==0)return;
+ var cmd=spl.word[0];
+ var creds=null;
+ switch(cmd){
+ case "register":
+ case "login":
+ if(spl.word.length<3){
+ addRoomEntry(roomid,"error",["Usage: /login <username> <password>"]);
+ break;
+ }
+ creds=[spl.word[1],spl.rest[2]];
+ net_send(cmd+" "+creds[0]+" "+creds[1],function(ok,err){
+ if(ok){
+ username=creds[0];
+ addRoomEntry(roomid,"notice",["Logged in as user '"+creds[0]+"'"]);
+ updateStatus();
+ fetchRoomList();
+ } else {
+ addRoomEntry(roomid,"error",["Unable to "+cmd+": "+err]);
+ }
+ });
+ break;
+
+ default:
+ addRoomEntry(roomid,"error",["Unknown command '"+cmd+"'"]);
+ break;
+ }
+}
+
+function sendMessage(roomid,text){
+ if(roomid[0]==":"){
+ addRoomEntry(roomid,"error",["Cannot send a message here"]);
+ return;
+ }
+ var sentAs=username,msg=text.replace(/\n/g,"");
+ net_send("send "+roomid+" "+msg,function(ok,err){
+ if(ok){
+ addRoomEntry(roomid,"message",[sentAs,msg]);
+ return;
+ }
+ addRoomEntry(roomid,"error",["Unable to send message: "+err]);
+ });
+}
+
function doSend(){
var inputelem=document.getElementById("roominput");
var text=inputelem.value;
inputelem.value="";
- addRoomEntry(currentroom,"message",["-",text]);
+
+ if(text.length==0)return;
+ if(text[0]=="/"){
+ executeCommand(currentroom,text.slice(1));
+ } else {
+ sendMessage(currentroom,text);
+ }
}
function doKeypress(ev){
@@ -174,6 +285,7 @@ function doKeypress(ev){
window.addEventListener("load",function(){
reconnect();
drawRoom(currentroom);
+ document.getElementById("roominput").focus();
});
</script>
<style>
@@ -215,7 +327,7 @@ table{
margin:8px 0px 10px 0px;
}
.roomlistitem{
- margin:1px 0px;
+ margin:2px 0px;
padding:3px 2px;
background-color:#223;
cursor:pointer;
@@ -251,10 +363,20 @@ table{
}
#roomlog_table{
width:100%;
- /*height:100%;*/
}
#roomlog > tr > td:first-child{
width:150px;
+ padding-right:20px;
+ text-align:right;
+}
+#roomlog > tr.message{
+ color:inherit;
+}
+#roomlog > tr.error{
+ color:#f44;
+}
+#roomlog > tr.notice{
+ color:#a8f;
}
#roombar_tr{