DEV Community: Ahmed Hesham

Full Duplex Communication Between Web App and Desktop Application Using WebSocket

Ahmed Hesham — Tue, 10 May 2022 17:38:39 +0000

Introduction

One of the limitations of web apps is hardware access. If you use some special hardware, communication might be difficult if not impossible.
In this case, the client will need to install a software to handle the communication between the web app and the hardware.

An example of this is when you get a new laptop and then visit the manufacturer website to check for driver updates. Most often, you will be asked to install a software that will check your laptop; then, the results will be displayed on the website.

In our case, this software acts as a WebSocket server, and the browser is the WebSocket client that initiates the session.

Depending on your design, the software might also send HTTP requests to the backend server.

Do You Really Need It?

This design should be used only when necessary; we are adding a component to our system which increases the complexity, and the users need to install a software to use our web app which raises the question whether we should use a web app in the first place.

This post covers most JavaScript APIs for communicating with hardware devices, check them first before attempting the WebSocket approach.

Overview

We will create a simple web page that will connect to a WebSocket server running on the client Windows machine. When a session is open, we can exchange messages between the web page and the server.

The WebSocket client is implemented with WebSocket API.
The WebSocket server is a console application written in .Net Framework, and we use SuperSocket for the WebSocket server implementation.

WebSocket Client

We make an input to write messages, and a div to display received messages.

<input id="input" type="text">
<div id="log"></div>

This is a simple function that creates the WebSocket client instance, and assigns event listeners.

function createWebSocket() {
    const webSocket = new WebSocket('ws://127.0.0.1:85'); // In the constructor we use the loopback address and a free port

    webSocket.onopen = () => {
        webSocket.send('Connected');

        const input = document.getElementById('input');
        input.onkeydown = e => {
            if (e.code === 'Enter') {
                webSocket.send(input.value);
                input.value = null;
            }
        }
    }

    webSocket.onmessage = msg => {
        document.getElementById('log').innerHTML += `Server: ${msg.data} <br/>`;
    }

    return webSocket;
}

In the following code:

We keep attempting to connect to the WebSocket server.
There is no way to reconnect to the server when a session is closed, instead we create a new client instance.
A session gets closed for several reasons, but here it happens because the server is unreachable, most likely because the server hasn't started yet.

window.onload = async () => {
    var webSocket = createWebSocket();

    while (webSocket.readyState !== webSocket.OPEN) {
        await new Promise(res => setTimeout(res, 1000)); // wait 1 second

        if (webSocket.readyState === webSocket.CLOSED)
            webSocket = createWebSocket();
    }
}

WebSocket Server

Create a Console Application
Install both SuperSocket.Engine and SuperSocket.WebSocket; you can get them from NuGet.
Create a server instance and add event listeners. Notice how similar it is to the client (JavaScript) code.

static void Main()
{
    using WebSocketServer server = new();
    WebSocketSession currSession = null;

    server.NewSessionConnected += session =>
    {
        currSession = session;
        currSession.Send("Connected");
    };

    server.NewMessageReceived += (session, message) =>
    {
        Console.WriteLine($"Client: {message}");

        if (message == "close")
            session.Close();
    };

    server.SessionClosed += (_, reason) => Console.WriteLine($"Server: Connection closed. Reason: {reason}, press 'Enter' to exit.");

    // In the ServerConfig, the default IP value is the localhost
    ServerConfig config = new()
    {
        Port = 85, // same port number as in client
        MaxConnectionNumber = 1 // depending on you design, there might be more than one connection
    };

    server.Setup(config);
    server.Start();

    while (true)
    {
        string input = Console.ReadLine();

        if (currSession != null && !currSession.Connected)
            break;

        if (currSession != null)
            currSession.Send(input);
        else
            Console.WriteLine("Server: No session");
    }
}

Let's Test It

It works great!

Even though we are using non-secure protocol (ws) instead of the secure protocol (wss), and we are connecting from a secure context (https), the connection is not blocked.
That's because locally-delivered resources are considered secure, however http://localhost is not considered secure by older browsers, because it is not guaranteed to map to loopback address.
That's why although ws://localhost works fine with newer browsers, it's recommended to use ws://127.0.0.1

Deploy Web App to IIS with Zero Downtime in Visual Studio

Ahmed Hesham — Sun, 17 Apr 2022 09:26:01 +0000

Introduction

In my previous post, I wrote about how to deploy a web app from Visual Studio to IIS using Web Deploy tool. One problem you might have noticed, is the downtime that occurs during deployment.
So in this post, I'll write about how to use Blue-Green Deployment in IIS to achieve zero downtime deployment.

We will need at least IIS 7, in order to install Application Request Routing (ARR).

Basic Idea
Steps
Scripts
Remote Access
Integration with Visual Studio

Basic Idea

We will create two server, blue and green. One of them will be accessible through public network for our clients, and the other only through the private network for testing purposes.

Deployment is done in these steps:

We will deploy our new web app to the private network server.
Make sure it is working as intended.
Make the private network server accessible to public network, now both servers can receive clients requests.
Gracefully shutdown the original public network server; now it can't receive new requests but will finish its current requests.
Make the original public network server accessible only to private network, then turn it on.
Now the green and blue servers are switched, and in each deployment they will get switched again.

Steps

1. Download and Install Web Platform Installer (WebPI)

It's recommended to use WebPI instead of directly downloading tools; because WebPI also gets the dependencies and configures these tools depending on the current system settings.

Web Platform Installer

2. Get Application Request Routing (ARR)

Open WebPI directly (start menu for example), not through IIS Manager.
Search for ARR, then install.

3. Create the Blue and Green Servers

Make three websites, one on port 80 that will receive client requests, we will call it server-farm. The other two are bound to other ports, say 8001 and 8002, and in this example they are called blue and green respectively.

The two websites contain one file content.html which either has blue or green written in it.

We will also add those websites to the hosts file and make them point to localhost.
In Windows, the hosts file is in: C:\Windows\System32\drivers\etc\hosts

Let's test it.

4. Configure the Server Farm

Create new server farm, and add two servers to it with the port numbers we just assigned to the blue and green websites.

You will get a prompt suggesting to add rewrite rules, select no; we will add our own rewrite rules later.

Things should look like this:

5. Configure Health Test

The health test will decide which server receives the clients requests.
First create an html file is-up.html in each website, beside the content.html file. One of them will contain 1, and the other 0.

Let's test it.

Go to our server farm, and configure the health test:

URL will point to the is-up.html file.
Interval will check for response every second.
Response Match is what we consider healthy—i.e., which server receives the requests.

Verify.

Check Monitor and Management in the server farm.

6. Logging Problem

The health test makes a request to each server every second, and these requests are logged, which is not desirable.

To solve this problem, we will need to add an entry excluding the is-up.html file from the logs in the applicationHost.config file of the IIS. As far as I know, this is not possible through the IIS Manager.

In Windows, the applicationHost.config file is located in: C:\Windows\System32\inetsrv\config\applicationHost.config

Add this code to the end of the applicationHost.config file.



    <location path="blue/is-up.html">
        <system.webServer>
            <httpLogging dontLog="true" />
        </system.webServer>
    </location>
    <location path="green/is-up.html">
        <system.webServer>
            <httpLogging dontLog="true" />
        </system.webServer>
    </location>

This is how the end of the applicationHost.config file should look like.

7. Add URL Rewrite Rules

URL Rewrite is used to change the request URL according to the rules you specify.

We will use this module to route requests to our server farm.
If you installed ARR using WebPI, URL Rewrite also gets installed.

From the main node in the IIS Manager, select URL Rewrite, then add a Blank rule.

The pattern will match any URL: .*

Add a condition for the port to be 80

The Action type will be: Route to Server Farm

At the end, things will look like this:

Let's test it.

If we switch the 0 and 1 in the is-up.html files

Now thigs are set up. Next, we will write some scripts to automate the deployment process.

Scripts

We can use PowerShell to automate some processes.

Get Server Farm Object



function get-webfarm {
    param($webFarmName)

    $assembly = [System.Reflection.Assembly]::LoadFrom("$env:systemroot\system32\inetsrv\Microsoft.Web.Administration.dll")
    $mgr = new-object Microsoft.Web.Administration.ServerManager "$env:systemroot\system32\inetsrv\config\applicationhost.config"
    $conf = $mgr.GetApplicationHostConfiguration()
    $section = $conf.GetSection("webFarms")
    $webFarms = $section.GetCollection()
    $webFarms | Where {
        $_.GetAttributeValue("name") -eq $webFarmName
    }
}

To check which server is unhealthy



$webFarmName = "server-farm"

$webFarm = get-webfarm $webFarmName
$unhealthyServer = $webFarm.GetCollection() | where {
    !$_.GetChildElement("applicationRequestRouting").GetChildElement("counters").GetAttributeValue("isHealthy")
}

$unhealthyServer.GetAttributeValue("address")

Switch Blue and Green



$webFarmName = "server-farm"
$addressBlue = "blue"
$addressGreen = "green"
$siteBlue = "http://blue:8001/"
$siteGreen = "http://green:8002/"
$pathBlue = "C:\inetpub\sites\blue"
$pathGreen = "C:\inetpub\sites\green"
$warmUpRequestURL = "content.html"
$healthCheckFileName = "is-up.html"
$healthyResponse = "1"
$unhealthyResponse = "0"

$webFarm = get-webfarm $webFarmName

# Get health check interval
$healthCheckTimeoutS = $webFarm.GetChildElement("applicationRequestRouting").GetChildElement("healthCheck").GetAttributeValue("interval").TotalSeconds

$healthyServer = $webFarm.GetCollection() | where {
    $_.GetChildElement("applicationRequestRouting").GetChildElement("counters").GetAttributeValue("isHealthy")
}

$siteToWarm = $siteBlue
$serverAddressToBringDown = $addressGreen
$pathToBringDown = $pathGreen
$pathToBringUp = $pathBlue

if($healthyServer.GetAttributeValue("address") -eq $addressBlue) {
    $siteToWarm = $siteGreen
    $serverAddressToBringDown = $addressBlue
    $pathToBringUp = $pathGreen
    $pathToBringDown = $pathBlue
}

# Initializing unhealthy server, and making sure it works as intended
Write-Host "Warming up $($siteToWarm)"
Do {
    $time = Measure-Command {
        $res = Invoke-WebRequest "$($siteToWarm)$($warmUpRequestURL)"
    }
    $ms = $time.TotalMilliSeconds
    If ($ms -ge 400) {
        Write-Host "$($res.StatusCode) from $($siteToWarm) in $($ms)ms"
    }
} While ($ms -ge 400)

Write-Host "$($res.StatusCode) from $($siteToWarm) in $($ms)ms"

# If the unhealthy server is fine, start the switching operation
if ($res.StatusCode -eq 200) {
    Write-Host "Bringing $($pathToBringUp) up"
    (Get-Content $pathToBringUp\$healthCheckFileName).replace($unhealthyResponse, $healthyResponse) | Set-Content $pathToBringUp\$healthCheckFileName

    # Wait for health check to mark the server healthy, afterwards we can bring down the other server
    Write-Host "Waiting for health check to pass in $($healthCheckTimeoutS) seconds..."
    Start-Sleep -s $healthCheckTimeoutS

    Write-Host "Draining $($pathToBringDown)"

    $serverToBringDown = $webFarm.GetCollection() | Where {
        $_.GetAttributeValue("address") -eq $serverAddressToBringDown
    }
    $arrToBringDown = $serverToBringDown.GetChildElement("applicationRequestRouting")

    $method = $arrToBringDown.Methods["SetState"]
    $methodInstance = $method.CreateInstance()

    # 0 = Available
    # 1 = Drain
    # 2 = Unavailable
    # 3 = Unavailable Gracefully
    $methodInstance.Input.Attributes[0].Value = 1
    $methodInstance.Execute()

    # loop till there is no requests, then bring the server down
    $currentRequests = $arrToBringDown.GetChildElement("counters").GetAttributeValue("currentRequests")
    While($currentRequests -gt 0) {
        Start-Sleep -s 1
        $currentRequests = $arrToBringDown.GetChildElement("counters").GetAttributeValue("currentRequests")
    }

    Write-Host "Bringing $($pathToBringDown) down"
    (Get-Content $pathToBringDown\$healthCheckFileName).replace($healthyResponse, $unhealthyResponse) | Set-Content $pathToBringDown\$healthCheckFileName

    $methodInstance.Input.Attributes[0].Value = 0
    $methodInstance.Execute()
} else {
    Write-Host "Cannot warm up $($siteToWarm)"
}

Remote Access

To run these scripts remotely, we will use Windows Remote Management (WinRM).

To configure WinRM:

Make sure port 5985 is open through the network.
Run winrm qc at remote server, select y when prompted.
Make sure WinRM service is running locally.
Run winrm set winrm/config/client '@{TrustedHosts="your.server.IP"}' locally.

Now you can run scripts remotely using Invoke-Command



Invoke-Command -ComputerName your.server.ip -ScriptBlock {

    $webFarmName = "server-farm"

    $assembly = [System.Reflection.Assembly]::LoadFrom("$env:systemroot\system32\inetsrv\Microsoft.Web.Administration.dll")
    $mgr = new-object Microsoft.Web.Administration.ServerManager "$env:systemroot\system32\inetsrv\config\applicationhost.config"
    $conf = $mgr.GetApplicationHostConfiguration()
    $section = $conf.GetSection("webFarms")
    $webFarms = $section.GetCollection()
    $webFarm = $webFarms | Where {
        $_.GetAttributeValue("name") -eq $webFarmName
    }

    $unhealthyServer = $webFarm.GetCollection() | where {
        !$_.GetChildElement("applicationRequestRouting").GetChildElement("counters").GetAttributeValue("isHealthy")
    }

    $unhealthyServer.GetAttributeValue("address")
} -Credential (New-Object System.Management.Automation.PSCredential ("user", (ConvertTo-SecureString 'password' -AsPlainText -Force)))

This is simple authentication, for more options check this link.

Integration with Visual Studio

This builds on my previous post.

We will use Targets in MSBuild to control which server we will deploy to, and to switch Blue and Green servers after deployment.

Add the PowerShell scripts in the project directory:
\Properties\Scripts\
In the publish profile, add these lines of code in the project tag:



<Target Name="DetermineUnhealthy" BeforeTargets="BeforePublish">
    <Exec Command="powershell -executionpolicy unrestricted &quot;&amp; &quot;&quot;$(MSBuildProjectDirectory)\Properties\Scripts\GetUnhealthy.ps1&quot;&quot;&quot;"
            ConsoleToMSBuild="true">
        <Output TaskParameter="ConsoleOutput" PropertyName="DeployIisAppPath"/>
    </Exec>
</Target>

This code determines the unhealthy server before the start of the deployment and assigns the value to DeployIisAppPath property.

In case of an application under the site in IIS:



<Target Name="DetermineUnhealthy" BeforeTargets="BeforePublish">
    <Exec Command="powershell -executionpolicy unrestricted &quot;&amp; &quot;&quot;$(MSBuildProjectDirectory)\Properties\Scripts\GetUnhealthy.ps1&quot;&quot;&quot;"
            ConsoleToMSBuild="true">
        <Output TaskParameter="ConsoleOutput" PropertyName="UnhealthySite"/>
    </Exec>
    <CreateProperty Value="$(UnhealthySite)/AppName">
        <Output TaskParameter="Value" PropertyName="DeployIisAppPath"/>
    </CreateProperty>
</Target>

If you want to switch directly after deployment, add this code:



<Target Name="SwitchBlueGreen" AfterTargets="AfterPublish">
    <Exec Command="powershell -executionpolicy unrestricted &quot;&amp; &quot;&quot;$(MSBuildProjectDirectory)\Properties\Scripts\SwitchBlueGreen.ps1&quot;&quot;&quot;" />
</Target>

In my case, I have two profiles: one with switching, and another without.

Now you can deploy to IIS with zero downtime.

Publish Web App from Visual Studio to IIS Using Web Deploy

Ahmed Hesham — Mon, 04 Apr 2022 20:12:14 +0000

Introduction

There are several ways you could publish your Web App from Visual Studio. The simplest way is to publish to a folder, then copy paste to the hosting server, IIS for example.

But it's always better to automate these operations; it makes them faster (no need to copy all files, just the changed ones), and less likely to cause mistakes (replace appsettings.json or web.config file).
It also opens the door to more advanced operations, like zero downtime deployment, which I plan to write about in the next post.

In this post I'll write about how to publish a Web App in Visual Studio to IIS using Web Deploy. When things are set up, you will only need to click the publish button in Visual Studio to publish your app.

What is Web Deploy?

Prerequisites

IIS 7
Visual Studio 2010

Steps

Note: The order of steps is important.

1. Install Web Management Service (WMSVC)

In remote server, open Control Panel -> Turn Windows features on or off.
Look for Internet Information Services (IIS) -> Management Tools -> check Management Service.
Proceed to install.

2. Download and Install Web Platform Installer (WebPI)

It's recommended to use WebPI instead of directly downloading tools; because WebPI also gets the dependencies and configures these tools depending on the current system settings.

Web Platform Installer

3. Get Web Deploy

Open WebPI directly (start menu for example), not through IIS Manager.
Search for Web Deploy, then install.

Note: If Web Deploy is already installed, uninstall it (from Control Panel, not repair), then repeat above steps.

4. Add Port 8172 to Exceptions

This port gets added automatically to Windows Firewall exceptions if you followed the above steps.

Make sure the port is open through the path from the development environment to the hosting server, for example if you are using EC2, add the port to the Inbound Rules of the Security Group.

5. Create New Publish Profile in Visual Studio

Open the project you want to publish, then create a new publish profile.
Select Web Server (IIS) -> Web Deploy.
Write the server details as follow:
- Server: https://(ip or name):8172/msdeploy.axd
- Site name: site/application as in IIS
- Username and Password are windows credentials.
Click Finish.
You might need to add <AllowUntrustedCertificate>True</AllowUntrustedCertificate> to the publish profile found under solution tree: YourProject -> Properties -> PublishProfiles.

6. Publish Your Project

We finished setting up Web Deploy, now you just need to click publish, and Web Deploy will do all the work for you.

DEV Community: Ahmed Hesham

Full Duplex Communication Between Web App and Desktop Application Using WebSocket

Introduction

Do You Really Need It?

Overview

WebSocket Client

WebSocket Server

Let's Test It

See Also

Deploy Web App to IIS with Zero Downtime in Visual Studio

Introduction

Table of Contents

Basic Idea

Steps

1. Download and Install Web Platform Installer (WebPI)

2. Get Application Request Routing (ARR)

3. Create the Blue and Green Servers

4. Configure the Server Farm

5. Configure Health Test

6. Logging Problem

7. Add URL Rewrite Rules

Scripts

Get Server Farm Object

To check which server is unhealthy

Switch Blue and Green

Remote Access

Integration with Visual Studio

See Also

Publish Web App from Visual Studio to IIS Using Web Deploy

Introduction

Prerequisites

Steps

1. Install Web Management Service (WMSVC)

2. Download and Install Web Platform Installer (WebPI)

3. Get Web Deploy

4. Add Port 8172 to Exceptions

5. Create New Publish Profile in Visual Studio

6. Publish Your Project

See Also