SignalR multiple chat rooms

Question

I am planning to create a chat application, and I've read that SignalR is one of the best technologies to apply.

I've seen examples of it, but they only have a single chat room.

I want to have multiple chat rooms. The user will just choose one of those chat rooms.

Although I'm a beginner, I think to create a single chat room in SignalR is by this:

<script type="text/javascript">
    $(function () {
        var connection = $.connection.communicator;
        connection.receive = function (from, msg) {
            $("#chatWindow").append("<li>" + from + ": " + msg + "</li>");
        };
        $.connection.hub.start();

        $("#btnSend").click(function () {
            connection.broadcast($("#txtName").val(), $("#txtMsg").val());
        });
    });
</script>

var connection = single chat room (I'm not sure)

So if I have many connections (for example, connection1, connection2, connection3....) I can have multiple chat rooms?

Once again, I am not sure if this is correct... Please help me on how to implement multiple chat rooms...

(PS: I have seen JABBR, but its code is making my nose bleed. Can you provide simple examples, please?)

Answer 1

You don't have to open multiple connections, just one, but to use Group:

public class MyHub : Hub, IDisconnect
{
    public Task Join()
    {
        return Groups.Add(Context.ConnectionId, "foo");
    }

    public Task Send(string message)
    {
        return Clients["foo"].addMessage(message);
    }

    public Task Disconnect()
    {
        return Clients["foo"].leave(Context.ConnectionId);
    }
}

One group means one room, so every time one user joins one room, you just add that user to the group of that room, and when you want to broadcast message, just send the message to the clients in the group.

More details: https://github.com/SignalR/SignalR/wiki/Hubs

Answer 2

Okay... Here's the simplest way to make multiple rooms:

$(function () {
    var chat = jQuery.connection.chat;

    chat.addMessage = function (message, room) {

        if ($('#currentRoom').val() == room) {
            $('#messagesList').append('<li>' + message + '</li>');
        }
    };

    chat.send($('#textboxMessage').val(), $('#currentRoom').val());
    $('#textboxMessage').val("");

    $.connection.hub.start();
});


public class Chat : Hub
{
   public void Send(string msg, string room)
   {
       Clients.addMessage(msg, room);
   }
}

I have a dropdown list of available rooms, and the selected room will be the value of an element, let's say a textbox:

 <input type="text" readonly="readonly" id="currentRoom" />

Now, every time .send is called, we will pass not just the message, but also the current room...

The .addMessage will return two values to every client, one is the message, the other is a room... Now we will compare the returned 'room' to the current room of the client. Once they match, the message will be displayed in that current room:

if ($('#currentRoom').val() == room) {
    $('#messagesList').append('<li>' + message + '</li>');
}

Answer 3

Simple signalr sample: Visit https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio

then change chat.js

  document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    var room = document.getElementById("room").value;
    connection.invoke("SendMessage", user, message,room,false).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

document.getElementById("joinButton").addEventListener("click", function (event) {

    var room = document.getElementById("room").value;
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message, room,true).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

edite the ChatHub.cs file with the following code:

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message, string room, bool join)
        {
            if (join)
            {
                await JoinRoom(room).ConfigureAwait(false);
                await Clients.Group(room).SendAsync("ReceiveMessage", user, " joined to " + room).ConfigureAwait(true);

            }
            else
            {
                await Clients.Group(room).SendAsync("ReceiveMessage", user, message).ConfigureAwait(true);

            }
        }

        public Task JoinRoom(string roomName)
        {
            return Groups.AddToGroupAsync(Context.ConnectionId, roomName);
        }

        public Task LeaveRoom(string roomName)
        {
            return Groups.RemoveFromGroupAsync(Context.ConnectionId, roomName);
        }
    }


}

Html sample:

<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-2">Room</div>
        <div class="col-4"><input type="text" id="room" /></div>

    </div>
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-6">
            <input type="button" id="joinButton" value="Join  Room" />
        </div>
    </div>
</div>



<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-2">User</div>
        <div class="col-4"><input type="text" id="userInput" /></div>
    </div>
    <div class="row">
        <div class="col-2">Message</div>
        <div class="col-4"><input type="text" id="messageInput" /></div>

    </div>
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-6">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <hr />
    </div>
</div>
<div class="row">
    <div class="col-6">
        <ul id="messagesList"></ul>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

signalr c# .net core3 chat chatroom

Answer 4

You do not need multiple connections. Just use one and put the meta data in the returned JSON message as to which room the message is for. The JavaScript code then needs to direct the message into the correct room.