javascript - Websocket Use Case - Uncaught TypeError: Cannot set property 'value' of null at WebSocket.myWebsocket.onmessage

Question

I am establishing a websocket connection on the web app client side via JavaScript to receive stock pricing data from my broker's server. I need to store the onmessage JSON packet responses in variables that I can use on the C# code behind for further processing, storage into an Azure SQL Database, calculations, etc. From everything I can find online, I understand in order to store client-side JavaScript variables for accessibility on the code behind needs to be done through a server control - specifically a hidden control from what all posts direct to as a solution.

When I have any of the hidden controls set to runat="server" for use in the myWebsocket.onmessage server response function, it always throws this error in the Chrome dev console and fails to store any data. The ID placement is at the beginning of the page and the script is last, so it's not the ID placement as I've seen in other online comments to resolve error type - Uncaught TypeError: Cannot set property 'value' of null (none of which are related to websockets) - and seems to be specific in using with a websocket connection.

For example, if I remove runat="server" from id="Hidden1" no errors are thrown when I establish the websocket connection, but then I cannot access the JSON response data on the code behind side. Any advice on how to accomplish getting onmessage JSON responses to C# code behind would be greatly appreciated.

Uncaught TypeError: Cannot set property 'value' of null at WebSocket.myWebsocket.onmessage

    <input id="Hidden1" type="hidden" runat="server"/>        
    <br />
    <input id="Text1" type="text"/>  
    <br />
    <p id="connection"></p>
    <p id="data"></p>  
    <br />
    <asp:HiddenField ID="hiddenField" runat="server"/>


<script type="text/javascript">

    myWebsocket.onopen = function () {
        document.getElementById('connection').innerHTML = "Websocket connected";
    };

    myWebsocket.onclose = function () {
        console.log("CLOSED");
        document.getElementById('connection').innerHTML = "Websocket closed";
    };  

    myWebsocket.onmessage = function (evt) {

        console.log(evt.data);

        document.getElementById('data').innerHTML = evt.data;  //shows the JSON response on UI side, but can't access on code behind

        document.getElementById('Text1').value = evt.data;  //shows the JSON response on UI side, but can't access on code behind

        document.getElementById('hiddenField').value = evt.data;  //can't seem to pass these response data to the code behind with hidden input or HiddenField...        

    };

UPDATE (solved): for any who may be hitting the same wall, I found this implementation to work well for passing JavaScript variable data to a Web Service and executing database storage from there which I can then work with in the code behind:

<script src="Scripts/jquery-3.5.1.js"></script>

<script type="text/javascript">
    
    //called from onmessage
    function data() {

        var responseText = { Response: $('#response').val() };

        $.ajax({
            url: 'DataService.asmx/StoreData',
            method: "POST",
            contentType: 'application/json; charset=utf-8',
            data: '{response:' + JSON.stringify(responseText) + '}',
            success: function () {
                alert("success");
            },
            error: function (err) {
                console.log(err);
            }
        });
    }

</script>

<br />
<br /> 
<input id="response" type="text" />

Answer 1

等待大神答复