A simple Web Socket Based Application – .NET Core and Angular

Introduction

WebSocket is bi-directional, full duplex client/server communication protocol, available within browsers.

You can check more details and the browsers support on this link.

In this post, we’ll build a very simple WebSocket based client/server application. This shall help you to get started with this technology.

Basic Setup

Following is the basic setup diagram

In this simple setup, we’ll have our angular application as a websocket client and a .NET core worker application to host a websocket server.

Also, sometimes, you don’t need to build your own socket-server, instead you can use a third-party server, so, we’ll see a simple example of that too.

Lets see next, how these bits are put together.

Angular Application (Socket Client)

I built a simple angular application as follows

html is very simple and looks as follows

websocket.service

This angular service, encapsulate communication with websocket server using browser’s built-in WebSocket API.

It also uses an RxJS Subject to broadcast notifications to any subscribers (In our case app.component subscribes to it)

note: socketServer2 points to a third-party free online webSocket server, which we can use for initial echo testing to see if angular part is working as expected.

you can also check the web interface on https://socketsbay.com/test-websockets for testing purposes.

With this change in-place, we can run the angular application and test it.

Testing with Third-Party WebSocket Server

I used the third-party web-interface to send a test message as follows

and the messages showed-up in our angular application

(note, because other peoples might be also using this server for testing purposes, so you may receive messages which are initiated from those tests).

We can now try to send message from our Angular application and see that it shows up in the web-interface from third-party web-client and yes it did

So our angular application part is working as expected. You can check the source code from this git repository and extend it as per your requirements.

Next, let see how we can build our own web-socket server using .NET core application and connect to it via Angular client.

.NET Core Worker (Socket Server)

There are many different libraries available which can help us building a Socket Server in a .NET Application.

I used .NET Core Worker application to host the socket server. For socket server functionality, one simple and easy to use library is Fleck.

Fleck is a WebSocket server implementation in C#. I added the NuGet package to the worker project as follows

Once package added, I created a simple HelloServer class as follows

The code is self explanatory, however, let me know If you have any questions.

HelloServer class uses WebSocketServer from Fleck library we just added, and then I wired-up some simple event-handling code.

This class is registered as singleton with .NET Core Dependency Injection (DI) system as follows

All now left is to inject it in Worker and Start the WebSocket Server as follows

Testing with .NET Core Worker (Socket Server)

We can run the .NET Core application and check that server is listening on the assigned port

next, we can update the angular client to point to this server as follows and run the angular application

and following is the output of echo test with client and server parts

You can open a second browser tab with angular app address, and try to send message from that tab and see how that is received on server and in the 1st browser tab as well.

That’s all for today, our web-socket client/server solution is working as expected.

Summary

WebSockets are very commonly used for real-time, event-driven communication between clients and servers.

In this post, we build a simple web-socket based solution.

The source code for client and server parts are available form this git repository.

Let me know if you have some questions and/or comments.

Till next time, Happy Coding.