X

ASP.NET Core: Building chat room using WebSocket

WebSocket is real-time communication protocol we can use to make UI in browser to send and receive messages from server over real-time communication channel. WebSocket is also supported by ASP.NET Core. This blog post demonstrates how to build simple browser based chat room on ASP.NET Core and WebSocket.

Our chat room has two views: one for inserting nick name and the other one for chat room. We will use two controller actions and one middleware class to get the fully functional chat room. Of course, we will use WebSocket package too. The web site Can I use reports that majority of modern browsers support WebSocket protocol.

NB! You can browse source code or download Visual Studio 2017 solution from AspNetCoreChatRoom Git repository.

Creating “Login form”

We use here simple form where user can insert his or her preferred nick name for chat. To keep us focused on WebSocket stuff we don’t add any logic or checks in this point. Let’s add view called InsertUserName.cshtml under Home folder.

<form action="@Url.Action("Index")" method="post">
    <input type="text" placeholder="Insert user name" name="userName" />
    <input type="submit" value="Eńter" />
</form>

There will be another view for chat room and we will come back to it later when web sockets related code is done. Index() methods of home controller look like this.

[HttpGet]
public IActionResult Index()
{
    return View("InsertUserName");
}

[HttpPost]
public IActionResult Index(string username)
{
    return View("Index", username);
}

If request method is GET then we show nick name form and if request method is POST we will show chat room view.

WebSockets middleware

Now let’s write ASP.Core middleware for WebSocket. To keep things simple I mixed together custom WebSocket middleware and custom WebSocket connection manager from Radu Matei’s post Creating a WebSockets middleware for ASP .NET Core. I like the work Radu has done but here we will keep things as small as possible. To get better understanding of WebSockets I suggest you to go through Radu’s post.

NB! To use WebSockets in ASP.NET Core project add reference to Microsoft.AspNetCore.WebSockets NuGet package!

In breaf, this is what our WebSocket middleware class does:

  1. Keep concurrent dictionary with connected WebSockets (this is needed for message broadcast)
  2. Read messages from WebSocket and broadcast there to all known WebSockets
  3. Try to keep WebSockets dictionary as clean as possible

Here is the WebSocket middleware class.

public class ChatWebSocketMiddleware
{
    private static ConcurrentDictionary<string, WebSocket> _sockets = new ConcurrentDictionary<string, WebSocket>();

    private readonly RequestDelegate _next;

    public ChatWebSocketMiddleware(RequestDelegate next)
    {
        _next = next;
    }

    public async Task Invoke(HttpContext context)
    {
        if (!context.WebSockets.IsWebSocketRequest)
        {
            await _next.Invoke(context);
            return;
        }

        CancellationToken ct = context.RequestAborted;
        WebSocket currentSocket = await context.WebSockets.AcceptWebSocketAsync();
        var socketId = Guid.NewGuid().ToString();

        _sockets.TryAdd(socketId, currentSocket);

        while (true)
        {
            if (ct.IsCancellationRequested)
            {
                break;
            }

            var response = await ReceiveStringAsync(currentSocket, ct);
            if(string.IsNullOrEmpty(response))
            {
                if(currentSocket.State != WebSocketState.Open)
                {
                    break;
                }

                continue;
            }

            foreach (var socket in _sockets)
            {
                if(socket.Value.State != WebSocketState.Open)
                {
                    continue;
                }

                await SendStringAsync(socket.Value, response, ct);
            }
        }

        WebSocket dummy;
        _sockets.TryRemove(socketId, out dummy);

        await currentSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Closing", ct);
        currentSocket.Dispose();
    }

    private static Task SendStringAsync(WebSocket socket, string data, CancellationToken ct = default(CancellationToken))
    {
        var buffer = Encoding.UTF8.GetBytes(data);
        var segment = new ArraySegment<byte>(buffer);
        return socket.SendAsync(segment, WebSocketMessageType.Text, true, ct);
    }

    private static async Task<string> ReceiveStringAsync(WebSocket socket, CancellationToken ct = default(CancellationToken))
    {
        var buffer = new ArraySegment<byte>(new byte[8192]);
        using (var ms = new MemoryStream())
        {
            WebSocketReceiveResult result;
            do
            {
                ct.ThrowIfCancellationRequested();

                result = await socket.ReceiveAsync(buffer, ct);
                ms.Write(buffer.Array, buffer.Offset, result.Count);
            }
            while (!result.EndOfMessage);

            ms.Seek(0, SeekOrigin.Begin);
            if (result.MessageType != WebSocketMessageType.Text)
            {
                return null;
            }

            // Encoding UTF8: https://tools.ietf.org/html/rfc6455#section-5.6
            using (var reader = new StreamReader(ms, Encoding.UTF8))
            {
                return await reader.ReadToEndAsync();
            }
        }
    }
}

Before using middleware we have to introduce it to request pipeline in Startup class of web application. We do it in configure method before initializing MVC.

app.UseWebSockets();
app.UseMiddleware<ChatWebSocketMiddleware>();

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

NB! It’s very important to add WebSockets before MVC. WebSockets middleware checks in the beginning if request is for WebSocket. If it is WebSocket request then middleware starts handling it. If MVC is added to pipeline before then MVC will handle all the requests and our WebSocket middleware is never used.

Chat room view

Now let’s add chat room view. We will use Index view of home controller for chat room. Chat room view initializes WebSocket connection and starts listening to it. If user writes something to chat box and presses Enter then message is sent to server over WebSocket and WebSocket middleware will broadcast it to all WebSocket clients it knows.

@model string
@{
    ViewData["Title"] = "Home Page";
}
<style>
    body {margin:0px; padding:0px;}
    .msg {
        position: absolute;
        top: 0;
        bottom: 30px;
        border: 1px solid green;
        margin-bottom: auto;
        display:block;
        overflow: scroll;
        width:100%;
        white-space:nowrap;
    }
</style>
<div class="msg">
    <div style="position:absolute; bottom:0;" id="msgs"></div>
</div>

<div style="position:absolute;height:20px;bottom:10px;left:0; display:block;width:100%">
    <input type="text" style="max-width:unset;width:100%;max-width:100%" id="MessageField" placeholder="type message and press enter" />
</div>

@section Scripts {
    <script>
    $(function () {
        var userName = '@Model';

        var protocol = location.protocol === "https:" ? "wss:" : "ws:";
        var wsUri = protocol + "//" + window.location.host;
        var socket = new WebSocket(wsUri);
        socket.onopen = e => {
            console.log("socket opened", e);
        };

        socket.onclose = function (e) {
            console.log("socket closed", e);
        };

        socket.onmessage = function (e) {
            console.log(e);
            $('#msgs').append(e.data + '<br />');
        };

        socket.onerror = function (e) {
            console.error(e.data);
        };

        $('#MessageField').keypress(function (e) {
            if (e.which != 13) {
                return;
            }

            e.preventDefault();

            var message = userName + ": " + $('#MessageField').val();
            socket.send(message);
            $('#MessageField').val('');
        });
    });
    </script>
}

Now let’s build application and run it.

WebSocket chat room in action

The screenshot below shows how our chat room looks like. It’s extremely primitive and simple but it works. There’s room enough for improvements but this is the fun I leave to all my dear readers.

Wrapping up

Using WebSockets in ASP.NET Core is simple. Without any additional libraries we can use the one by Microsoft. We had to write custom middleware class for WebSocket communication and in our case the class came pretty small. We used concurrent dictionary as a WebSockets cache and this enabled us to broadcast messages over sockets. Our solution is very primitive and simple, there is a lot of room for improvements but as a proof of concept it works well.

References

Liked this post? Empower your friends by sharing it!
Categories: ASP.NET

View Comments (23)

  • Cheers, Radu!
    I will check out your package and if it is ready for action I will make my code samples use it.

  • Im getting this error when running the sample...

    WebSocket connection to 'ws://localhost:36453/' failed: Error during WebSocket handshake: Unexpected response code: 200

    maybe the middleware is not capturing the ws:/... request?

  • Great article Gunnar.
    Thank you,
    but what about private chat?
    lets consider we wanna make a private chat between two asp.net identityCore user.

    what should I do?

  • To implement private chat you have to implement mapping between users and sockets. When new socket is created you keep with it also user name. This is the first idea that comes to my mind.

  • Thanks for this great simple sample. Shows how easy it is :)
    To broadcast to the ohter clients in a foreach is ok for a sample but I prefer to do that with a parallel task (await Task.all(...);)

  • This is a very informative article. Thank you for sharing your time and effort. The Chat Application use case is very recognizable, but could you offer any pointers on something more like a relay where a client opens up a web socket to the server, then a second client performs a Get on a separate API on the Server and the server can initiate a message to the first client. For example, a smarthome device at my house connects to my service on Azure, an AWS lambda function calls my service on Azure. For example, I'm working on porting the NODE.js Azure service on this to a .Net client: https://manuel-rauber.com/2017/05/30/alexa-start-lego-robot-connecting-amazon-alexa-to-lego-mindstorms-ev3/#apibridge

  • I understand that you are building something more complex. If you are in hurry then go with WebSocket directly. If you have time to wait then I suggest you to wait until SignalR for ASP.NET Core gets to first stable release.

    I don’t have such example right now but I can give some advice. Based on my code you can use multiple WebSocket end-points and modify WebSocket class the way that it can accept messages from controller actions. This way you can build API controller action that sends message to all clients of some specific end-point.

  • Hello Gunnar, actually I would like to check if there is ASP.NET Core 2.0. I see ASP.NET Core samples on the internet but they (client and server) both on same machine or they use javascript. But I need .net code for it so I can use it for my other projects. (I will add signalr to it)

  • Actually, I'm trying to make a web api (.net core) project which connects to websockets (some logic) then publish those data with signalr. I know that signalr core is not ready but I want to complete websocket part at least.

  • Hi, Gunnar, how I can handle closed connection from client if client forced close or client doesn't have network? because when when it happen, the client not completing close handshake,can you give me more sample. thanks

  • Hi, Where do i put this part??

    app.UseWebSockets();
    app.UseMiddleware();

    app.UseMvc(routes =>
    {
    routes.MapRoute(
    name: "default",
    template: "{controller=Home}/{action=Index}/{id?}");
    });

    Thanks

  • You just laied down a bunch of code without explaining anything of substance. In fact, I don't think you explained anything.

Related Post