ASP.NET Core SignalR框架

运行环境：vs2019

创建 Web 应用项目

1. 从菜单中选择“文件”>“新建项目”。

2. 在“创建新项目”对话框中，选择“ASP.NET Core Web 应用程序”，然后选择“下一步” 。

3. 在“配置新项目”对话框中，将项目命名为SignalRChat，然后选择“创建”。

4. 在“创建新的 ASP.NET Core Web 应用程序”对话框中，选择“.NET Core”和“ASP.NET Core 3.0” ,点击创建
   

添加 SignalR 客户端库

5. 在“解决方案资源管理器”中，右键单击项目，然后选择“添加”“客户端库” 。

6. 在“添加客户端库”对话框中，对于“提供程序”，选择“unpkg”。

7. 对于“库”，输入 @microsoft/signalr@latest。

8. 选择“选择特定文件”，展开“dist/browser”文件夹，然后选择signalr.js和signalr.min.js。

9. 将“目标位置”设置为 wwwroot/js/signalr/，然后选择“安装”。

创建 SignalR 中心

10. 在 SignalRChat 项目文件夹中，右键，新建文件夹，创建 Hubs 文件夹。

11. 在 Hubs 文件夹中，右键，添加新建项，使用以下代码创建 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)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

配置 SignalR

必须将 SignalR 服务器配置为将 SignalR 请求传递给 SignalR。
12. 将以下三行代码添加到 Startup.cs 文件图片中的位置。

using SignalRChat.Hubs;

services.AddSignalR();

endpoints.MapHub<ChatHub>("/chathub");

添加 SignalR 客户端代码

13. 使用以下代码替换 Pages\Index.cshtml 中的内容：

@page
    <div class="container">
        <div class="row"> div>
        <div class="row">
            <div class="col-2">Userdiv>
            <div class="col-4"><input type="text" id="userInput" />div>
        div>
        <div class="row">
            <div class="col-2">Messagediv>
            <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>

14. 在 wwwroot/js 文件夹中，使用以下代码创建 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 msg = message.replace(/&/g, "&").replace(/, "<").replace(/>/g, ">");
    var encodedMsg = user + " says " + msg;
    var li = document.createElement("li");
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);
});

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

15. F5 运行

（1）从地址栏复制 URL，打开另一个浏览器实例或选项卡，并在地址栏中粘贴该 URL。

（2）选择任一浏览器，输入名称和消息，然后选择“发送消息”按钮。

（3）两个页面上立即显示名称和消息。