Skip to content

Example Broadcast

Igal edited this page Apr 10, 2017 · 11 revisions

This example shows how to broadcast messages to multiple connections. It consists of 4 files.

BroadcastListener.cfc

This is the main file in the example. It implements two methods of the Listener Component API:

onOpen() - where the incoming connection subscribes to the channel named #Application.applicationName#

onMessage() - where a reference to the ConnectionManager is retrieved and its broadcast() message is called to send the message to all of the subscribers.

/** BroadcastListener.cfc */
component {

    this.channel = Application.applicationName;

    function onOpen(websocket, endpointConfig, sessionScope, applicationScope){

        // subscribe the incoming connection to the channel
        arguments.websocket.subscribe(this.channel);
    }

    function onMessage(websocket, message, sessionScope, applicationScope){

        var connMgr = arguments.websocket.getConnectionManager();
        var message = "Message from Client (#arguments.websocket.getId()#):" 
                          & " [#arguments.message#]";

        // broadcast the message to all subscribers of the channel
        connMgr.broadcast(this.channel, message);
    }
}

Application.cfc

Where the BroadcastListener is registered to the endpoint, and a reference to the ConnectionManager is stored in Application.objects.connMgrBroadcast for future use in CFML scripts.

/** Application.cfc */
component {

    this.name = "websocket_broadcast";

    function onApplicationStart(){

        Application.objects.connMgrBroadcast =
            WebsocketRegister("/ws/broadcast", new BroadcastListener());
    }
}

broadcast.cfm

This script has a simple HTML form, which when submitted broadcasts a message to all of the subscribers via the ConnectionManager that was set to Application.objects.connMgrBroadcast in Application.cfc

<!-- broadcast.cfm !-->
<cfscript>
if (CGI.REQUEST_METHOD == "POST"){

    if (!isEmpty(Form.message ?: "")){

        msg = "Message from Server (#CGI.SCRIPT_NAME#): " & Form.message;

        Application.objects.connMgrBroadcast
            .broadcast(Application.applicationName, msg);

        echo("<p>Broadcasted message from Server");
    }
}
</cfscript>

<h1>Use the following Form to Broadcast a Message</h1>
<form method="POST">
    <div>Message from Server:</div>
    <div><textarea name="message" rows="6" cols="80"></textarea></div>
    <div><button type="submit" style="padding: 1em;">Broadcast Message</button></div>
</form>

index.cfm

This script sets up the JavaScript client. There is nothing special or specific to the extension in the script.

<!-- index.cfm !-->
<h1>WebSocket Broadcast Example</h1>

<cfscript>
    endpoint = "/ws/broadcast";

    /** the following was set up in onApplicationStart()
    Application.objects.connMgrBroadcast =
        WebsocketRegister("/ws/broadcast", new BroadcastListener()); //*/
</cfscript>

<p class="mt2m">Sever side code:
<p>
<code class="block"><cfset echo(htmlCodeFormat('
<cfscript>
    endpoint = "/ws/broadcast";

    /** the following was set up in onApplicationStart()
    Application.objects.connMgrBroadcast =
        WebsocketRegister("/ws/broadcast", new BroadcastListener()); //*/
</cfscript>
'))></code>

<cfsavecontent variable="js">
    <script type="text/javascript">
        var endpoint = "<cfset echo(endpoint)>";
        var protocol = (document.location.protocol == "https:") ? "wss://" : "ws://";
        var url = protocol + document.location.host + endpoint;

        var wsbroadcast = new WebSocket(url);

        var log = function(evt){ console.log(evt); }
        wsbroadcast.onopen    = log;
        wsbroadcast.onmessage = log;
        wsbroadcast.onerror   = log;
        wsbroadcast.onclose   = log;
    </script>
</cfsavecontent>

<cfset echo(js)>

<p class="mt2m">Below is the JavaScript code that was used to set up the <code>wsbroadcast</code> client:
<code class="block"><cfset echo(htmlCodeFormat(js))></code>

<p class="mt2m">Open Developer Tools and send a test message using the <code>wsbroadcast</code>
  object, e.g.
<p>
<code class="block">
wsbroadcast.send("Hello Lucee WebSockets at " + (new Date()).getTime());
</code>

<style>
    code   { background-color: #f0f0f0; white-space: pre-wrap; }
    .block { display: block; }
    .mt2m { margin-top: 2em; }
</style>
Clone this wiki locally