Creating a web socket (WS) server in C# can be a drag these days. There are several methods you can find online, and there does not seem to be a universal solution.
Project setup
Let’s begin. First, create an ASP .NET Core MVC project.
Project structure
Web socket configuration and handling happens in the Program.cs file. Aside from that, most of the client-server communication will be in a separate class.
Receive web socket requests
app.UseWebSockets();
app.Use(async (context, next) =>
{
if (context.WebSockets.IsWebSocketRequest)
{
// Here we will handle the web socket request
}
else
{
// Handle other requests normally
await next(context);
}
});
Enable web sockets
Inside the Program.cs file, enable web sockets with app.UseWebSockets();
Define middleware that detects and handles web socket requests with the app.Use(...); method.
Note: put these two methods before the app.MapControllerRoute(); method call.
Create a handler
Create a class that handles web socket requests in a separate folder named Core. Name the class WebSocketHandler.
Create a method called HadleWebSocket that receives HTTP context.
namespace WebSocket.Core
{
public class WebSocketHandler
{
public static async Task HandleWebSocket(HttpContext context)
{
// Handle web socket
}
}
}Create WebSocketHandler class
Now, call the method in Program.cs.
Since the method is asynchronous, await it to keep the client-server connection alive.
app.UseWebSockets();
app.Use(async (context, next) =>
{
if (context.WebSockets.IsWebSocketRequest)
{
// Here we will handle the web socket request
await WebSocket.Core.WebSocketHandler
.HandleWebSocket(context);
}
else
{
// Handle other requests normally
awaitnext(context);
}
});Use the handler class
Client — Server communication diagram
Web socket server-client diagram
WS client-server implementation follows these steps:
Initialize the connection: extract useful data from HttpContext and initialize various containers.
Read messages in a loop: read client message into a buffer
Handle messages: check if client message is textual
Close the connection: if client message is a ‘close’ command, terminate the connection
1. Initialize the connection
Inside the HandleWebSocket method, extract the web socket from the HTTP context. You may also extract other parameters from the context.
Let’s think about this example. A client may connect to our server on the following url: wss://my-awesome-page.com/admin/?token=1234.
On the server, you may easily extract the /admin request route and the token parameter.
public static async Task HandleWebSocket(HttpContext context)
{
// Get the underlying socket
using var socket = await context.WebSockets.AcceptWebSocketAsync();
// 1. Extract useful information from HttpContext
string requestRoute = context.Request.Path.ToString();
string token = context.Request.Query["token"];
}Extract data from HTTP context
2. Read messages in a loop
Now comes the core of web socket handling. Here you will create buffer of type byte and a while loop that will run until the connection is alive.
Create a few variables: - connectionAlive for the while loop - webSocketPayload byte buffer - tempMessage buffer.
// HandleWebSocket
// Initialize containers for reading
bool connectionAlive = true;
List<byte> webSocketPayload = new List<byte>(1024 * 4);
// 4 KB initial capacity
byte[] tempMessage = new byte[1024 * 4];
// Message reader
// 2. Connection loop
while (connectionAlive)
{
// Empty the container
webSocketPayload.Clear();
// Message handler
WebSocketReceiveResult? webSocketResponse;
// Read message in a loop until fully read
do
{
// Wait until client sends message
webSocketResponse = await socket.ReceiveAsync(tempMessage, CancellationToken.None);
// Save bytes
webSocketPayload.AddRange(new ArraySegment<byte>(tempMessage, 0, webSocketResponse.Count));
}
while (webSocketResponse.EndOfMessage == false);
// ...
}Web socket message handling
The reason for having two buffers is that client may send a single message in several chunks. To read all chunks, create a do…while loop that continually reads the chunks until the entire message is read.
Use WebSocketReceiveResult for it.
Before the do…while loop, clear previous messages from the buffer.
3. Handle messages
Create a condition that detects textual messages from the client. Convert the message to a string and log it to the console.
while (connectionAlive)
{
// Empty the container
webSocketPayload.Clear();
// Message handler
WebSocketReceiveResult? webSocketResponse;
// do...while loop
// Process the message
if (webSocketResponse.MessageType==WebSocketMessageType.Text)
{
// 3. Convert textual message from bytes to string
string message = System.Text.Encoding.UTF8.GetString(webSocketPayload.ToArray());
Console.WriteLine("Client says {0}", message);
}
}Read textual messages
4. Close the connection
The client may request that the server closes the connection.
Create another condition for that case. In it, set the connectionAlive value to ‘false’ to terminate the while loop.
while (connectionAlive)
{
// Empty the container
webSocketPayload.Clear();
// Message handler
WebSocketReceiveResult? webSocketResponse;
// do...while loop
// Process the message
if (webSocketResponse.MessageType == WebSocketMessageType.Text)
{
// ...
}
else if (webSocketResponse.MessageType == WebSocketMessageType.Close)
{
// 4. Close the connection
connectionAlive = false;
}
}Terminate the connection
Client HTML
Having created the core server functionality, create a basic client HTML. Use the JS Web Sockets API.
Page /Views/Home/Index.cshtml:
Web socket client HTML
To avoid using the layout page, set Layout = null;
Write JS code in the same file:
<script>
var socket = null;
function connect()
{
var url = 'wss://' + location.host;
socket = new WebSocket(url);
socket.addEventListener('open', function(event)
{
addLog('Connected to ' + url);
});
socket.addEventListener('message', function(event)
{
addLog('Message from server: ' + event.data);
});
}
function sendMessage()
{
var message = wsMessage.value;
socket.send(message);
addLog('Message sent!');
}
function addLog(log)
{
var logParagraph = document.createElement('p');
logParagraph.innerText = log;
logsContainer.appendChild(logParagraph);
}
</script>Web socket client JS
In the JS code, you have created a basic client-side web socket handler. Function connect initializes the socket, sendMessage sends data to the server and addLog visually shows events as they happen.
Some server setup
Now that you have both the client and the server code, only thing left to do is to put some logs:
public static async Task HandleWebSocket(HttpContext context)
{
// From here we will handle the web socket request
using var socket = await context.WebSockets.AcceptWebSocketAsync();
Console.WriteLine(" -> A new client connected!");
// ...
while (connectionAlive)
{
// ...
if (webSocketResponse.MessageType == WebSocketMessageType.Text)
{
// 3. Convert textual message from bytes to string
string message = System.Text.Encoding.UTF8.GetString(webSocketPayload.ToArray());
Console.WriteLine("Client says {0}", message);
}
// ...
}
Console.WriteLine(" -> A client disconnected.");
}Log server events to the console
Lastly, turn on the console in the project properties:
Enable the console in the app properties
Demo
Client-server communication
To check whether you have correctly created the server, start the app in the debugging mode. Afterwards, connect to the server and send a message.
Source: Medium - Stjepan
The Tech Platform
Comments