CODEWITHSUNDEEP
javascripthtmlserverbackend
thesimg
thesimg

Reputation: 338

Simple share text between two different browsers running the same website

I'm making a website that needs to have an interface where I can select an option and push that option, which updates text on that same website running in a different browser. So far I have the code that allows me to update the text on the first browser, but not the other one.

HTML

<select id="currentEvent">
  <option value="" disabled selected>Current Event</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<button type="button" onclick="GetSelectedText()">Push Changes</button>

JS

function GetSelectedText() {
  var e = document.getElementById("currentEvent");
  var result = e.options[e.selectedIndex].text;
  document.getElementById("selectedEvent").innerHTML = result;
}

I only need to update one line of text on each browser, so please keep this as simple as possible as I'm still learning HTML and am new to web development.

Thanks in advance :)

Upvotes: 1

Views: 317

Answers (1)

The Bomb Squad
The Bomb Squad

Reputation: 4337

took me a bit.. made an example with repl.it.. don't mind the C file, I just like the C for the free environment.. focus on the backend.js and frontend.html

The concept is that each tab/client gets a new key, the client sends its key, looking for data in return in a loop, when there is data, it puts the element document.getElementById("selectedEvent") .innerHTML with the response text. In the button however, it sends a post that will put text into server object's key of the tab that shares the inputted key. That combination of scouting data and placing data makes it work like a charm

backend.js

var http=require('http')
var fs=require('fs')
function randomChar(){
  var m=Math.random; var f=Math.floor
  var arr=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
  0,1,2,3,4,5,6,7,8,9,"!","@","$","&","*","(","-","_","=","+","[","]","'","~"]
  var newChar=""
  for(var i=0; i<f(m()*100+20); i++){newChar+=arr[f(m()*arr.length)]}
  return newChar
}
var obj={}
function frontEnd(){
  var specialChar=randomChar(); obj[specialChar]=""
  return `<script>window.key="${specialChar}"</script>`+
  fs.readFileSync(__dirname + '/frontend.html')
  .toString().split('')
  .map(a=>{if(a=="\\"){return(specialChar)}return(a)})
  .join('')
}
//server stuff below
var server=http.createServer((req,res)=>{
  if(req.method=="GET"){res.write(frontEnd())}
  else if(req.method=="POST"){
    if(req.headers.pw&&req.headers.inp){
      if(obj[req.headers.pw]!=undefined){obj[req.headers.pw]=req.headers.inp}
    }
    else if(req.headers.receive&&req.headers.key){
      res.write(obj[req.headers.key]||"")
    }
    else if(req.headers.end=="yes"&&req.headers.key){
      delete(obj[req.headers.key])
      console.log(`a key ${req.headers.key} was deleted`)
    }
  }
  res.end()
})
server.listen(8080)

frontend.html

<html>
<h3>for this tab manipulation, so that you cannot edit all tabs connected to this site, you need to know the <bold>KEY</bold> of someone else's tab</h3>
<p>your key is <bold>\</bold></p>
<input placeholder="enter other tab's key here" id="inp" />
<select id="currentEvent">
  <option value="" disabled selected>Current Event</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<button type="button" onclick="GetSelectedText()">Push Changes</button>
<h4 id="selectedEvent"></h4>
<script>
//loop checking for incoming changes (empty input("") means it would me treated as no input)
var select=document.getElementById("selectedEvent");
(async()=>{
  var options={
    method:'POST',
    headers:{'receive':'true','key':key}
  }
  while(true){
    let x=await fetch(location.href,options)
    let text=await x.text()
    if(text){select.innerHTML=text}
  }
})()
//now for the button
function GetSelectedText() {
  var e = document.getElementById("currentEvent");
  var result = e.options[e.selectedIndex].text;
  select.innerHTML = result;
  //sends an outgoing request that will edit the other tab
  var xhr=new XMLHttpRequest()
  xhr.open('POST',location.href,true)
  var inp=document.getElementById('inp')
  xhr.setRequestHeader('pw',inp.value)
  xhr.setRequestHeader('inp',result)
  xhr.send()
}
//now for a listener that will attempt to delete the key from the server as it closes
window.onbeforeunload = async function(){
  await fetch(location.href,{method:'POST',headers:{'end':'yes'}})
  //put return in front of the 'await' word in line above
  //and a confirm would appear when you try to close
}
</script>
</html>

Upvotes: 2

Related Questions