SignalR第一节-在5分钟内完成通信连接和消息发送

前言

首先声明,这又是一个小白从入门到进阶系列。 SignalR 这个项目我关注了很长时间,中间好像还看到过微软即将放弃该项目的消息,然后我也就没有持续关注了,目前的我项目中使用的是自己搭建的 WebSocket ,连接管理和消息推送都是统一维护;前段时间编写了 Asp.NETCore 轻松学系列,现在腾出了一点时间,抱着学习的心态,想把自己学习 SignalR 的过程写出来,就当笔记吧,再做笔记的过程中再加入实际的项目需求,一步一步的深入学习 SignalR ,正所谓技多不压身吧。有想要一起学习的同学,可以关注我,大家一起学习,一起进步。

SignalR 简单介绍

根据官方文档介绍,SignalR 是一个面向开发人员的库,其本质是对 Web实时连接(WebSocket) 的抽象和封装,使用 SIgnalR,可以避免自己编写和管理Web实时连接,并获得更多客户端的兼容性,截止本文发文为止,SignalR npm 包的版本是 @aspnet/signalr-1.1.2,在 Asp.NETCore 中,SignalR 不支持自动重连,如果客户端连接断开,必须显示重连。话不多说,下面就开始干吧。

1.项目搭建

1.1 搭建 Asp.NETCore 项目基架

本 SignalR 示例基于 .NETCore-2.2 ,所以,我们还是先搭建一个简单的 Asp.NETCore WebApplication

640?wx_fmt=png

选择 .NETCore-2.2 ,取消 Https 选择,因为如果选择 Https 还需要安装测试证书,为了时间,就别勾选了。

640?wx_fmt=png

项目创建完成,什么也别做,按下 F5 运行网站,看到如下界面

640?wx_fmt=png

好的,运行没有问题,我们现在先停止网站,做一些简单的编码工作

1.2 引用 SignalR for JavaScript 客户端 SDK

由于 .NETCore 内置了 SignalR 组件,我们无需额外引用服务组件,但是需要手动添加 SignalR JavaScript 客户端 SDK,按下图指示添加客户端引用:

640?wx_fmt=png

  • 在弹出的对话框中输入 @aspnet/signalr@1.1.2 并选择“选择特定文件”选项,手动选择两个文件 signalr.js/signalr.min.js,注意不要选择默认,否则安装全部组件太浪费时间,对话框中“目标位置”就是 signalr.js/signalr.min.js 的安装位置,默认为 @aspnet/signalr,这里需要手动改成 /lib/signalr/xxx 下面

640?wx_fmt=png

耐心等待几秒后安装完成...

2. 编写通讯业务逻辑

为了实现一个简单的群发通讯过程,我们需要分别编写服务器和客户端的代码,值得庆幸的是,这些代码非常简单,服务器和客户端的代码一共不到 100 行。

2.1 编写服务端代码

服务器端的代码如下,创建一个 类 WeChatHub 继承自 Hub 类即可,为了方便演示,我还重写了 Hub 的两个方法 OnConnectedAsync(连接)/OnDisconnectedAsync(断开)

  1. public class WeChatHub : Hub

  2. {

  3. public void Send(MessageBody body)

  4. {

  5. Clients.All.SendAsync("Recv", body);

  6. }


  7. public override Task OnConnectedAsync()

  8. {

  9. Console.WriteLine("哇,有人进来了:{0}", this.Context.ConnectionId);

  10. return base.OnConnectedAsync();

  11. }


  12. public override Task OnDisconnectedAsync(Exception exception)

  13. {

  14. Console.WriteLine("靠,有人跑路了:{0}", this.Context.ConnectionId);

  15. return base.OnDisconnectedAsync(exception);

  16. }

  17. }


  18. public class MessageBody

  19. {

  20. public int Type { get; set; }

  21. public string UserName { get; set; }

  22. public string Content { get; set; }

  23. }

上面这段代码非常简单,WeChatHub 类 只有一个方法 Send,表示消息入口,其参数接收一个实体类 MessageBody ,这种写法非常有用,后续文章会介绍;现在,先让我们集中精力完成一个群发通信。

2.2 配置 SignalR ,进行依赖注入
  1. public void ConfigureServices(IServiceCollection services)

  2. {

  3. services.AddSignalR();

  4. ...

  5. }

2.3 配置 SignalR 路由地址
  1. public void Configure(IApplicationBuilder app, IHostingEnvironment env)

  2. {

  3. app.UseSignalR(routes =>

  4. {

  5. routes.MapHub<WeChatHub>("/wechatHub");

  6. });

  7. ...

  8. }

  • 到这里,服务器基架已搭建完成

2.4 编写客户端代码

为了在 Web 浏览器中使用 SignalR,我们编写了一小段 js 代码到文件 wechat.js,并将其和 signalr.js 引入到 Html 页面中,客户端 wechat.js 代码如下:

  1. "use strict";


  2. var connection = new signalR.HubConnectionBuilder()

  3. .withUrl("/wechatHub")

  4. .build();


  5. connection.on("Recv", function (data) {

  6. var li = document.createElement("li");

  7. li = $(li).text(data.userName + ":" + data.content)

  8. $("#msgList").append(li);

  9. });


  10. connection.start()

  11. .then(function () {

  12. console.log("SignalR 已连接");

  13. }).catch(function(err) {

  14. console.log(err);

  15. });


  16. $(document).ready(function () {

  17. $("#btnSend").on("click", () => {

  18. var userName = $("#userName").val();

  19. var content = $("#content").val();

  20. console.log(userName + ":" + content);

  21. connection.invoke("send", { "Type": 0, "UserName": userName, "Content": content });

  22. });

  23. });

这段代码需要稍微解释一下。首先,创建了一个 SignalR 的 connection 对象,紧接着,马上使用 connection 绑定了一个事件,该事件的名称和服务器 Send 方法中第一个参数的值相呼应,通过这种绑定,客户端就可以接收到服务器推送过来的消息,反之,通过 connection.invoke("send",xxx),也可以将消息发送到服务器端的 Send 方法中

3. 测试消息推送

为了直观的演示通讯的过程,我简单写了一点 Html 样式代码(并非我所擅长),首先我们来看看 SignalR 的连接过程,定位到项目根目录,使用 dotnet run 启动服务,看到如下画面:

3.1 启动服务

640?wx_fmt=png

3.2 查看 SignalR 连接过程

输入网站: http://localhost:5000/ 访问网站,看到如下画面红框处,表示连接成功

640?wx_fmt=png

看看服务器的输出内容

640?wx_fmt=png

3.3 开始发送消息

为了演示消息过程,我们分别打开两个浏览器窗口,模拟两个人在群聊,同时,把他们的消息打印到网页上,最终效果图如下

640?wx_fmt=png

非常完美,现在所有通过 http://localhost:5000 地址访问该站点的人,都可以同时收到其它人发送的消息了。

结束语

开篇已结束,关于 SignalR 的原理性内容,在开篇文章中不会涉及,快速上手才有兴趣深入,这和谈恋爱好像有点不同,逃~;下一篇将在本文的基础上,加入一些实际应用上的内容,最终,完成一个可以商业应用的例子,本系列的所有代码都会托管到 GitHub,欢迎大家下载和 Star,感谢您的点赞!

演示代码下载

https://github.com/lianggx/Examples/tree/master/SignalR/Ron.SignalRLesson1


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

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

相关文章

【学习笔记】信息学竞赛中的概率与期望小结

信息竞赛——概率与期望事件事件的蕴含、包含事件的互斥事件的对立事件的和&#xff08;并&#xff09;事件的积&#xff08;交&#xff09;事件的差概率事件的独立性全概率公式贝叶斯公式概率DP&#xff08;竞赛中的考察&#xff09;期望&#xff08;竞赛中的考察&#xff09;…

尝试:Script Lab,快速 O365 开发工具//SL01)

《前言》Script Lab 我希望有一个系列&#xff08;连载&#xff09;&#xff0c;可是我挺担心没偿没有能力去驾驭它。虽然早年前己经接触过&#xff0c;但一直未有下决心开始 Office 365 的开发之旅&#xff0c;虽然一直被光标老师所鼓舞&#xff0c;但是我心有旁骛还没有真正做…

Keiichi Tsuchiya the Drift King

Keiichi Tsuchiya the Drift King 题意&#xff1a; 给定一辆小车长宽分别为 b&#xff0c;a&#xff0c;轨道的圆弧部分半径为 r&#xff0c;圆弧对应的角度为 d&#xff0c;求出小车能通过轨道的最小轨道宽度 w。 题解&#xff1a; 我们考虑小车处于什么状态会使弯道最宽…

AspNet Core 下利用普罗米修斯+Grafana构建Metrics和服务器性能的监控

概述Prometheus是一套开源的监控&报警&时间序列数据库的组合,起始是由SoundCloud公司开发的。该项目有非常活跃的社区和开发人员&#xff0c;目前是独立的开源项目&#xff0c;现在最常见的Kubernetes容器管理系统中&#xff0c;通常也会搭配Prometheus进行监控。prome…

软件工程真的是一门什么用都没有的学科么?

软件工程真的是一门什么用都没有的学科么&#xff1f;-----读《构建之法》有感楔子我很惭愧&#xff0c;构建之法这本书已经出版四五年了&#xff0c;我之前却未曾涉猎&#xff0c;还是在通过组织长沙.net技术社区之后&#xff0c;才因为因缘际遇有幸认识邹欣邹老师之后&#x…

Ball Dropping

Ball Dropping 题意&#xff1a; 求&#xff1f;的具体长度 题解&#xff1a; 算一算就出来了 代码&#xff1a; #include<bits/stdc.h> using namespace std; int main(){double r,a,b,h;cin>>r>>a>>b>>h;if(2*r<b&&2*r<…

尝试:Script Lab,开发模式之知识储备//SL02

前期00&#xff1a;深度&#xff1a;从 Office 365 新图标来看微软背后的设计新理念前期01&#xff1a;尝试&#xff1a;Script Lab&#xff0c;快速 Office 365 开发工具 //SL01本期02&#xff1a;尝试&#xff1a;Script Lab&#xff0c;开发模式之知识储备 //SL02项目特点适…

WebApi网关之Bumblebee和Ocelot性能对比

Bumblebee是基于.net core 2.1开发的WebApi网关组件&#xff0c;由于Bumblebee所追求的轻量化和性能&#xff0c;所以它并没有像Ocelot那样从asp.net core上进行扩展&#xff1b;而是构建在BeetleX.FastHttpApi之上&#xff0c;主要原因BeetleX.FastHttpApi有着更轻量化和高性能…

在 .NET Core 中运行 JavaScript

一.前言在 .NET Framework 时&#xff0c;我们可以通过V8.NET等组件来运行 JavaScript&#xff0c;不过目前我看了好几个开源组件包括V8.NET都还不支持 .NET Core &#xff0c;我们如何在 .NET Core 中运行 JavaScript 呢&#xff0c;答案是使用 NodeServices。关于为何有在 .N…

Named Volume 在 MySQL 数据持久化上的基本应用

原文作者&#xff1a;春哥非常感谢春哥的投稿&#xff0c;同时也有一些感慨。初识春哥时&#xff0c;春哥是美术设计大咖。后不久&#xff0c;创业并致力于游戏开发&#xff0c;已有3年。从Unity3D到IOS&#xff08;Swift&#xff09;开发&#xff0c;从前端开发到后端以及容器…

.Netcore 2.0 Ocelot Api网关教程(7)- 限流

本文介绍Ocelot中的限流&#xff0c;限流允许Api网关控制一段时间内特定api的总访问次数。限流的使用非常简单&#xff0c;只需要添加配置即可。1、添加限流修改 configuration.json 配置文件&#xff0c;对 UpstreamPathTemplate 为 /webapib/values 的配置修改如下&#xff1…

微信开发必看,使用.Net Core 开发微信跨平台应用

.NET Core 是一个开源通用的开发框架&#xff0c;源码由微软官方和社区共同支持。支持跨平台&#xff0c;即支持在 Window&#xff0c;macOS&#xff0c;Linux 等系统上的开发和部署&#xff0c;并且可以在硬件设备&#xff0c;云服务&#xff0c;和嵌入式/物联网方案中进行使用…

CF1526 D. Kill Anton

CF1526 D. Kill Anton 题意&#xff1a; 给你一个由’A’,‘N’.‘T’,O’四个字符组成的字符串b&#xff0c;现在要求你改变b的顺序得到a&#xff0c;使得a通过移动回到b的步数最多。 每次移动只能移动相邻两项 题解&#xff1a; 官方题解说&#xff1a;最佳情况为相同字符…

ASP.NET Core 3.0预览版体验

目前.NET Core 3.0的版本为.NET Core 3.0 Preview 3&#xff0c;对应ASP.NET Core 3.0 Preview 3。ASP.NET Core 3.0 之后将不再支持.NET Framework&#xff0c;只运行在.NET Core 上面。ASP.NET Core 3.0 现在已经出到了第三个预览版&#xff0c;增加和改进了很多功能。环境准…

C# .net 中 Timeout 的处理及遇到的问题

C# 中 Timeout 的处理前言最近在项目中要实现一个功能&#xff0c;是关于 Timeout 的&#xff0c;主要是要在要在 TCP 连接建立的时间 和 整个请求完成的时间&#xff0c;在这两个时间层面上&#xff0c;如果超出了设置的时间&#xff0c;就抛出异常&#xff0c;程序中断。研究…

[CodeJam 2021 Round 3] Square Free(调整法 / 字典序最小解网络流)

CodeJam 2021 Round3 Square Freeproblemsolutioncodecode-stdproblem 神奈子是个很爱打麻将的老婆婆&#xff0c;有一天她把她的麻将放进了一个 nmn\times mnm 的网格图里&#xff0c;每个麻将可以左斜着放入网格中&#xff08;如 / &#xff09;&#xff0c;也可以右斜着&am…

ConsurrentDictionary并发字典知多少?

在上一篇文章你真的了解字典吗?一文中我介绍了Hash Function和字典的工作的基本原理.有网友在文章底部评论,说我的Remove和Add方法没有考虑线程安全问题.https://docs.microsoft.com/en-us/dotnet/api/system.collections.generic.dictionary-2?redirectedfromMSDN&viewn…

ASP.NET Core 基于JWT的认证(二)

上一节我们对 Jwt 的一些基础知识进行了一个简单的介绍&#xff0c;这一节我们将详细的讲解,本次我们将详细的介绍一下 Jwt在 .Net Core 上的实际运用。.Net Core 2.2Visual Studio 2017ASP.NET Core WebAPI2在上一篇文章中&#xff0c;我们详细的介绍了JWT的知识&#xff0c;这…

Docker最全教程之Go实战,墙裂推荐(十九)

前言与其他语言相比&#xff0c;Go非常值得推荐和学习&#xff0c;真香&#xff01;为什么&#xff1f;主要是可以直接编译成机器代码&#xff08;性能优越&#xff0c;体积非常小&#xff0c;可达10来M&#xff0c;见实践教程图片&#xff09;而且设计良好&#xff0c;上手门槛…

你注意到 .Net Framework 和 .Net Core 中使用 Session 的区别了吗?

在测试一个例子时发现的问题&#xff0c;这个示例实现的功能是刷新页面也能保持表格锁定列的状态&#xff0c;先看下页面的完成效果&#xff1a;测试中发现&#xff0c;几乎相同的代码&#xff1a;在 FineUIMvc&#xff08;Net Framework&#xff09;下没有问题&#xff1a;htt…