Skip to content

Example Broadcast

Igal edited this page Apr 9, 2017 · 11 revisions
/** 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 */
component {

  this.name = "websocket_broadcast";

  function onApplicationStart(){

    Application.objects.connMgrBroadcast =
        WebsocketRegister("/ws/broadcast", new BroadcastListener());
  }
}
<!--- 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>
<!--- 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");
  }
}
</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>

Clone this wiki locally