'Go write to specific text areas through Web Socket

I am trying to connect a web client to a web socket server using Go. Once connected the communication will be from server to client but I need to distinguish the 2 text areas to receive specific text when received by underlying go code happening in the background.

Here is the go code below, using gorilla :

http.HandleFunc("/echo", func(w http.ResponseWriter, r *http.Request) {
    conn, _ := upgrader.Upgrade(w, r, nil) // error ignored for sake of simplicity

    for {
        // Read message from browser
        msgType, msg, err := conn.ReadMessage()
        if err != nil {
            return
        }
    
        // Print the message to the console
        fmt.Printf("%s sent: %s\n", conn.RemoteAddr(), string(msg))
    
        //msg = []byte(tally.OnAir) ignore this for now
        // Write message back to browser
        if err = conn.WriteMessage(msgType, msg); err != nil { //if err = conn.WriteMessage(msgType, []byte("test")); err != nil {
            return
        }    
    }
})

Here is the html, can see both button click sends on the server terminal:

body {
     background-color: #000000;
}
textarea {
    font-family: Arial;
    font-size: 300px;
    color: #ff2600;
    font-weight: bolder;
    background-color: rgb(43, 41, 41);
    text-align: center;
    padding:10px;
    width:100%;
    height:35%;
    margin: 0 0 -8px -1px;
    border-style: outset;
    border-width: 10px;
    border-color: red;
}     

And the associated javascript:

var input1 = document.getElementById("input1");
var output1 = document.getElementById("output1");
var socket = new WebSocket("ws://localhost:8080/echo"); //////
var input2 = document.getElementById("input2");
var output2 = document.getElementById("output2");
//var socket2 = new WebSocket("ws://localhost:8080/echo"); //////
                
socket.onopen = function () {
    output1.innerHTML = "On Air Tally\n"; //output.innerHTML += "Status: Connected and You're So Good !!!\n";
    output2.innerHTML = "Preset Tally\n"; // output2.innerHTML = "Preset Tally\n";
};        
    
socket.onmessage = function (e) { //socket.onmessage = function (e) {
    output1.innerHTML =  e.data + "\n"; //output.innerHTML += "Server: " + e.data + "\n";
    output2.innerHTML =  e.data + "\n";
};
/*
   socket.onmessage = function(event) {
   //create a JSON object
          var jsonObject = JSON.parse(event.data);
          var onAirTally = jsonObject.onair;
          var PresetTally = jsonObject.preset;
          output1=onAirTally;
          output2=PresetTally; 
    };
    */

function send(x) {
    socket.send(x); //socket.send1(input1.value);
    input1.value = "";
    input2.value = "";
}       

So how do I write to output1 and output2 individually?

My thought was to use a struct to load the background text in and send that and parse the 2 fields to output1 and output2.

Thanks for some help!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source