当前位置： 移动技术网 > IT编程>开发语言>.net > SignalR第一节-在5分钟内完成通信连接和消息发送

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

2019年03月15日  | 移动技术网IT编程  | 我要评论

qq餐厅打不开,陕西自考,孕妇可以吃空心菜吗

前言

首先声明，这又是一个小白从入门到进阶系列。
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://www.lhsxpumps.com/_localhost:5000/ 访问网站，看到如下画面红框处，表示连接成功

看看服务器的输出内容

3.3 开始发送消息

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

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

结束语

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

演示代码下载

https://github.com/lianggx/examples/tree/master/signalr/ron.signalrlesson1

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网