SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）

news2024/12/21 11:15:21

SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升，5个Demo贯彻全篇，感兴趣的玩才是真的学）

官方demo:http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr

应用情景之一：

没太多连续的时间来研究SignalR，所以我把这篇文章分了三个阶段：

第一个阶段，简单使用，熟悉并认识SignalR

第二个阶段，实现上图的单聊效果

第三个阶段，实现类似QQ群发的功能

扩展阶段，如果有时间，逆天会再开一篇，封装一个LoTSignalR，看过逆天封装的人都知道，绝对简单又轻量级

比如LoTQQ，现在已经很多人在用了，后期会添加新功能，敬请期待~~

++++++++++++++++++ 我是华丽的分割线 +++++++++++++++++++++

步入正轨：

第一个阶段：

1.什么是ASP.NET SignalR？

ASP .NET SignalR是一个 ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。

WebSockets是Html5提供的新的API，可以在Web网页与服务器端间建立Socket连接，当WebSockets可用时（即浏览器支持Html5）SignalR使用WebSockets，当不支持时SignalR将使用其它技术来保证达到相同效果。

SignalR当然也提供了非常简单易用的高阶API，使服务器端可以单个或批量调用客户端上的JavaScript函数，并且非常 方便地进行连接管理，例如客户端连接到服务器端，或断开连接，客户端分组，以及客户端授权，使用SignalR都非常 容易实现。

2.可以使用ASP.NET SingalR做什么？
SignalR 将与客户端进行实时通信带给了ASP .NET 。当然这样既好用，而且也有足够的扩展性。以前用户需要刷新页面或使用Ajax轮询才能实现的实时显示数据，现在只要使用SignalR，就可以简单实现了。

最重要的是您无需重新建立项目，使用现有ASP .NET项目即可无缝使用SignalR。

网上某架构图：

上面乱七八糟的估计很多人懒得看，好吧，你可以这样理解：

使用了SignalR就可以让客户端通过SignalR代理直接调用服务端的方法，让服务端通过SignalR直接调用客户端的方法

下面我们来实例演示一下，先演示一下不用IIS的情况：

新建一个控制台项目，引入 signalR Self Host （可以思考一下为什么会用NuGet包，他到底好在哪？O(∩_∩)O~不清楚等项目演示完你应该就知道了）

这是他的依赖项

安装一下Owin.Cors

依赖项：

新增一个Owin的Startup类，类似于我们传统项目的Global文件

注册一下signalR中间组件（学过mvc的可以变相的理解为注册路由之类的）

在main方法中绑定端口（不一定是8080，比如我demo中就用的其他端口）

创建一个“SignalR集线器”（控制台这边因为没有集线器所以只能自己建类）

建了一个DntHub，定义了一个服务器端的方法，叫ServiceSend（一会会用到）

转到定义，看看Hub类（好东西啊，还有分组啥的，下面会讲）

运行一下，如果出错请参考我的这篇文章：Owin：“System.Reflection.TargetInvocationException”类型的未经处理的异常在 mscorlib.dll 中发生 - 毒逆天 - 博客园

先看看共引用多少dll（和MVC之类的比起是不是简洁很多？一会演示好处在哪）最小引用

创建一个web的Client，引用一下 SignalR的js包，其实你会发现就是多了几个js包并没有引用任何dll（必须的，不然岂不是太臃肿？）

前端的调用步骤：

    <!--
    总结一下：
    1.先引入jq包，再引入signalR的js包，再引入signalR动态生成的hubs
    2.设置signalR的hubs url地址：$.connection.hub.url =xxx
    3.声明一个代理对象来引用集线器：var chat = $.connection.dntHub;
    4.创建一个客户端方法：chat.client.xxxx=function(){}
    5.启动并调用服务端方法：
        $.connection.hub.start().done(function(){
            chat.server.xxx()
        });
    -->

代码贴起：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>简单聊天程序</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.js"></script>
    <!--动态生成的-->
    <script src="http://localhost:5438/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            //日记记录
            $.connection.hub.logging = true;
 
            //设置hubs的url
            $.connection.hub.url = "http://localhost:5438/signalr";
 
            // 声明一个代理来引用该集线器。
            var chat = $.connection.dntHub;
 
            // 创建一个方法供服务端调用
            chat.client.addMessage = function (name, message) {
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                $('#discussion').append('<li><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            $('#displayname').val('路人');
 
            // 启动 connection
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    //调用服务器端方法
                    chat.server.serviceSend($('#displayname').val(), $('#message').val());
                });
            });
        });
    </script>
    <!--
    总结一下：
    1.先引入jq包，再引入signalR的js包，再引入signalR动态生成的hubs
    2.设置signalR的hubs url地址：$.connection.hub.url =xxx
    3.声明一个代理对象来引用集线器：var chat = $.connection.dntHub;
    4.创建一个客户端方法：chat.client.xxxx=function(){}
    5.启动并调用服务端方法：
        $.connection.hub.start().done(function(){
            chat.server.xxx()
        });
    -->
</body>
</html>

如果要调试的话，保证服务端先运行，调试小技巧：

下面说一下上面的好处：

webclient我就单独拿出来了（一个js包，一个index.html），控制台的程序我也单独拿出来了，下面先运行一下服务端，再打开index.html

再次验证最上面说的，端口不固定

第二个阶段：

QQ聊天案例，先讲一种常规的方法，下面会讲一种简单方法

先看看gif效果图把

定义一个BaseHub类，里面用 qqModeList来临时存放数据（用户数据）

QQModel，目前就用到两个属性，其他的可以自己扩展

定义了一个上线方法，一会每个客户端都会调用（本来是准备用OnConnected的，没办法他没参数。。。而且这个时候，qq昵称还没有产生，于是我取其次的方案）

定义一个发消息的方法

下面就是前端的东西了，注释很详细，不清楚可以直接留言，我没高兴深度封装，主要就是简单演示一下

代码贴上：

客户端-逆天

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>仿QQ聊天--我是逆天</title>
    <link href="Style/MyQQ.css" rel="stylesheet" />
</head>
<body>
    <div><input id="inputMsg" /><input id="btn" type="button" value="发消息" /></div><br /><br />
    <div id="main"></div>
 
    <script src="Scripts/jquery-2.2.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="http://localhost:5438/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var leftHtml = [
                '<div class="sender">',
                '<div><img src="http://img.jfdown.com/jfdown/201403/ygald3wajct.jpg"></div>',
                '<div><div class="left_triangle"></div>',
                '<span>{msg}</span></div></div>'
            ].join('');
 
            var rightHtml = [
                '<div class="receiver">',
                '<div><img src="http://tb.himg.baidu.com/sys/portrait/item/306c9328?t=1397975854"></div>',
                '<div><div class="right_triangle"></div>',
                '<span>{msg}</span></div></div>'
            ].join('');
 
            //设置hubs的url
            $.connection.hub.url = 'http://localhost:5438/signalR';
            // 声明一个代理
            var qqProxy = $.connection.qQHub;
            // 创建一个方法供服务端调用
            qqProxy.client.sendMsg = function (msg) {
                $('#main').append(leftHtml.replace('{msg}', msg));
            }
            // 启动 connection
            $.connection.hub.start().done(function () {
                qqProxy.server.online('逆天');//QQ昵称
                $('#btn').click(function () {
                    //获取输入
                    var qqmsg = $('#inputMsg').val();
                    //给逆天发消息
                    qqProxy.server.serviceSend('妹子', qqmsg);
                    $('#main').append(rightHtml.replace('{msg}', qqmsg));
                });
            });
        });
    </script>
</body>
</html>

客户端-美女

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>仿QQ聊天--我是美女</title>
    <link href="Style/MyQQ.css" rel="stylesheet" />
</head>
<body>
    <div><input id="inputMsg" /><input id="btn" type="button" value="发消息" /></div><br /><br />
    <div id="main"></div>
 
    <script src="Scripts/jquery-2.2.1.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="http://localhost:5438/signalr/hubs"></script>
    <script type="text/javascript">
        $(function () {
            var rightHtml = [
                '<div class="sender">',
                '<div><img src="http://img.jfdown.com/jfdown/201403/ygald3wajct.jpg"></div>',
                '<div><div class="left_triangle"></div>',
                '<span>{msg}</span></div></div>'
            ].join('');
 
            var leftHtml = [
                '<div class="receiver">',
                '<div><img src="http://tb.himg.baidu.com/sys/portrait/item/306c9328?t=1397975854"></div>',
                '<div><div class="right_triangle"></div>',
                '<span>{msg}</span></div></div>'
            ].join('');
 
            //设置hubs的url
            $.connection.hub.url = 'http://localhost:5438/signalR';
            // 声明一个代理
            var qqProxy = $.connection.qQHub;
            // 创建一个方法供服务端调用
            qqProxy.client.sendMsg = function (msg) {
                $('#main').append(leftHtml.replace('{msg}',  msg));
            }
            // 启动 connection
            $.connection.hub.start().done(function () {
                qqProxy.server.online('妹子');//QQ昵称
                $('#btn').click(function () {
                    //获取输入
                    var qqmsg = $('#inputMsg').val();
                    //给逆天发消息
                    qqProxy.server.serviceSend('逆天', qqmsg);
                    $('#main').append(rightHtml.replace('{msg}', qqmsg));
                });
            });
        });
    </script>
</body>
</html>

第三阶段

群发

我们先接着昨天的QQ聊天来说

这次用一个简单的方法搞定

一个键值对集合存放ConnectionId和GroupName

每个客户端连接的时候会加入一个组

 断开的时候退出组

 发消息

前端也进行了优化。ok，signalR第三个demo诞生，比昨天简单多了

下面可以说说类似于QQ群的群发消息了

这个是逆天的自学笔记：

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

超大模型如何实现3D WEB轻量化渲染？

超大模型如何实现3D WEB轻量化渲染？

Hoops Communicator是Tech Soft 3D旗下的主流产品之一&#xff0c;具有强大的、专用的高性能图形内核&#xff0c;专注于基于Web的高级3D工程应用程序。其由HOOPS Server和HOOPS Web Viewer两大部分组成&#xff0c;提供了HOOPS中的HOOPS Convertrer、Data Authoring的模型转换…
阅读更多...
电脑提示msvcr120.dll丢失的解决方法win10，总共有三种，那个更方便

电脑提示msvcr120.dll丢失的解决方法win10，总共有三种，那个更方便

电脑修复经验分享&#xff0c;dll动态链接库文件丢失修复教程&#xff0c;DLL 文件&#xff0c;即动态链接库&#xff0c;也有人称作应用程序拓展。一种可执行文件&#xff0c;允许程序共享执行特殊任务所需的代码和其他资源。msvcr120.dll也是属于dll文件之一&#xff0c;在Wi…
阅读更多...
python 面向对象 对象

python 面向对象 对象

类 构造函数 # 创建类 class Student:name None # 成员属性age None # 成员属性def say(self): # 成员方法print(self.name)# 构造函数def __init__(self,name,age):self.name nameself.age age#创建类对象 my_student Student() # 对象的属性 赋值 my_student.name …
阅读更多...
Mysql数据库——用户管理与授权

Mysql数据库——用户管理与授权

Mysql数据库——用户管理与授权 一、登录用户的管理1&#xff0e;新建用户2&#xff0e;查看用户信息3&#xff0e;重命名用户4&#xff0e;删除用户5&#xff0e;修改当前登录用户密码6&#xff0e;修改其他用户密码7&#xff0e;忘记 root 密码的解决办法 二、数据库用户授权…
阅读更多...
【Docker】Docker中Linux 容器、网络虚拟化与虚拟局域网的技术特点详细讲解

【Docker】Docker中Linux 容器、网络虚拟化与虚拟局域网的技术特点详细讲解

前言 Docker 是一个开源的应用容器引擎&#xff0c;让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 &#x1f4d5;作者简介&#xff1a;热…
阅读更多...
Stream流学习前置知识之匿名内部类

Stream流学习前置知识之匿名内部类

目录 匿名内部类 概念 语法体 案例演示 匿名内部类 概念 没有名字的内部类 用于在程序中创建一个只使用一次的临时类 使用 new 关键字来创建一个对象&#xff0c;重写该类的方法或实现该类的接口 语法体 new 父类构造器或接口() {// 匿名内部类的定义 } 案例演示 T…
阅读更多...
【深度学习】基于Qt的人脸识别系统，门禁人脸识别系统，Python人脸识别流程，树莓派

【深度学习】基于Qt的人脸识别系统，门禁人脸识别系统，Python人脸识别流程，树莓派

文章目录 人脸识别过程人脸检测人脸对齐人脸特征提取特征距离比对人脸识别系统 人脸识别过程 在深度学习领域做人脸识别的识别准确率已经高到超出人类识别&#xff0c;但综合考虑模型复杂度&#xff08;推理速度&#xff09;和模型的识别效果&#xff0c;这个地方还是有做一些…
阅读更多...
网络安全大厂面试题合集+面试题文档

网络安全大厂面试题合集+面试题文档

以下为网络安全各个方向涉及的面试题&#xff0c;星数越多代表问题出现的几率越大&#xff0c;祝各位都能找到满意的工作。 注&#xff1a;本套面试题&#xff0c;已整理成pdf文档&#xff0c;但内容还在持续更新中&#xff0c;因为无论如何都不可能覆盖所有的面试问题&#xf…
阅读更多...
阿里巴巴开源Chat2DB v1.0.11 初体验

阿里巴巴开源Chat2DB v1.0.11 初体验

阿里巴巴开源Chat2DB v1.0.11 初体验 前言什么是Chat2DB下载安装安装配置Chat2DB初体验配置数据源准备测试数据认识几个功能菜单开始测试自然语言转SQLSQL解释SQL优化 使用总结后续功能结语 前言 作为一名阿里巴巴开源项目的拥护者&#xff0c;从Chat2DB开源至今都有关注这个开…
阅读更多...
计算机视觉重磅会议VAlSE2023召开，合合信息分享智能文档处理技术前沿进展

计算机视觉重磅会议VAlSE2023召开，合合信息分享智能文档处理技术前沿进展

近期&#xff0c;2023年度视觉与学习青年学者研讨会 (Vision And Learning SEminar, VALSE) 圆满落幕。会议由中国人工智能学会、中国图象图形学学会主办&#xff0c;江南大学和无锡国家高新技术产业开发区管理委员会承办。超五千名专家学者、知名高校师生以及来自OPPO、华为、…
阅读更多...
docker 容器的网络类型

docker 容器的网络类型

目录 vmware的三种网卡模式&#xff08;网络模式&#xff09; docker里的四种网络类型 参考资料&#xff1a;Docker四种网络模式 - 简书 (jianshu.com) 1、桥接模式&#xff08;默认情况&#xff09; 2、host模式 3、none模式 4、container模式 创建桥接模式网卡 网卡…
阅读更多...
TensorFlow Core—基本分类：对服装图像进行分类

TensorFlow Core—基本分类：对服装图像进行分类

现在人工智能很火的&#xff0c;看到了这篇文章&#xff0c;给自己普及一下基础知识&#xff0c;也分享给大家&#xff0c;希望对大家有用。 本指南将训练一个神经网络模型&#xff0c;对运动鞋和衬衫等服装图像进行分类。即使您不理解所有细节也没关系&#xff1b;这只是对完…
阅读更多...
「FPGA」基本时序电路元件——锁存器和触发器

「FPGA」基本时序电路元件——锁存器和触发器

「FPGA」基本时序电路元件——锁存器和触发器 文章目录 「FPGA」基本时序电路元件——锁存器和触发器1. 最简单的双稳态元件2. SR锁存器3. D锁存器&#xff08;data latch&#xff09;4. D触发器5. 寄存器&#xff08;register&#xff09; FPGA是一种数字电路实现的方式&#…
阅读更多...
算法设计与分析知识点整理

算法设计与分析知识点整理

文章目录 前言一、算法的基本概念1.算法的基本特征2.算法设计需要满足的目标3.算法和程序的区别 二、时间复杂度计算1.大O表示法2.最坏和平均情况3.根据递归方程求解时间复杂度3.1 根据递归树求解3.2 根据主方法求解 三、六大算法1.分治法1.1 算法思路1.2 适用范围1.3 基本步骤…
阅读更多...
【MySql】聚合函数group byOJ题目

【MySql】聚合函数group byOJ题目

文章目录 聚合函数分组group by使用OJ题目描述描述 本篇主要介绍mysql的聚合函数和group by的使用&#xff0c;最后是OJ题目的练习。 聚合函数 MySQL中的聚合函数用于对数据进行计算和统计&#xff0c;常见的聚合函数包括下面列举出来的聚合函数&#xff1a; 函数 说明…
阅读更多...
python开发构建深度学习分类模型，探索AI在地震事件分类中的应用于可解释性分析

python开发构建深度学习分类模型，探索AI在地震事件分类中的应用于可解释性分析

最近看到了一篇蛮有意思的论文&#xff0c;如下&#xff1a; 将深度学习开发应用到了地震事件分析分类领域中去了&#xff0c;感觉挺有意思&#xff0c;就想着也来自己体验下看看&#xff0c;这里的数据集是网上找到的一个地震波应该是仿真实验的数据集&#xff0c;我们先来看下…
阅读更多...
Pytest教程__Hook函数pytest_addoption(parser)：定义自己的命令行参数（14-1）

Pytest教程__Hook函数pytest_addoption(parser)：定义自己的命令行参数（14-1）

考虑场景&#xff1a; 我们的自动化用例需要支持在不同测试环境运行&#xff0c;有时候在dev环境运行&#xff0c;有时候在test环境运行&#xff1b;有时候需要根据某个参数不同的参数值&#xff0c;执行不同的业务逻辑&#xff1b; 上面的场景我们都可以通过“在命令行中输入…
阅读更多...
浏览器之BFC

浏览器之BFC

浏览器之BFC 什么是BFCBFC的特性特性1&#xff1a;BFC会阻止垂直外边距折叠①相邻兄弟元素margin重叠问题②父子元素margin重叠问题 特性2&#xff1a;BFC不会重叠浮动元素BFC可以包含浮动----清除浮动 什么是BFC Block formatting context直译为"块级格式化上下文Block …
阅读更多...
Python进阶语法之字符串

Python进阶语法之字符串

Python进阶语法之字符串 当我们处理文本数据时&#xff0c;字符串是不可避免的数据类型。Python 提供了很多字符串方法&#xff0c;它们可以帮助我们更方便地操作和处理字符串。在本篇博客中&#xff0c;我们将深入探讨 Python 字符串。 字符串的基本操作 在深入了解字符串…
阅读更多...
亚马逊云科技 | Summit - 中国峰会

亚马逊云科技 | Summit - 中国峰会

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 亚马逊云科技 | Summit - 中国峰会 亚马逊云科技提供全球覆盖广泛、服务深入的云平台&#xff0c;全球数据中心提供超过 200 项功能齐全的服务连续 11 年被 Gartner 评…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023