Question

我打算创建一个聊天应用程序，我读过SignalR是应用的最佳技术之一。

我见过它的例子，但它们只有一个聊天室。

我想拥有多个聊天室。用户只需选择其中一个聊天室。

虽然我是初学者，但我认为在SignalR中创建一个聊天室就是这样：

<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 =单个聊天室（我不确定）

所以如果我有很多连接（例如，connection1，connection2，connection3 ....）我可以有多个聊天室？

再次，我不确定这是否正确...请帮助我如何实现多个聊天室......

（PS：我见过JABBR，但它的代码让我流鼻血。请问你能提供简单的例子吗？）

Answer 1

您不必打开多个连接，只需打开一个，但要使用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);
    }
}

一个组意味着一个房间，因此每当一个用户加入一个房间时，您只需将该用户添加到该房间的组中，当您想要广播消息时，只需将消息发送给该组中的客户端。 / p>

更多细节： https://github.com/SignalR/SignalR/wiki/Hubs

Answer 2

好的......这是制作多个房间的最简单方法：

$(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);
   }
}

我有一个可用房间的下拉列表，所选房间将是一个元素的值，让我们说一个文本框：

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

现在，每次调用.send，我们不仅会传递信息，还会传递当前的房间......

.addMessage将向每个客户端返回两个值，一个是消息，另一个是房间......现在我们将返回的“房间”与客户端的当前房间进行比较。一旦匹配，该消息将显示在当前房间中：

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

Answer 3

简单的信号器示例：访问https://docs.microsoft.com/en-us/aspnet/core/tutorials/signalr?view=aspnetcore-3.1&tabs=visual-studio

然后更改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();
});

使用以下代码编辑ChatHub.cs文件：

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样本：

<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

您不需要多个连接。只需使用一个并将元数据放在返回的JSON消息中，以确定消息所针对的是哪个房间。然后，JavaScript代码需要将消息定向到正确的房间。

SignalR多个聊天室

4 个答案: