Realtime with WebSockets - Demo Code

Presented By Giancarlo Gomez

This is the demo code used in my WebSockets presentation.

• angular-to-coldfusion
  The Angular Example I gave at CFSUMMIT2018. View README in directory on how to run.
• assets
  The CSS and JavaScript files that are shared by the live demo UIs
  • css
  • js
• chat
  The Chat demo
• html-to-coldfusion
  The HTML to ColdFusion WebSocket example.
• live-demos
  • demo-01
    Minimal requirements
  • demo-02
    AdvancedSocket Example
• other-demo-files
  • socket.io ( node.js required )
    This is the code for the socket.io server that will run on port 8080. Remember to do an npm install after downloading and then run node server.js to start.
  • socket.io_site
    The example site using the socket.io server to connect, send and receive messages both from the client and the server. This should be mapped to its own site or ran as a separate server using CommandBox.
• swift-to-coldfusion
  The native iOS app example shown in CFSUMMIT2018. Getting this running is a bit more cumbersome and requires working with the Starscream libray for using WebSockets in Swift. The code here includes the Main Storyboard and the main View Controller for reference.

Running Demos ( CommandBox, Socket.IO and )

You can easily run the demos using CommandBox. Simply clone this repo to your local machine and execute the box start command at the root folder for the main app and in the other-demo-files\socket.io_site folder for the demo of using Socket.IO instead of ColdFusion's WebSockets.

The default server.json is set to use ColdFusion 2021. If you use this one make sure to install the websocket package using cfpm and/or thru the administrator. If you choose to do it from the CLI simply type the following while in CommandBox and/or the Server's bin folder

cfpm install websocket

Lucee server is not supported for these examples. If using Lucee, I recommend looking at the socket.io example or using an existing service for WebSocket communication.

If you want to run other version's other than 2021 you can do so by starting the server as follows:

# ColdFusion 2018
box server start serverConfigFile=server.2018.json 
# ColdFusion 2016
box server start serverConfigFile=server.2016.json 
# ColdFusion 11 ( make sure to point to supported JDK if system version not supported )
box server start serverConfigFile=server.11.json 

Application.cfc Settings To run this code you must set 2 request variables in Application.cfc, these variables are for the site ran from other-demo-files\socket.io_site

request.socketio_server = "http://127.0.0.1:51095/";
request.socketio_broadcast = "http://127.0.0.1:51095/broadcast/";

Socket.IO
As stated above you will need to run node server.js command at the other-demo-files\socket.io folder.

HTML To ColdFusion Demo
Once you have configured both of your servers, make sure to go into the html-to-coldfusion\script.js and set the values to the WebSocket Port used by ColdFusion and the Path and Port to your server.

var cfws = new cfwebsocket(
    // appName for the server we are interacting => live-demos\demo-01
    'websockets_demo1',
    // the name of the channel we are subscribing to
    'demo',
    // the file to run in case a ColdFusion request has not execute yet
    'http://localhost:50320/live-demos/demo-01/runme/',
    // the global function to execute to parse a message received
    parseMessage,
    // the global function to execute when we subscribe
    subscribed,
    // if we are using the proxy method
    false,
    // the Port used by ColdFusion for WebSockets ( if not included it uses defaults defined in cfwebsocket.js)
    8581,
    // the server we are connecting to
    'localhost',
    // if the connection should be secure
    false
);

Angular To ColdFusion Demo
Same as above, simply open the angular-to-coldfusion\src\app\app.component.ts file and set the attributes based on your ColdFusion instance.

this.cfwebsocket = new window['cfwebsocket'](
    // appName for the server we are interacting => live-demos\demo-01
    'websockets_demo1',
    // the name of the channel we are subscribing to
    'demo',
    // the file to run in case a ColdFusion request has not execute yet
    'http://localhost:50320/live-demos/demo-01/runme/',
    // the global function to execute to parse a message received
    // we pass entire object and allow defaults to pass back to correct function
    this,
    // the global function to execute when we subscribe
    // we pass entire object and allow defaults to pass back to correct function
    this,
    // if we are using the proxy method
    false,
    // the Port used by ColdFusion for WebSockets ( if not included it uses defaults defined in cfwebsocket.js)
    8581,
    // the server we are connecting to
    'localhost',
    // if the connection should be secure
    false
)

Conferences

• NCDevCon 2016
• Dev.Objective 2016
• ColdFusion Summit 2016
• ColdFusion Summit 2017
• ColdFusion Summit 2018

Slides

All slides can be found in the ColdFusion Realtime With WebSockets Repo