How to Create a WebSocket in ASP.NET Using .NET 8

2 min read
Add WebSocket Middleware
In .NET 8
, middleware configuration can stay outside Program.cs
if you organize it into dedicated classes or handlers.
Let’s write a WebSocketHandler class.
📄 WebSocketHandler.cs
using System.Net.WebSockets;
using System.Text;
namespace WebSocketDemo
{
public class WebSocketHandler
{
public async Task HandleAsync(WebSocket webSocket, CancellationToken cancellationToken)
{
Console.WriteLine("WebSocket connection established");
var sendTask = SendPeriodicMessagesAsync(webSocket, cancellationToken);
var receiveTask = ReceiveMessagesAsync(webSocket, cancellationToken);
await Task.WhenAny(sendTask, receiveTask);
}
private async Task SendPeriodicMessagesAsync(WebSocket webSocket, CancellationToken cancellationToken)
{
while (!cancellationToken.IsCancellationRequested && webSocket.State == WebSocketState.Open)
{
var message = "Hello";
var buffer = Encoding.UTF8.GetBytes(message);
await webSocket.SendAsync(
new ArraySegment<byte>(buffer),
WebSocketMessageType.Text,
true,
cancellationToken
);
Console.WriteLine($"Sent: {message}");
try
{
await Task.Delay(TimeSpan.FromMinutes(1), cancellationToken);
}
catch (TaskCanceledException)
{
break;
}
}
}
private async Task ReceiveMessagesAsync(WebSocket webSocket, CancellationToken cancellationToken)
{
var buffer = new byte[1024 * 4];
while (!cancellationToken.IsCancellationRequested && webSocket.State == WebSocketState.Open)
{
var result = await webSocket.ReceiveAsync(new ArraySegment<byte>(buffer), cancellationToken);
if (result.MessageType == WebSocketMessageType.Close)
{
Console.WriteLine("Client requested close");
await webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Closing", cancellationToken);
break;
}
}
}
}
}
Configure WebSockets in Program.cs
var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
app.UseWebSockets();
var webSocketHandler = new WebSocketHandler();
app.Map("/ws", async context =>
{
if (context.WebSockets.IsWebSocketRequest)
{
var webSocket = await context.WebSockets.AcceptWebSocketAsync();
await webSocketHandler.HandleAsync(webSocket, context.RequestAborted);
}
else
{
context.Response.StatusCode = 400;
}
});
app.Run();
Create a Frontend to Connect
Let’s create a simple HTML file
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Client</title>
<style>
#socket_box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>WebSocket Messages</h1>
<div id="socket_box"></div>
<script>
const ws = new WebSocket('wss://localhost:5001/ws');
ws.onopen = () => {
console.log('WebSocket connected');
};
ws.onmessage = (event) => {
const box = document.getElementById('socket_box');
const msg = document.createElement('div');
msg.textContent = event.data + ' at ' + new Date().toLocaleTimeString();
box.appendChild(msg);
box.scrollTop = box.scrollHeight;
};
ws.onclose = () => {
console.log('WebSocket closed');
};
</script>
</body>
</html>
0
Subscribe to my newsletter
Read articles from Sudip Bhandari directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
