SignalR多个聊天室
SignalR多个聊天室
提问于 2012-06-24 13:21:43
我计划创建一个聊天应用程序，我读到过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……)我可以有多个聊天室吗？
再说一次，我不确定这是否正确...请帮助我如何实现多个聊天室...
(注:我见过JABBR，但它的代码让我流鼻血。您能提供一些简单的例子吗？)
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-06-25 11:01:03
您不必打开多个连接，只需打开一个，即可使用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);
}
}一个群意味着一个房间，所以每次一个用户加入一个房间时，您只需将该用户添加到该房间的群中，当您想要广播消息时，只需将消息发送到群中的客户端。
Stack Overflow用户
发布于 2020-03-31 08:56:57
简单的signalr示例:访问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"> </div>
<div class="row">
<div class="col-2">Room</div>
<div class="col-4"><input type="text" id="room" /></div>
</div>
<div class="row"> </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"> </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"> </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
Stack Overflow用户
发布于 2012-06-26 12:52:52
好吧..。下面是创建多个房间的最简单方法：
$(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>');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11175173
复制相关文章
相似问题
腾讯云开发者
