CODEWITHSUNDEEP
jquerywebsocketcoldfusion
Paolo Broccardo
Paolo Broccardo

Reputation: 1744

ColdFusion Websocket subscribe() JavaScript not working when called on page load

I have a basic ColdFusion page that uses websockets to subscribe to a channel, and then display/publish messages, i.e. a very crude chat application.

The code can be seen below.

Here's the problem: When I click the Subscribe button and call SubscribeToChannel(), the user subscribes to the channel successfully and everything works perfectly. When I Send a Message, the websocket publishes it just fine. (As indicated by the comment numbered 2)

However, when I call the SubscribeToChannel() on document ready, the function gets called, but the user does not appear to be subscribed, as every time I publish a message, it does not appear. (As indicated by the comment numbered 1)

So, SubscribeToChannel() works when called via the button click, but not the $(function) document ready process. Why?

I would like the user to be subscribed on page load, not have to click a button to initiate the subscription.

(Please note, I am NOT looking to use the SubscribeTo attribute of the cfwebsocket tag, as it does not allow for custom parameters. )

<cfwebsocket
  name="chatWS"
  secure="true"
  onMessage="messageHandler"/>
<doctype html>
<html>
    <head>
        <script
            src="https://code.jquery.com/jquery-3.1.0.min.js"
            integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
            crossorigin="anonymous">
        </script>
        <script type="text/javascript">

            function subscribeToChannel()
            {
                alert('subscribing');
                chatWS.subscribe("chat", messageHandler);
            }

            messageHandler =  function(aEvent,aToken) {
                if (aEvent.data) {
                    $( "#myChatArea" ).append( aEvent.data  + "<br />");
                }
            }

            sendMessage = function() {
                var msg2Send = $( "#myMessage" ).val();
                if (msg2Send) {
                    chatWS.publish("chat", msg2Send);
                }
            }

            $(function(){
                <!--- 1) Subscribe DOES NOT WORK when called on page ready --->
                subscribeToChannel();
            });

        </script>
    </head>
    <body>
        <div id="myChatArea"><cfoutput>#Application.chatHistory#</cfoutput></div>
        <input type="text" id="myMessage" /><input id="myButton" type="button" value="Send Message" onClick="sendMessage()" />
        <input id="subscribe" type="button" value="Subscribe" onClick="subscribeToChannel()" />
        <!--- 2) Subscribe WORKS when called via this button --->
    </body>
</html>

Upvotes: 4

Views: 596

Answers (1)

Miguel-F
Miguel-F

Reputation: 13548

promoted from the comments

Have you tried using the onOpen attribute of the cfwebsocket tag? I'm thinking the DOM may be loaded but the websocket connection may not be established yet. The onOpen attribute is supposed to give you a way of calling a JavaScript function after the websocket establishes a connection.

From the documentation:

onOpen - Optional - The JavaScript function that is called when the WebSocket establishes a connection.

Adding to your code example:

<cfwebsocket
  name="chatWS"
  secure="true"
  onMessage="messageHandler"
  onOpen="openHandler" />
<doctype html>
<html>
<head>
    <script
        src="https://code.jquery.com/jquery-3.1.0.min.js"
        integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
        crossorigin="anonymous">
    </script>
    <script type="text/javascript">

        function subscribeToChannel()
        {
            alert('subscribing');
            chatWS.subscribe("chat", messageHandler);
        }

        messageHandler =  function(aEvent,aToken) {
            if (aEvent.data) {
                $( "#myChatArea" ).append( aEvent.data  + "<br />");
            }
        }

        openHandler =  function() {
            subscribeToChannel();
        }


       // the rest of your code here ...

Upvotes: 3

Related Questions