Simplifying IT, Empowering Businesses

In this article, we will understand WebSocket and walk through the steps on how we can configure a WebSocket on client and communicate with server. So first let’s start by understating “WebSocket.”

What is WebSocket?

WebSocket is a protocol that provides a way to interchange data between client and server via a persistent connection. The data can be passed bi-directional in the form of “packets”, without breaking the connection and any additional HTTP requests.

WebSocket is very useful in scenarios where continuous data exchange is required, e.g. online games, real-time trading systems etc.

Opening a WebSocket connection:

The client establishes a WebSocket connection through a process known as the WebSocket handshake. This process starts with the client sending a regular HTTP request to the server. This request includes an Upgrade header which tells the server that the client want to establish a WebSocket connection.

Below is the simple example how we can open/create a WebSocket connection client:

Events: Once the socket is created, we can listen to events on it. There are 4 events:

• Onopen: occurs when socket connection is established
• Onmessage: occurs when client receives data from server
• Onerror: occurs when there is any error in communication
• Onclose: occurs when connection is closed

Methods:

• socket.send(data): transmits data using the connection
• socket.close([code], [reason]): terminate any existing connection

When we call new WebSocket(url) , it starts connecting immediately.

During the connection client asks the server: “Do you support Websocket?” And if the server replies “yes”, then the talk continues in WebSocket protocol.

Browser header request made by new WebSocket(url) as shown below:

• Origin: The origin of the client’s page, i.e. https://localhost:44378. WebSocket objects are cross-origin by nature.
• Connection: Upgrade – Signals that client want change the protocol.
• Upgrade: websocket – Requested protocol is “websocket.”
• Sec-WebSocket-Key: Browser-generated random key for security.
• Sec-WebSocket-Version: 13, WebSocket protocol version.

When the server agrees to switch to WebSocket, it will send response code 101 as shown below:

Once the handshake is complete, either client or server can start sending data.

By using WebSockets, we can transfer as much data as we want without incurring the overhead associated with traditional HTTP requests. Data is transferred through a WebSocket as messages.

Now that we have understood WebSocket in great detail, lets create a sample application using Asp.Net MVC Core web application and follow the below steps:

1. Open the Visual Studio 2019 and create a web application using the “Asp.Net MVC Core” template.

2. Once the application is created it will have the below folder structure:

3. Move to the wwwroot\js directory and create a js file or open the site.js file.

4. Now let’s add below code in it:

5. Now, open the Startup.cs file and add the below code in it:

 

6. Now move to the HomeController.cs and add below methods in it:

That’s it your first WebSocket application is ready let’s build and run it to see the results:

As you can see in the above image communication gets started and we are able to send and receive messages.

Wrapping Up

We believe this tutorial on Dotnet core WebSocket was really helpful. If you have any questions in mind or if you have any .NET development projects coming up, get in touch with us today. We are DEV Information Technology Ltd a premier .NET development company and will ensure you have the best possible version of your idea out in the market.