什么是ASP.NET SignalR?

ASP.NET SignalR是一个方便程序员添加实时网络通信功能的类库。所谓的实时网络通信功能（Real-time Web Functionality）就是需要服务器主动推送数据到用户客户端，而非服务器等待用户客户端请求数据的功能。以聊天室为例，当一个用户发送群发消息之后，在所有用户的聊天窗口中都需要显示出这条消息，如果每个用户客户端都是用Ajax每隔一定时间去服务器上拉取消息，那样不仅效率低下并增加服务器负担，也不是真正意义上的实时程序。

消息传输机制

ASP.Net SignalR使用新的Websocket传输协议，他实现了浏览器和服务器全双工通信（允许服务器主动发消息给客户端），并兼容以前的长连接(Long poll)传输方式， 所以对于开发人员来说，不需要自己去维护使用何种传输方式，SignalR会自动根据客户端浏览器的版本自动切换消息传输方式

  • 对于IE8，会自动切换到Long poll传输。
  • 对于IE9及以上版本，会使用Websocket传输。

连接与枢纽

SignalR API包含2个模型来帮助客户端与服务器进行通信： 持久连接（Persistent Connections）与枢纽 (hubs).

持久连接负责传输消息，枢纽提供了一种很有趣的机制，允许开发人员在客户端调用服务器端方法或服务器端调用客户端方法。

枢纽(Hubs)是如何工作的

当服务器端程序调用客户端方法时，一个包含客户端方法名及参数的Json数据包会通过持久连接传输到客户端，客户端会根据数据包中的方法名进行匹配，如果找到相同方法名的方法，就会自动调用找到的方法，方法所需的参数值会使用数据包中对应的参数值。

简单的聊天室

下面用一个聊天室的例子，熟悉一下SignalR的基本使用方式。

这个聊天室页面的需求如下：

  1. 用户打开聊天室页面，需要首先录入自己的昵称，输入昵称之后，通知聊天室的其他用户该用户进入聊天室
  2. 用户可以使用在聊天室中发送公共消息
  3. 用户可以使用“to 用户名 消息内容”的方式发送私聊消息

添加项目

新建一个空的ASP.NET Web Application工程


通过Nuget或者最新版本的SignalR库

展开Package Manager Console面板，输入

install-package Microsoft.AspNet.SignalR

添加Startup.cs启用SignalR

using Microsoft.Owin;

using Owin;

 

[assembly: OwinStartup(typeof(ChatRoom.Startup))]

 

namespace ChatRoom

{

    public class Startup

    {

        public void Configuration(IAppBuilder app)

        {

            //启用SignalR

            app.MapSignalR();

        }

    }

}

添加枢纽(Hub)

在工程中添加ChatRoomHub.cs, 选择SignalR Hub Class(v2)

替换ChatRoomHub类中的内容替换

using Microsoft.AspNet.SignalR;

using System.Collections.Generic;

using System.Linq;

 

namespace ChatRoom

{

    public class ChatRoomHub : Hub

    {

        private static Dictionary<string, string> _nickNames = new Dictionary<string, string>();

 

        public void SetNickName(string nickName)

        {

            //当Hub启动完毕，每个连接到这个Hub的客户端都会自动分配一个唯一的ConnectionId。

            //当SignalR向指定客户端推送消息的时候，需要指定ConnectionId, 所以这里需要记录一下每个昵称对应的客户端ConnectionId

            _nickNames.Add(Context.ConnectionId, nickName);

 

            //当用户设置昵称之后，需要发送欢迎信息到所有的用户客户端，调用客户端receiveWelcomeMessage方法显示欢迎信息

            Clients.All.ReceiveWelcomeMessage($"{nickName}进入聊天室。");

        }

 

        public void Send(string nickName, string message)

        {

            if (string.IsNullOrWhiteSpace(nickName) || string.IsNullOrWhiteSpace(message))

            {

                //如果用户昵称或者消息不存在，就不做任何操作

                return;

            }

 

            if (message.StartsWith("to") && message.Split(' ').Length == 3)

            {

                //私聊消息

                var toUserName = message.Split(' ')[1];

 

                if (_nickNames.ContainsValue(toUserName))

                {

                    var connectionId = _nickNames.First(p => p.Value == toUserName).Key;

 

                    if (!string.IsNullOrWhiteSpace(connectionId) && connectionId != Context.ConnectionId)

                    {

                        Clients.Client(connectionId).ReceivePrivateMessage(nickName, message.Split(' ')[2]);

                    }

                }

            }

            else

            {

                //普通广播消息

                if (_nickNames.ContainsValue(nickName))

                {

                    Clients.All.ReceiveBroadcastMessage(nickName, message);

                }

            }

        }

    }

}

添加显示页面

添加空html文件ChatRoom.html, 使用以下文件替换

<!DOCTYPE html>

<html>

<head>

    <title>SignalR Simple Chat</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.6.4.min.js"></script>

    <script src="Scripts/jquery.signalR-2.2.2.min.js"></script>

    <script src="signalr/hubs"></script>

 

    <script type="text/javascript">

        $(function () {

 

            //使用代理模式, 创建客户端的hub代理

            var chat = $.connection.chatRoomHub;

 

            //服务器Hub中, 调用ReceiveWelcomeMessage方法时, 会执行客户端的chat.client.receiveBroadcastMessage方法

            chat.client.receiveBroadcastMessage = function (name, message) {

 

                //防JS输入

                var encodedName = $('<div />').text(name).html();

                var encodedMsg = $('<div />').text(message).html();

 

                $('#discussion').append('<li><strong>' + encodedName

                    + '</strong>:  ' + encodedMsg + '</li>');

            };

 

            //服务器Hub中, 调用ReceiveWelcomeMessage方法时, 会执行客户端的chat.client.receiveWelcomeMessage方法

            chat.client.receiveWelcomeMessage = function (message) {

                var encodedMsg = $('<div />').text(message).html();

 

                $('#discussion').append('<li><strong style="color:blue">' + encodedMsg

                    + '</strong></li>');

            };

 

            //服务器Hub中, 调用ReceivePrivateMessage方法时, 会执行客户端的chat.client.receivePrivateMessage方法

            chat.client.receivePrivateMessage = function (name, message) {

                var encodedName = $('<div />').text(name).html();

                var encodedMsg = $('<div />').text(message).html();

 

                $('#discussion').append('<li><strong style="color: green">' + encodedName

                    + '偷偷的跟你说</strong>:  ' + encodedMsg + '</li>');

            };

 

            //通过代理连接到服务器Hub

            $.connection.hub.start().done(function () {

                $('#sendmessage').click(function () {

                    chat.server.send($('#displayname').val(), $('#message').val());

 

                    $('#message').val('').focus();

                });

 

                //连接成功后, 需要用户立刻输入昵称

                $('#displayname').val(prompt('Enter your name:', ''));

                chat.server.setNickName($('#displayname').val());

                $('#message').focus();

            });

        });

    </script>

</body>

</html>

最终实现效果

SignalR学习笔记（一） 简单聊天室的更多相关文章

  1. Asp.Net SignalR - 简单聊天室实现

    简单聊天室 使用持久链接类我们就可以做一些即时通讯的应用了,我使用Group做了一个简单的聊天室,先上图技术细节下面再讲 可以加入聊天室.创建聊天室.发送消息,下面就说说我是如何通过Group做出来的 ...

  2. 简单聊天室(java版)

    这是本人从其他地方学习到的关于聊天室的一个模本,我从中截取了一部分关于客户端和服务端通信的Socket的内容.希望对大家对socket有个了解,我写的这些代码可以实现两人或多人在多台电脑上实现简单的对 ...

  3. JSP学习笔记(三):简单的Tomcat Web服务器

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

  4. 基于Server-Sent Event的简单聊天室　Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  5. Python Socket 简单聊天室2

    上篇文章写了一个简单的单线程的一问一答的简单聊天室.这次我们使用SocketServer模块搭建一个多线程异步的聊天室. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  6. SignalR学习笔记（二）高并发应用

    虽然SignalR借助Websocket提供了很强大的实时通讯能力,但是在有些实时通讯非常频繁的场景之下,如果使用不当,还是会导致服务器,甚至客户端浏览器崩溃. 以下是一个实时拖拽方块项目的优化过程 ...

  7. SpringBoot 搭建简单聊天室

    SpringBoot 搭建简单聊天室(queue 点对点) 1.引用 SpringBoot 搭建 WebSocket 链接 https://www.cnblogs.com/yi1036943655/p ...

  8. ASP.NET SingalR + MongoDB 实现简单聊天室（一）：搭建基本框架

    ASP.NET SingalR不多介绍.让我介绍不如看官网,我这里就是直接上源代码,当然代码还是写的比较简单的,考虑的也少,希望各位技友多多提意见. 先简单介绍聊天室功能: 用户加入聊天室,自动给用户 ...

  9. 利用socket.io+nodejs打造简单聊天室

    代码地址如下:http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...

  10. JAVA WEB学习笔记(三):简单的基于Tomcat的Web页面

    注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...

随机推荐

  1. ftp无法上传问题

    1.背景 ftp服务端和客户端一直未做任何改动,无法上传属于突发状态,除此客户端外其他客户端上传正常 客户端(SunOS系统)可以正常连接ftp的xxx21端口,但是传输数据(文件)时无法正常传输 上 ...

  2. 数据分析 大数据之路 三 numpy

    import numpy as np a = np.arange(9) b = a.reshape(3,3) print(b) print(b.max(axis=0)) # axis=0 示为 Y 轴 ...

  3. JavaScript（九）

    内置对象 1.document document.referrer //获取上一个跳转页面的地址(需要服务器环境) 2.location window.location.href //获取或者重定ur ...

  4. Hibernte

    什么是CRM?(了解) CRM(customer relationship management)即客户关系管理,是指企业用CRM技术来管理与客户之间的关系.在不同场合下,CRM可能是一个管理学术语, ...

  5. JavaScript递归

    什么是递归? 在函数的内部调用自己 下面有一个例子,通过这个例子,大家就可以了解什么是递归 function fun(){ console.log(new Date()) //获取当前时间,并在控制台 ...

  6. 第一次冲刺意见汇总&团队第一阶段总结

    大家对我们小组的意见基本是: 1.设计界面简单 2.功能较少 3.没有实现切换歌曲的功能 谢谢HT小组的走心评价 接下来我们组内准备:1.先调节用户界面,插入一些图片,美化界面,给用户直观的体验上升. ...

  7. js的七大设计原则--迪米特原则

    一.什么是迪米特原则 迪米特原则也叫最少知道原则,一个类应该对其他对象保持最少的了解.通俗来讲,就是一个类对自己依赖的类知道的越少越好.因为类与类之间的关系越密切,耦合度越大,当一个类发生改变时,对另 ...

  8. 你不知道的JS之作用域和闭包（三）函数 vs. 块级作用域

      原文:你不知道的js系列 在第(二)节中提到的,标识符在作用域中声明,这些作用域就像是一个容器,一个嵌套一个,这个嵌套关系是在代码编写时定义的. 那么到底是什么产生了一个新的作用域,只有函数能做到 ...

  9. barrel_shift

    barrel_shift的目的就是在一个bus中根据idx动态选择一部分数据输出如: *dw-:]; -:];// 0~132 *dw-:]; 上面就要求从256的数据单元中选择124个数据单元输出, ...

  10. python-list操作

    字符串取值不好取 数组,存在编号,易于取值,(list array) 1.list 定义:name=[]   由中括号定义数组,例如name=['jyj','ws','jyt','js'] 2.lis ...