Integration of websocket communication

Basic information for integrating websocket services into online projects that do not have websocket protocol support.

Communication with control API and websocket infrastructure

Data messages are sent from the web server through standard HTTP requests to the control API, where they're processed by server services, which communicate in real time via websockets with connected clients (see the following diagram).

REST API to WebSocket - Communication with websocket infrastructure via REST API

Server side - PHP control API

Simple PHP Rest2WebSocket class for communication with control API

All code examples use the simple PHP Rest2WebSocket class, which simplifies websocket integration on the server side.

Basic PHP code for communication with control API and services

Example below shows how to work with a simple PHP class (Rest2WebSocket) that communicates with the REST API and the websocket infrastructure (in this example, it sends web notification to the client browsers via websocket channel).

/**
 *  Create and configure new instance of Rest2WebSocket API connector
 *	
 *  @param string $configURI    URI of config file for connector
 */
$rest2WebSocket = new Rest2WebSocket( dirname(__FILE__)."/config.php" );

/**
 *  Call the service and action of the remote API and pass the data
 *	
 *  @param $apiService          Target websocket service called via API
 *  @param $apiAction           Action of API for processing of data
 *  @param $requestData         Request data for remote websocket services
 */
$responseData = $rest2WebSocket->call( "webntf" , "send.to.channel", [
    "domain" => "www.websocket.cz"
    , "target" => "www.websocket.cz"
    , "message" => [
        "title" => "Test websocket notification"
        , "body" => "Notification text ..."
    ]
]);

/**
 *  Response data processing
 */
if (isset($responseData["status"]) && $responseData["status"] == "OK") {
    // TODO own code
}

Client side - Javascript applications

Example of a basic javascript application for processing notifications

In the example below, you can see a small application based on a simple javascript websocket library that will make it easier for you to develop your own applications with websocket communication. In this case, it will process and display a web notification message sent via the websocket (see above).

/**
*   WebSocket.CZ - Web Notifications
*   Basic javascript application for real time web notification
*/
window.simpleWebNtf = new SimpleDataAPP({
    
    appName: "webntf"
    , svcName: "svc/webntf"
    , wssGateway: "apps.dataapps.cz/ws/gtw/"
    , docCookie: new SimpleDocCookie()
    
    /* THE IDENTIFIER OF YOUR WEBSOCKET SERVER (contact service provider) */
    , wssKey: ".........."
    
    /**
     *    Event handler that is fired when a websocket connection is opened
     */
    , onOpen: function(evn){
        this.initSvc({ target:this.svcName , token:this.getToken() });
        this.wsPing();
    }
    
    /**
     *    Event handler that fires when a message is received from websocket
     */
    , onData: function(msg){
        if ( msg.header.type != undefined && msg.header.type == "message" ) {
            /* WRITE HERE YOUR CODE FOR DISPLAY NOTIFICATION (see example) */
            console.log(msg.body.data);
        }
    }
    
    /**
     *    Event handler that is fired when the application is initialized
     */
    , onInit: function(app){
        this.setToken(function(){ return(app.docCookie.get("WSGSESSID")); });
        this.wsOpen(this.wssGateway + this.wssKey + "/");
    }
    
});

/**
*   Initialize a simple application
*/
window.simpleWebNtf.init();