Simple share text between two different browsers running the same website

Question

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 :)

2 browsers and not 2 tabs.. so it isnt that 1 tab opened another right? — The Bomb Squad, Jan 31 '21 at 22:39
what you meant by showing it on different browser? do u mean live updates, like a server side method ? — Burham B. Soliman, Jan 31 '21 at 22:42
So my use case right now is that I have one tab open in Chrome and the website added to a Browser Source in OBS, which, as far as I know, is equivalent to having the website open in Chrome and Firefox on the same device. I'm not quite sure what the server side method is, but I need the text to show up the same on both browsers opened to the same site. — thesimg, Jan 31 '21 at 22:47
Most likely you will need to have some sort of server running to handle your requests. If you have the tabs open on the same browser, you might want to look at https://stackoverflow.com/questions/28230845/communication-between-tabs-or-windows — knosmos, Jan 31 '21 at 22:51
Yeah, they're not in the same browser. What's the simplest server type thing that I could use, as I only need to store one line of text? — thesimg, Jan 31 '21 at 23:04
If you know Python, it would be pretty easy to set up a Flask server. — knosmos, Jan 31 '21 at 23:23
I'm don't really know Python, would a Flask server be simple enough to set up with very minimal knowledge of Python? — thesimg, Feb 01 '21 at 00:04

score 2 · Accepted Answer · answered Feb 01 '21 at 00:04

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>

Simple share text between two different browsers running the same website

1 Answers1