// ==== Starter World =================================================================================================// This code is designed for use on the Ancient Brain site.// This code may be freely copied and edited by anyone on the Ancient Brain site.// To include a working run of this program on another site, see the "Embed code" links provided on Ancient Brain.// ====================================================================================================================// Demo of Ancient Brain Websockets functionality. // Enter a line of chat and it appears on all clients running this World.// default body is margin 0 and padding 0
$('body').css("margin","20px");
$('body').css("padding","20px");
document.write (`<h1>Websockets chat demo </h1>Runthiswith multiple users on multiple devices.<br>Enter a line of chat and it appears on all clients running thisWorld.<br>If you are logged in, chat is tagged with your name.<p><div style="width:60vw; background-color:white; border: 1px solid black; margin:20; padding: 20px;"><h3>Me</h3><INPUT style="width:50vw;" id=me ><button onclick="sendchat();"class=ab-normbutton >Send</button></div><div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;"><h3>Them</h3><div id=them ></div></div><div style="width:60vw; background-color:#ffffcc; border: 1px solid black; margin:20; padding: 20px;"><h3>Users online </h3><div id=themlist ></div></div><pre></pre><h3>Send HTML and CSS </h3>Top tip:There is no protection against HTML or CSS injection.Send HTML and CSS in the chat and you can mess with the other person's page!Enterthis:<pre><style> body { background-color:red !important;}</style> </pre>Challenges:<ol><li>Enter CSS to set the background image of the other user's page!<li>Enter CSS to hide the other user's entire page!</ol><p><pre></pre><h3>Send JS </h3>You can send JS to the other window!<br>
e.g.Enter the following to force reload the other user's page:<pre><script> window.location.reload();</script> </pre>Find out more crazy things you can do by injecting JS into their window!<pre></pre>`);// Enter will also send chat:
document.getElementById('me').onkeydown =function(event){if(event.keyCode ==13) sendchat();};// start socket for this World
AB.socketStart();// --- Send my line of text to server ----------------------------------------------------------------function sendchat(){var theline = $("#me").val();var data ={
userid: AB.myuserid,
username: AB.myusername,
line: theline
};
AB.socketOut ( data );// server gets this, and sends the data to all clients running this World}// given AB userid, username, construct a link to that user // if not run logged in, userid = "none"function userlink ( userid, username ){if( userid =="none")return("Anon user");elsereturn("<a target='_blank' href='https://ancientbrain.com/user.php?userid="+ userid +"'>"+ username +"</a>");}// --- re-define AB socket handler functions -------------------------------------// re-define these handler functions from default (which is do nothing)// When someone else enters text, server will trigger AB.socketIn.// Here I define what to do for it.
AB.socketIn =function(data){var userhtml = userlink ( data.userid, data.username );
$("#them").html ( userhtml +": "+ data.line );};// At startup, and when list of users changes, server will trigger AB.socketUserlist. // Here I define what to do for it.
AB.socketUserlist =function( a ){
console.log ("Got user list: ");
console.log ( JSON.stringify ( a,null,' '));if( a.length <2){
$("#themlist").html ("<h3 style='color:red'> You are alone. Get someone else to run this World. </h3>");return;}// else var str =" <ol> ";for(var i =0; i < a.length; i++){var userhtml = userlink ( a[i][0], a[i][1]);
str = str +" <li> "+ userhtml ;}
$("#themlist").html ( str +" </ol> ");};