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://learn.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 聊天 室