ASP.NET Core SingleR:初次体验和简单项目搭建-Toy模板网

这篇具有很好参考价值的文章主要介绍了ASP.NET Core SingleR:初次体验和简单项目搭建。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

平常的网页通讯都是基于Http 请求的，特点就是每次请求之后都会关闭，延迟会比较大。如果想做网页游戏，网页聊天等功能，就要用到即时通信。SignalR 就是一种即时通讯的方式。

微软官方|ASP.NET Core SignalR 概述

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

应用场景

我们一般的网络请求都是数据先进数据库，再用网页请求把数据读出来的。

但是对于低延迟，实时性要求的话，就不符合这个逻辑了。因为实时性的话就说明以前的数据不重要，可以丢弃。就跟直播一样，除非人为地去录播，不然前1分钟的视频画面是没人看的，可以直接丢弃的。

这里的直播的意思是实时性的数据，不是斗鱼直播这种视频流的意思。

SignalR 网站长什么样？

Blazor就是用SignalR开发的

ASP.NET Core Blazor 托管模型

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端
我们找一个Blazor的网址看一下

Bootstrap 风格的 Blazor UI 组件库

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

第一个ASP.NET core SignalR程序

确定SignalR版本

微软官方有两个SignalR，一个是基于.net Framework的，一个是基于.NET Core。按照微软的意思，应该是建议我们用core SignalR版本

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

我在网上找了很多的教程，要么就是版本太老，要么就是答非所问。还是照着微软的教程走一遍看看好了。我顺便找了半天找到了微软最新的.net core 8.0的教程

微软官方文档|教程：ASP.NET Core SignalR 入门

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

新建MVC项目

按照微软的意思，开个ASP.NET Core Web，而不是Blazor程序

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

添加unpkg管理器

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

网上搜了半天，发现要安装一下LibMan

将 LibMan CLI 与 ASP.NET Core 结合使用

dotnet tool install -g Microsoft.Web.LibraryManager.Cli

这个需要连接外网，在内网可能会报错
ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

安装成功
ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

运行一下查看版本，看看是否安装成功

libman --version

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

添加客户端

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

添加ChatHub文件

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

using Microsoft.AspNetCore.SignalR;

namespace SiganlRTest.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

添加SignalR服务

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

添加网页

@page
<div class="container">
    <div class="row p-1">
        <div class="col-1">User</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">Message</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="Send Message" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script>

ASP.NET Core SingleR:初次体验和简单项目搭建,ASP.NET Core,asp.net,后端

把微软的代码复制进去

"use strict";

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

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