.NET Core SignalR的使用

微软官方文档
CSDN 教程
简书教程1
简书教程2

• 具体安装查看
  微软官方文档

• 添加ChatHub 继承Hub

using Microsoft.AspNetCore.SignalR;

//给指定用户发送 Clients.Client(用户名)
//给所有用户发送 Clients.All

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Hubs
{
    public class ChatHub : Hub
    {
        //用户登陆后记录
        public async Task UserLogin(string name)
        {
            if (!ChatUser.userlist.Contains(name))
            {
                ChatUser.userlist.Add(name);
                ChatUser._connections.Add(name, Context.ConnectionId);
            }
            else
            {
                //ConnectionId会随着每次登陆而改变
                ChatUser._connections[name] = Context.ConnectionId;
            }
        }

        public async Task SendMessage(string user, string message)
        {
            await Clients.Client(user).SendAsync("ReceiveMessage", user, message);
        }

        public void SendMsgToUser(string fromUser, string toUser, string message)
        {
        //给指定用户发送 Clients.Client(用户名)
        //给所有用户发送 Clients.All 
        Clients.Client(ChatUser._connections[toUser]).SendAsync("ReceiveMessage", fromUser, message);
        }
    }
}

• 设置 Startup

services.AddSignalR();
endpoints.MapHub(“/chatHub”);

public void ConfigureServices(IServiceCollection services)
{
    services.AddRazorPages();
    services.AddSignalR();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseRouting();
    app.UseAuthorization();
    app.UseEndpoints(endpoints =>
    {
        endpoints.MapRazorPages();
        endpoints.MapHub<ChatHub>("/chatHub");
    });
}

• 页面

<div class="container">
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-2">昵称(名称)</div>
        <div class="col-4"><input type="text" id="userInput" value="useradmin" /></div>
    </div>
    <div class="row">
        <div class="col-2">接收(名称)</div>
        <div class="col-4"><input type="text" id="touserInput" /></div>
    </div>
    <div class="row">
        <div class="col-2">发送内容</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" />
            <input type="button" id="sendSigleButton" value="Send Sigle 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>

//chat.js 部分
"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // We can assign user-supplied strings to an element's textContent because it
    // is not interpreted as markup. If you're assigning in any other way, you 
    // should be aware of possible script injection concerns.
    li.textContent = `${user} says ${message}`;
});

//官方部分
//connection.start().then(function () {
//    document.getElementById("sendButton").disabled = false;
//}).catch(function (err) {
//    return console.error(err.toString());
//});

//document.getElementById("sendButton").addEventListener("click", function (event) {
//    var user = document.getElementById("userInput").value;
//    var message = document.getElementById("messageInput").value;
//    connection.invoke("SendMessage", user, message).catch(function (err) {
//        return console.error(err.toString());
//    });
//    event.preventDefault();
//});


//自己修改部分
connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
    var fromUser = document.getElementById("userInput").value;
    connection.invoke("UserLogin", fromUser).catch(function (err) {
    })
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendSigleButton").addEventListener("click", function (event) {
    console.log("in send methon");
    var fromUser = document.getElementById("userInput").value;
    var toUser = document.getElementById("touserInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("sendMsgToUser", fromUser, toUser, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

效果
三个用户登录：李三、DQY、王五

李三 给 DQY 发送消息 （给指定人发送信息）
除DQY 外其他用户不能看到此消息
DQY收到信息
王五没有任何消息
DQY 回复 李三
李三看到DQY信息
全程聊天中 始终是 1：1 指定用户
王五收不到任何信息

整个聊天通讯全程 页面是无任刷新和加载

demo
webapi demo