asp.net-mvc-3 - SignalR 多个聊天室

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

一个组就是一个房间，所以每次有一个用户加入一个房间，你只需将该用户添加到该房间的组中，当你要广播消息时，只需将消息发送给该组中的客户端。

更多详情： https ://github.com/SignalR/SignalR/wiki/Hubs

Answer 2

简单的信号器示例：访问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 聊天 室

Answer 3

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

$(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 4

您不需要多个连接。只需使用一个并将元数据放入返回的 JSON 消息中，以了解该消息用于哪个房间。然后，JavaScript 代码需要将消息引导到正确的房间。