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
选择 .netcore-2.2 ,取消 https 选择,因为如果选择 https 还需要安装测试证书,为了时间,就别勾选了。
项目创建完成,什么也别做,按下 f5 运行网站,看到如下界面
好的,运行没有问题,我们现在先停止网站,做一些简单的编码工作
1.2 引用 signalr for javascript 客户端 sdk
由于 .netcore 内置了 signalr 组件,我们无需额外引用服务组件,但是需要手动添加 signalr javascript 客户端 sdk,按下图指示添加客户端引用:
- 在弹出的对话框中输入 @aspnet/signalr@1.1.2 并选择“选择特定文件”选项,手动选择两个文件 signalr.js/signalr.min.js,注意不要选择默认,否则安装全部组件太浪费时间,对话框中“目标位置”就是 signalr.js/signalr.min.js 的安装位置,默认为 @aspnet/signalr,这里需要手动改成 /lib/signalr/xxx 下面
耐心等待几秒后安装完成...
2. 编写通讯业务逻辑
为了实现一个简单的群发通讯过程,我们需要分别编写服务器和客户端的代码,值得庆幸的是,这些代码非常简单,服务器和客户端的代码一共不到 100 行。
2.1 编写服务端代码
服务器端的代码如下,创建一个 类 wechathub 继承自 hub 类即可,为了方便演示,我还重写了 hub 的两个方法 onconnectedasync(连接)/ondisconnectedasync(断开)
public class wechathub : hub { public void send(messagebody body) { clients.all.sendasync("recv", body); } public override task onconnectedasync() { console.writeline("哇,有人进来了:{0}", this.context.connectionid); return base.onconnectedasync(); } public override task ondisconnectedasync(exception exception) { console.writeline("靠,有人跑路了:{0}", this.context.connectionid); return base.ondisconnectedasync(exception); } } public class messagebody { public int type { get; set; } public string username { get; set; } public string content { get; set; } }
上面这段代码非常简单,wechathub 类 只有一个方法 send,表示消息入口,其参数接收一个实体类 messagebody ,这种写法非常有用,后续文章会介绍;现在,先让我们集中精力完成一个群发通信。
2.2 配置 signalr ,进行依赖注入
public void configureservices(iservicecollection services) { services.addsignalr(); ... }
2.3 配置 signalr 路由地址
public void configure(iapplicationbuilder app, ihostingenvironment env) { app.usesignalr(routes => { routes.maphub<wechathub>("/wechathub"); }); ... }
- 到这里,服务器基架已搭建完成
2.4 编写客户端代码
为了在 web 浏览器中使用 signalr,我们编写了一小段 js 代码到文件 wechat.js,并将其和 signalr.js 引入到 html 页面中,客户端 wechat.js 代码如下:
"use strict"; var connection = new signalr.hubconnectionbuilder() .withurl("/wechathub") .build(); connection.on("recv", function (data) { var li = document.createelement("li"); li = $(li).text(data.username + ":" + data.content) $("#msglist").append(li); }); connection.start() .then(function () { console.log("signalr 已连接"); }).catch(function(err) { console.log(err); }); $(document).ready(function () { $("#btnsend").on("click", () => { var username = $("#username").val(); var content = $("#content").val(); console.log(username + ":" + content); connection.invoke("send", { "type": 0, "username": username, "content": content }); }); });
这段代码需要稍微解释一下。首先,创建了一个 signalr 的 connection 对象,紧接着,马上使用 connection 绑定了一个事件,该事件的名称和服务器 send 方法中第一个参数的值相呼应,通过这种绑定,客户端就可以接收到服务器推送过来的消息,反之,通过 connection.invoke("send",xxx),也可以将消息发送到服务器端的 send 方法中
3. 测试消息推送
为了直观的演示通讯的过程,我简单写了一点 html 样式代码(并非我所擅长),首先我们来看看 signalr 的连接过程,定位到项目根目录,使用 dotnet run 启动服务,看到如下画面:
3.1 启动服务
3.2 查看 signalr 连接过程
输入网站: http://localhost:5000/ 访问网站,看到如下画面红框处,表示连接成功
看看服务器的输出内容
3.3 开始发送消息
为了演示消息过程,我们分别打开两个浏览器窗口,模拟两个人在群聊,同时,把他们的消息打印到网页上,最终效果图如下
非常完美,现在所有通过 http://localhost:5000 地址访问该站点的人,都可以同时收到其它人发送的消息了。
结束语
开篇已结束,关于 signalr 的原理性内容,在开篇文章中不会涉及,快速上手才有兴趣深入,这和谈恋爱好像有点不同,逃~;下一篇将在本文的基础上,加入一些实际应用上的内容,最终,完成一个可以商业应用的例子,本系列的所有代码都会托管到 github,欢迎大家下载和 star,感谢您的点赞!
演示代码下载
https://github.com/lianggx/examples/tree/master/signalr/ron.signalrlesson1
上一篇: 自媒体被盗号2个月内入账了7万
下一篇: 定位准 用户关注的网站才能网络赚钱