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的客户端和服务端开发。网上的资料不是很多,只能自己研究一下了。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python武器库开发-武器库篇之Fofa-API使用(四十六)

Python武器库开发-武器库篇之Fofa-API使用(四十六) FOFA&#xff08;FOcus Observation of Futures Assets&#xff09;是一款专业的网络资产搜索引擎&#xff0c;旨在帮助企业发现和评估网络上的潜在安全风险。FOFA的基本原理是通过搜索引擎的方式&#xff0c;按照关键词对互…

【51单片机Keil+Proteus8.9】温室盆栽灌溉系统

实验五 实验名称 温室盆栽灌溉系统 软件设计&#xff1a; 1. 定义对应的引脚和端口的别名。 2. 编写延时函数&#xff0c;用于控制程序的执行速度。 3. 编写LCD控制函数&#xff0c;包括发送命令和发送数据两种操作。 4. 编写显示函数&#xff0c;用于在LCD上显示字符串…

PHP+MySQL组合开发:微信小程序万能建站源码系统 附带完整的搭建教程

随着移动互联网的快速发展&#xff0c;微信小程序已成为企业进行移动营销的重要工具。然而&#xff0c;对于许多中小企业和个人开发者来说&#xff0c;开发一个功能完善、用户体验良好的小程序是一项复杂的任务。罗峰给大家分享一款微信小程序万能建站源码系统。该系统采用PHPM…

小白准备蓝桥杯之旅(c/c++b组)

前言&#xff1a;省赛获奖比例高达百分之60,只要比一半的人努力&#xff0c;你就能大概率获奖。 寒假做的3件事 1.稳基础 熟练掌握基础语法部分&#xff0c;c比c多个stl库优势&#xff0c;c语言的同学需要会实现c中stl库部分 2.刷真题 大概比赛前30天&#xff0c;坚持每天做…

ros2 基础教程-使用ROS 2进行相机标定

ROS 2进行相机标定&#xff08;Camera Calibration&#xff09; 相机&#xff08;摄像头&#xff09;是一种非常精密的光学仪器&#xff0c;对外界环境的感知非常敏感。由于摄像头内部和外部的一些原因&#xff0c;摄像头采集的图像常常会发生一定的畸变。如果直接将采集到的图…

JAVA和C++ SECS/GEM300开发和概念

编译SECS示例程序 1. 示例程序使用默认路径&#xff1a; D:\SECS 稳定版\SECS Debug\ 2. 该操作分为俩步 ① 将C#的Secs库编译成设备相同Net版本。 如.net3.5、4.0、4.5等等 ② 编译金南瓜SECS demo程序 编译C#的SecsEquip.dll 1. 找到SecsEquip项目 项目文件 使用Visua…

电商平台spu和sku的完整设计

一、关于数据库表的设计 1、商品属性表 比如一个衣服有颜色、尺码、款式这个叫属性表 -- ------------------------ -- 商品属性表 -- ------------------------ DROP TABLE IF EXISTS attribute; CREATE TABLE attribute (id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT CO…

LabVIEW振动数据采集与分析系统

在这个项目中&#xff0c; LabVIEW软件配合精确的硬件组件&#xff0c;以实现高效的振动数据采集和复杂信号分析。硬件方面&#xff0c;系统采用了PCB振动加速度传感器的高灵敏度传感器&#xff0c;以及NI9234型号的数据采集卡&#xff0c;确保了数据采集的高精度和可靠性。软件…

yarn包管理器在添加、更新、删除模块时,在项目中是如何体现的

技术很久不用&#xff0c;就变得生疏起来。对npm深受其害&#xff0c;决定对yarn再整理一遍。 yarn包管理器 介绍安装yarn帮助信息最常用命令 介绍 yarn官网&#xff1a;https://yarn.bootcss.com&#xff0c;学任何技术的最新知识&#xff0c;都可以通过其对应的网站了解。无…

(C语言)编译和链接

前言͟͟͞͞&#x1f48c;&#xff1a;对于现在的各种编译器而言许多都是好多个功能的集成&#xff0c;那么我们的代码到底是如何去实现的呢&#xff1f;难道我们的计算机可以直接读懂我们所写的代码&#xff0c;并运行吗&#xff1f;对于很多细心的小伙伴们可能会想这样的问题…

基于docker创建nginx容器

docker一键安装可以参考我这个博客&#xff1a;一键安装docker 1.创建基础容器 docker run -p280:280 --name nginx -d nginx创建挂载到容器的宿主机文件夹 mkdir -p /home/000nginx-ebrms-ftp/html mkdir -p /home/000nginx-ebrms-ftp/logs mkdir -p /home/000nginx-ebrms-f…

Win10 打开文件突然鼠标变成一个蓝色大圈卡住点不了也打不开文件,重启电脑也是这样

环境: Win10 专业版 加密客户端环境 问题描述: Win10 打开桌面word文件突然鼠标变成一个蓝色大圈卡住点不了也打不开文件,重启电脑也是这样,只有蓝色圈变大没有鼠标指针出现圈卡着不会动,和那些有鼠标箭头加小蓝色圈不一样 解决方案: 某网上查看的,还是要自己排查…

Java 内存模型深度解析

优质博文&#xff1a;IT-BLOG-CN 一、并发编程模型的两个关键问题 【1】并发中常见的两个问题&#xff1a;线程之间如何通信及线程之间如何同步。通信是指线程之间以何种机制来交换信息。在命令式编程中&#xff0c;线程之间的通信机制有两种&#xff1a;内存共享和消息传递&…

FPGA开发设计

一、概述 FPGA是可编程逻辑器件的一种&#xff0c;本质上是一种高密度可编程逻辑器件。 FPGA的灵活性高、开发周期短、并行性高、具备可重构特性&#xff0c;是一种广泛应用的半定制电路。 FPGA的原理 采用基于SRAM工艺的查位表结构&#xff08;LUT&#xff09;&#xff0c;…

智慧校园源码,云平台电子班牌系统,智能交互识别终端和移动化教育管理系统

智慧校园云平台电子班牌系统&#xff0c;利用先进的云计算技术&#xff0c;将教育信息化资源和教学管理系统进行有效整合&#xff0c;实现基础数据共享、应用统一管理。借助全新的智能交互识别终端和移动化教育管理系统&#xff0c;以考勤、课表、通知、家校互通等功能为切入点…

Linux 内核被冬季风暴 “封印“

Linus Torvalds在内核邮件列表上宣布&#xff0c;由于他所在的美国俄勒冈州波特兰地区受到严重冬季风暴的影响&#xff0c;导致网络和电力中断。波特兰及其周边地区气温急降至零下 -10C&#xff0c;因此他不得不临时中断对Linux 6.8内核的合并窗口操作。 Linus于1月7日发布了Li…

Odrive 学习系列四:如何使用脚本自动初始化odrive配置

一、背景: 在学习markbase的教程后,发现odrive的初始化配置命令确实有点多。尽管odrive有自动补全: 且可以通过 ctrl + → 来快速补全: 但是对初学者而言,仍旧有比较大的工作量。 而针对于此,我们可以通过powershell脚本的方式来解决这个问题。 二、设计初始化…

Electron Apple SignIn 登录

本人写博客&#xff0c;向来主张&#xff1a;代码要完整&#xff0c;代码可运行&#xff0c;文中不留下任何疑惑。 最讨厌写博客&#xff0c;代码只留下片段&#xff0c;文中关键的东西没写清楚。之前看了那么多文章&#xff0c;就是不告诉我clientId从哪来的。 官方资料地址&…

HCIA-HarmonyOS设备开发认证-序

序 最近涉及到HarmonyOS鸿蒙系统设备开发&#xff0c;在网络上已经有很多相关资料&#xff0c;视频教程&#xff0c;我也移植了公司的一个stm32G474板卡&#xff0c;运行LiteOS-m L0系统。 一面看资料一面移植&#xff0c;遇到不少坑&#xff0c;当看到运行的LOGO时&#xff0…

Halcon基于描述符的模板匹配

Halcon基于描述符的模板匹配 与基于透视形变的模板匹配类似&#xff0c;基于描述符的模板匹配能够在物体处于透视形变的状态下进行匹配&#xff0c;并且已标定和未标定的相机图像都适用。与透视形变不同的是&#xff0c;它的模板不是根据边缘轮廊创建的&#xff0c;而是根据特…