ASP.NET Core SingleR:初次体验和简单项目搭建

文章目录

  • 前言
  • 应用场景
  • SignalR 网站长什么样?
  • 第一个ASP.NET core SignalR程序
    • 确定SignalR版本
    • 新建MVC项目
    • 添加unpkg管理器
    • 添加客户端
    • 添加ChatHub文件
    • 添加SignalR服务
    • 添加网页
    • 运行测试
    • 浏览器Websocket调试
      • type=1
      • type=6
      • Type为其它时
  • 总结

前言

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

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

应用场景

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

硬件设备
上位机采集程序
数据库
后端
Http网络请求
网页

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

硬件设备
上位机采集程序
'直播'数据流
网页

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

SignalR 网站长什么样?

Blazor就是用SignalR开发的

ASP.NET Core Blazor 托管模型

在这里插入图片描述
我们找一个Blazor的网址看一下

Bootstrap 风格的 Blazor UI 组件库

在这里插入图片描述

第一个ASP.NET core SignalR程序

确定SignalR版本

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

在这里插入图片描述

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

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

在这里插入图片描述

新建MVC项目

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

在这里插入图片描述
在这里插入图片描述

添加unpkg管理器

在这里插入图片描述

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

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

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

这个需要连接外网,在内网可能会报错
在这里插入图片描述

安装成功
在这里插入图片描述

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

libman --version

在这里插入图片描述

添加客户端

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

添加ChatHub文件

在这里插入图片描述

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服务

在这里插入图片描述

添加网页

@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>

在这里插入图片描述
在这里插入图片描述
把微软的代码复制进去

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

运行测试

在这里插入图片描述

浏览器Websocket调试

在这里插入图片描述
在这里插入图片描述
发送的消息
在这里插入图片描述
收到的消息
在这里插入图片描述
我们看到报文有很多的信息,那么到底是什么意思呢?这里就得去看SignalR的官方Github库了

SignalR Hub Protocol

type=1

在这里插入图片描述

简单翻译一下

  • type:为1的时候,是用来消息交互的。不唯一可能是用来确保网络是否稳定
  • invocationId:可选的,用来区分消息的ID
  • target:触发字符串,类似于MQTT里的Token
  • arguments:消息负载,类似于MQTT里的Payload
  • streamIds:可选的,通讯的唯一ID

type=6

type为6的时候,是用来Ping网络情况的

在这里插入图片描述

Type为其它时

type一共有1-9,9种方式,我这里就不展开说明了

总结

接下来我会去研究一下ASP.NET Core的客户端和服务端开发。网上的资料不是很多,只能自己研究一下了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/328842.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

苹果要在iPhone上运行AI大模型?

近两年&#xff0c;人工智能&#xff08;AI&#xff09;技术已经成为各大科技公司的重点研究领域&#xff0c;苹果公司自然也不甘落后。最新消息称&#xff0c;苹果甚至打算在iPhone上直接运行AI大模型... 据苹果AI研究人员表示&#xff0c;他们发明了一种创新的闪存利用技术&a…

Intel开发环境Quartus、Eclipse与WSL的安装

PC &#xff1a;win10 64bit 安装顺序&#xff1a;先安装Quartus 21.4&#xff0c;接着Eclipse或者WSL&#xff08;Windows Subsystem for Linux&#xff09;&#xff0c;Eclipse与WSL的安装不分先后。 为什么要安装Eclipse&#xff1f; 因为Eclipse可以开发基于Nios II的C/…

【上分日记】第380场周赛(数位dp+ KMP + 位运算 + 二分 + 双指针 )

文章目录 前言正文1.3005. 最大频率元素计数2.3007.价值和小于等于 K 的最大数字3.3008. 找出数组中的美丽下标 II 总结尾序 前言 本场周赛&#xff0c;博主也只写出两道题(前两道, hhh菜鸡勿喷)&#xff0c;第三道涉及位运算 &#xff0c;数位dp&#xff0c;第四道涉及KMP。 下…

Mac系统下,保姆级Jenkins自动化部署Android

一、Jenkins自动化部署 1、安装jenkins 官网&#xff1a;macOS Installers for Jenkins LTS 选择macOS brew install jenkins-lts 安装最新: brew install jenkins-lts 启动jenkins服务: brew services start jenkins-lts 重启jenkins服务: brew services restart jenkin…

Angular系列教程之变更检测与性能优化

文章目录 前言变更检测的原理脏检查OnPush策略 示例代码总结 前言 Angular 除了默认的变化检测机制&#xff0c;也提供了ChangeDetectionStrategy.OnPush&#xff0c;用 OnPush 可以跳过某个组件或者某个父组件以及它下面所有子组件的变化检测。 在本文中&#xff0c;我们将探…

grep 在运维中的常用可选项

一、对比两个文件 vim -d <filename1> <filename2> 演示&#xff1a; 需求&#xff1a;&#xff5e;目录下有两个文件一个test.txt 以及 text2.txt,需求对比两个文件的内容。 执行后会显示如图&#xff0c;不同会高亮。 二、两次过滤 场景&#xff1a;当需要多…

如何用AI提高论文阅读效率?

已经2024年了&#xff0c;该出现一个写论文解读AI Agent了。 大家肯定也在经常刷论文吧。 但真正尝试过用GPT去刷论文、写论文解读的小伙伴&#xff0c;一定深有体验——费劲。其他agents也没有能搞定的&#xff0c;今天我发现了一个超级厉害的写论文解读的agent &#xff0c…

rust跟我学六:虚拟机检测

图为RUST吉祥物 大家好,我是get_local_info作者带剑书生,这里用一篇文章讲解get_local_info是怎么检测是否在虚拟机里运行的。 首先,先要了解get_local_info是什么? get_local_info是一个获取linux系统信息的rust三方库,并提供一些常用功能,目前版本0.2.4。详细介绍地址:…

标准ERP产品的许可期限为,2023-12-22,当前已超过使用期限,请联系系统管理员更新许可或者删除超期的许可

项目场景&#xff1a; 金蝶云星空客户端 问题描述 标准ERP产品的许可期限为&#xff0c;2023-12-22&#xff0c;当前已超过使用期限&#xff0c;请联系系统管理员更新许可或者删除超期的许可! 原因分析&#xff1a; 这个报错提示是金蝶对第三方行业许可强制绑定,行业许可到…

Android PendingIntent 闪退

先来给大家推荐一个我日常会使用到的图片高清处理在线工具&#xff0c;主要是免费&#xff0c;直接白嫖 。 有时候我看到一张图片感觉很不错&#xff0c;但是图片清晰度不合我意&#xff0c;就想有没有什么工具可以处理让其更清晰&#xff0c; 网上随便搜下就能找到&#xff…

MySQL创建表及插入数据

一、创建英雄表&#xff08;hero&#xff09; mysql> use db_han Database changed mysql> create table hero(-> name varchar(20) primary key,-> nickname varchar(20),-> address varchar(20),-> groups varchar(20),-> emile int,-> telephone i…

6.3.1认识Camtasia4(2)

6.3.2录制声音 Camtasia4也可以用来录制声音&#xff0c;不过它在音频的录制与处理上要比GoldWave5差了很多。 1&#xff0e;在Camtasia Studio主程序中&#xff0c;单击【工具】|【Camtasia音频编辑器】&#xff0c;启动Camtasia音频编辑器。在弹出的欢迎界面中&#xff0c;…

如何在网络爬虫中解决CAPTCHA?使用Python进行网络爬虫

网络爬虫是从网站提取数据的重要方法。然而&#xff0c;在进行网络爬虫时&#xff0c;常常会遇到一个障碍&#xff0c;那就是CAPTCHA&#xff08;全自动公共图灵测试以区分计算机和人类&#xff09;。本文将介绍在网络爬虫中解决CAPTCHA的最佳方法&#xff0c;并重点介绍CapSol…

redis数据安全(三)数据持久化 AOF

接上一篇RDB&#xff0c;本篇看下Redis数据持久化的第二种方式AOF。 目录 一、AOF原理 1、写入机制&#xff1a; 2、缓冲机制&#xff1a; 3、重写机制 &#xff1a; 4、运行流程 二、AOF文件配置 1、开启AOF&#xff1a; 2、自动触发AOF重写 3、重写规则&#xff1…

山海鲸:金融机构数据管理的得力助手

在当今数字化的时代&#xff0c;数据已经成为金融机构的核心资产和决策依据。然而&#xff0c;如何有效地管理和分析这些数据&#xff0c;成为了金融机构面临的挑战。这时&#xff0c;一款强大的数据可视化工具显得尤为重要&#xff0c;山海鲸可视化正是这样一款助力金融机构轻…

ElasticSearch概述+SpringBoot 集成ES

ES概述 开源的、高扩展的、分布式全文检索引擎【站内搜索】 解决问题 1.搜索词是一个整体时&#xff0c;不能拆分&#xff08;mysql整体连续&#xff09; 2.效率会低&#xff0c;不会用到索引&#xff08;mysql索引失效&#xff09; 解决方式 进行数据的存储&#xff08;只存储…

【中大主办会议】第五届电子通讯与人工智能国际学术会议(ICECAI 2024)

第五届电子通讯与人工智能国际学术会议&#xff08;ICECAI 2024&#xff09; 2024 5th International Conference on Electronic communication and Artificial Intelligence 第五届电子通讯与人工智能国际学术会议&#xff08;ICECAI 2024&#xff09;将于2024年5月31日-6月…

导入失败,报错:“too many filtered rows xxx, “ErrorURL“:“

一、问题&#xff1a; 注&#xff1a;前面能正常写入&#xff0c;突然就报错&#xff0c;导入失败&#xff0c;报错&#xff1a;“too many filtered rows xxx, "ErrorURL":" {"TxnId":769494,"Label":"datax_doris_writer_bf176078-…

【算法Hot100系列】接雨水

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

分销商城多端uniapp 可编译5端 - 等级提现额度

等级提现额度 等级提现额度是一种常见的财务管理策略&#xff0c;通常用于在线平台、金融服务或游戏中&#xff0c;用于控制不同等级用户的提现限额。这样的机制有助于平台管理资金流动性&#xff0c;防范欺诈&#xff0c;并鼓励用户提升他们的活跃度或忠诚度。以下是一个简单的…