使用 ASP.NET Core SignalR 中的中心 | Microsoft Docs了解如何使用 ASP.NET Core SignalR 中的中心。https://docs.microsoft.com/zh-cn/aspnet/core/signalr/hubs?view=aspnetcore-6.0ASP.NET Core SignalR JavaScript 客戶(hù)端 | Microsoft DocsASP.NET Core SignalR JavaScript 客戶(hù)端概述。https://docs.microsoft.com/zh-cn/aspnet/core/signalr/javascript-client?view=aspnetcore-6.0&viewFallbackFrom=aspnetcore-2.2&tabs=visual-studio一、創(chuàng)建Web API項(xiàng)目
二、新建ChatHub.cs類(lèi)，并寫(xiě)好向所有客戶(hù)端發(fā)送消息的方法
調(diào)用依賴(lài)于保持活動(dòng)狀態(tài)的中心的異步方法時(shí)請(qǐng)使用?await。 例如，如果在沒(méi)有?await?的情況下進(jìn)行調(diào)用，則?Clients.All.SendAsync(...)?這類(lèi)方法會(huì)失敗，并且中心方法會(huì)在?SendAsync?完成之前完成、代碼如下
public class ChatHub : Hub
{
/// <summary>
/// 向所有客戶(hù)端發(fā)送消息
/// </summary>
/// <param name="user"></param>
/// <param name="message"></param>
/// <returns></returns>
public async Task SendMessage(string user, string message) => await Clients.All.SendAsync("ReceiveMessage", user, message);
}?注： 這里的?ReceiveMessage 字符串參數(shù)? 是提供給前端監(jiān)聽(tīng)的方法名稱(chēng) ，可自定義
?三、注冊(cè)中心所需的SignalR服務(wù)和終結(jié)點(diǎn)，打開(kāi)Program.cs，添加兩處?※※※ SignalR ※※※ 代碼
和處理跨域，記住跨域不能默認(rèn)*，需要指定客戶(hù)端地址，否則跨域問(wèn)題還是存在
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllers();
// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();
// ※※※ SignalR ※※※
builder.Services.AddCors(options =>
{
options.AddDefaultPolicy(
builder =>
{
builder.WithOrigins("http://192.168.5.73:8848")
.AllowAnyHeader()
.WithMethods("GET", "POST")
.AllowCredentials();
});
});
builder.Services.AddSignalR();
// ※※※ SignalR ※※※
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseAuthorization();
app.MapControllers();
//※※※ SignalR ※※※
app.UseCors();
app.MapHub<ChatHub>("/Chat");
// ※※※ SignalR ※※※
app.Run();
四、修改launchSettings.json配置文件
?
接下來(lái)了解客戶(hù)端怎樣調(diào)用接收SignalR中心方法
一、引入signalr.js
npm init -y
npm install @microsoft/signalr
npm 將包內(nèi)容安裝在 node_modules\@microsoft\signalr\dist\browser 文件夾中。將?signalr.js?文件引用到你的項(xiàng)目。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
</head>
<body>
<div id="content">
</div>
<br />
<input type="text" id="name" /><br />
<textarea id="msg"></textarea>
<button onclick="send()">發(fā)送</button>
<script src="signalr.min.js"></script>
<script>
getName();//獲取隨機(jī)名字
//連接SignalR中心
//withUrl 這里要和后端 launchSettings.json---profiles---SignalR---applicationUrl對(duì)應(yīng)，否則無(wú)法握手,
//最后跟上Program.cs配置的名字, app.MapHub<ChatHub>("/Chat");
const connection = new signalR.HubConnectionBuilder()
.withUrl("http://192.168.5.73:5196/Chat")
.build();
//連接方法，如果連接失敗，5s后重新連接
async function start() {
try {
await connection.start();
console.log("連接成功.");
} catch (err) {
console.log(err);
setTimeout(start, 5000);
}
};
//如果連接斷開(kāi)，嘗試重新連接
connection.onclose(async () => {
await start();
});
// 開(kāi)始連接.
start();
const all = (user, message) => {
try {
//調(diào)用中心的SendMessage方法
connection.send("SendMessage", user, message);
} catch (err) {
console.error(err);
}
}
const send = () => {
var user = document.getElementById("name").value;
var msg = document.getElementById("msg").value;
all(user, msg);
}
//ReceiveMessage 與后端對(duì)應(yīng) ，接收中心發(fā)來(lái)的消息
connection.on("ReceiveMessage", (user, message) => {
var son = document.createElement("p");
son.innerHTML = `${user}: ${message}`;
document.getElementById("content").appendChild(son);
});
function getName() {
var familyNames = new Array(
"趙", "錢(qián)", "孫", "李", "周", "吳", "鄭", "王", "馮", "陳",
"褚", "衛(wèi)", "蔣", "沈", "韓", "楊", "朱", "秦", "尤", "許",
"何", "呂", "施", "張", "孔", "曹", "嚴(yán)", "華", "金", "魏",
"陶", "姜", "戚", "謝", "鄒", "喻", "柏", "水", "竇", "章",
"云", "蘇", "潘", "葛", "奚", "范", "彭", "郎", "魯", "韋",
"昌", "馬", "苗", "鳳", "花", "方", "俞", "任", "袁", "柳",
"酆", "鮑", "史", "唐", "費(fèi)", "廉", "岑", "薛", "雷", "賀",
"倪", "湯", "滕", "殷", "羅", "畢", "郝", "鄔", "安", "常",
"樂(lè)", "于", "時(shí)", "傅", "皮", "卞", "齊", "康", "伍", "余",
"元", "卜", "顧", "孟", "平", "黃", "和", "穆", "蕭", "尹"
);
var givenNames = new Array(
"子璇", "淼", "國(guó)棟", "夫子", "瑞堂", "甜", "敏", "尚", "國(guó)賢", "賀祥", "晨濤",
"昊軒", "易軒", "益辰", "益帆", "益冉", "瑾春", "瑾昆", "春齊", "楊", "文昊",
"東東", "雄霖", "浩晨", "熙涵", "溶溶", "冰楓", "欣欣", "宜豪", "欣慧", "建政",
"美欣", "淑慧", "文軒", "文杰", "欣源", "忠林", "榕潤(rùn)", "欣汝", "慧嘉", "新建",
"建林", "亦菲", "林", "冰潔", "佳欣", "涵涵", "禹辰", "淳美", "澤惠", "偉洋",
"涵越", "潤(rùn)麗", "翔", "淑華", "晶瑩", "凌晶", "苒溪", "雨涵", "嘉怡", "佳毅",
"子辰", "佳琪", "紫軒", "瑞辰", "昕蕊", "萌", "明遠(yuǎn)", "欣宜", "澤遠(yuǎn)", "欣怡",
"佳怡", "佳惠", "晨茜", "晨璐", "運(yùn)昊", "汝鑫", "淑君", "晶瀅", "潤(rùn)莎", "榕汕",
"佳鈺", "佳玉", "曉慶", "一鳴", "語(yǔ)晨", "添池", "添昊", "雨澤", "雅晗", "雅涵",
"清妍", "詩(shī)悅", "嘉樂(lè)", "晨涵", "天赫", "?傲", "佳昊", "天昊", "萌萌", "若萌"
);
var i = parseInt(10 * Math.random()) * 10 + parseInt(10 * Math.random());
var familyName = familyNames[i];
var j = parseInt(10 * Math.random()) * 10 + parseInt(10 * Math.random());
var givenName = givenNames[i];
var name = familyName + givenName;
document.getElementById("name").value = name;
}
</script>
</body>
</html>
二、運(yùn)行服務(wù)和客戶(hù)端，開(kāi)啟兩個(gè)客戶(hù)端頁(yè)面，測(cè)試成功
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-463731.html
?但這是針對(duì)所有在線客戶(hù)端發(fā)送消息，下一篇講針對(duì)群組和個(gè)人發(fā)送消息文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-463731.html
到了這里，關(guān)于十三、Net Core6 SignalR入門(mén)（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
