-
Notifications
You must be signed in to change notification settings - Fork 6
Example Broadcast
This example shows how to broadcast messages to multiple connections. It consists of 4 files.
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);
}
}
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());
}
}
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>
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>