Configure WebSocket Support

Objective
Prerequisites
Configuration
Configuration Sequence
Configure WebSocket Using HTTP Load Balancer
Configure WebSocket Using Virtual Host
Create Endpoint and Cluster
Create Route with Websocket
Create Advertise Policy and Virtual Host
Concepts
API References

Objective

This document provides instructions on how to enable WebSocket-based communication for your application. WebSocket provides a persistent connection between client and server over HTTP or HTTPS.

Using the instructions provided in this guide, you can enable WebSocket connection for your services provisioned using an HTTP load balancer or virtual host. For more information, see Virtual Host.

Prerequisites

The following prerequisites apply:

F5® Distributed Cloud Account

Note: If you do not have an account, see Create an Account.

An HTTP load balancer or a virtual host acting as a proxy for a service

Note: See HTTP Load Balancer and Create a Virtual Host for instructions on creating load balancer and virtual host respectively.

Configuration

Configuration Sequence

You can use HTTP load balancer or virtual host to configure WebSocket support for your application.

In case of HTTP load balancer, enabling WebSocket support is part of HTTP load balancer configuration.
Enabling WebSocket-based communication in case of virtual host requires performing the following sequence of actions:

Phase	Description
Create Endpoint and Cluster	Create objects required for virtual host.
Create Route with Websocket	Create route enabled for WebSocket communication.
Create Advertise Policy and Virtual Host	Create advertise policy and virtual host with the route and policy.

Note: You can enable WebSocket communication while creating the route, or you can edit an existing route to enable WebSocket support.

Configure WebSocket Using HTTP Load Balancer

Perform the following steps to create a route enabled with WebSocket support for HTTP Load Balancer:

Step 1: Log into Console and go to HTTP load balancer settings.

From the Console homepage, click on Multi-Cloud App Connect service.

ConsoleHomepage — Figure: Console Homepage

Select your namespace.
Navigate to Manage > Load Balancers > HTTP Load Balancers.
Click ... for your load balancer and select Manage Configuration to open load balancer configuration form.
Click Edit Configuration option located in the top right corner of the form.

Step 2: Start configuring routes.

Go to Routes Configuration, enable Show Advanced Options, and do the following:

Click Configure under the Routes option.
Click Add Item in the Routes page. This opens route configuration form. By default, a simple route configuration loads.
Enter required fields such as HTTP method, path match, and option associated to the path match selected (such as prefix, path, or regex).
Click Add item in Origin Pools section, select an origin pool in the Origin Pool field, and click Add Item in the origin pools configuration form.

SimpleRoute — Figure: HTTP Load Balancer Simple Route

Scroll down and click Configure for the Advanced Options field. This opens the advanced route configuration options.
Scroll down to Protocol Upgrades section, click on the Enable/Disable Websocket Upgrade option, and select Enable WebSocket option.

LBWebSocket — Figure: HTTP Load Balancer WebSocket Configuration

Enable the Use Websocket option.
Scroll down and click Apply.

Step 3: Enable WebSocket Communication.

Click Add item in the simple route page. Click Apply in the routes list page.
Click Save and Exit in the load balancer configuration page.

Configure WebSocket Using Virtual Host

Create Endpoint and Cluster

F5 Distributed Cloud virtual host requires an endpoint and associated cluster where the service is available or discovered. For instructions on creating endpoint and cluster, see Create Endpoint and Create Cluster respectively.

Create Route with Websocket

Perform the following steps to create a route enabled with WebSocket support.

Step 1: Navigate to the Routes page.

Select the Multi-Cloud App Connect service.
Select the desired namespace from the Namespace drop-down menu.
Navigate to Manage -> Virtual Host -> Routes.

Step 2: Begin to add a route.

Click Add Route.
Enter a name for the route. Optionally set labels and add a description.
In the List of routes section, click Configure.
Click Add Item to add a new route to the list.
In the Actions section, make sure Destination List is set as the action, and then click Configure.

Step 3: Set the destination origin pools (clusters).

Click Add Item in the Destination Origin pools (clusters) list under the Origin Pools and Wights section.
Select an existing cluster from the Cluster drop-down list, or click the create a new cluster at the bottom of the drop-down list.
Enter a weight for this cluster if there are to be multiple clusters.
Click Add Item to apply the cluster to the destination list.

cluster cfg — Route Destination Cluster Configuration

Step 4: Configure the destination actions.

In the Destination Actions section, turn on the Show Advanced Fields toggle.
Click Configure in the Websocket Configuration section.
Turn on the Show Advanced Fields toggle in the Websocket Configuration section.
Check the Use Websocket checkbox and click Apply.
Optionally, enter a value in milliseconds in the Timeout field. The WebSocket connection gets closed after the set time period of idle time.
Optionally, configure a retry policy. The default is 1 retry with no conditions or changes.

WebSocket — Figure: Websocket Configuration Option in Route

Step 5: Complete the route.

Click Apply to save the destination list.
Click Add Item to save the actions.
Click Apply to save the list of routes.
Click Save and Exit to save the route.

Note: Configure all the other fields as necessary. For information on all fields, see Create Route.

Create Advertise Policy and Virtual Host

Distributed Cloud virtual host requires an advertise policy to specify where and how the service is advertised.

Step 1: Create an advertise policy.

Use the instructions in the Create Advertise Policy chapter of Create and Advertise a Virtual Host guide.

Step 2: Create a virtual host of type HTTP Proxy or HTTPS Proxy.

Create a virtual host of type HTTP Proxy or HTTPS Proxy. Use the instructions in the Create Advertise Policy chapter of Create and Advertise a Virtual Host guide.
Apply the route created in the Create Route with Websocket chapter.

VhostRoute — Figure: Add Websocket Enabled Route to Virtual Host