通过三个DEMO学会SignalR的三种实现方式转载https://www.cnblogs.com/zuowj/p/5674615.html

一、理解SignalR

ASP .NET SignalR 是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信（即：客户端（Web页面）和服务器端可以互相实时的通知消息及调用方法），SignalR有三种传输模式：LongLooping(长轮询)、WebSocket（HTML5的WEB套接字）、Forever Frame(隐藏框架的长请求连接)，可以在WEB客户端显式指定一种或几种，也可以采取默认（推荐），若采取默认，SignalR会根据浏览器的环境自动选择合适的传输方式。

二、SignalR的三种实现方式

第一种：采用集线器类（Hub）+非自动生成代理模式:服务端与客户端分别定义的相对应的方法，客户端通过代理对象调用服务端的方法，服务端通过IHubConnectionContext回调客户端的方法，客户端通过回调方法接收结果。

之前我写过一篇文章《分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室》，是通过长轮询+长连接的方式来实现的在线多人聊天室功能，从代码量来看就知道实现起来并不简单，而如今有了SignalR，会简单很多，我这里使用SignalR再来写一个简单的在线多人聊天室示例，以便大家快速掌握SignalR。

DEMO - 1 示例代码如下：

服务端：

//Startup类文件

using System;

using System.Threading.Tasks;

using Microsoft.Owin;

using Owin;

using Microsoft.AspNet.SignalR;

[assembly: OwinStartup(typeof(TestWebApp.Models.Startup))]

namespace TestWebApp.Models

{

public class Startup

{

public void Configuration(IAppBuilder app)

{

app.MapSignalR();

}

//ChatHub类文件

using Microsoft.AspNet.SignalR;

using Microsoft.AspNet.SignalR.Hubs;

using System;

using System.Collections.Concurrent;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace TestWebApp.Models

{

[HubName("chat")]

public class ChatHub : Hub

{

public static ConcurrentDictionary<string, string> OnLineUsers = new ConcurrentDictionary<string, string>();

[HubMethodName("send")]

public void Send(string message)

{

string clientName = OnLineUsers[Context.ConnectionId];

message = HttpUtility.HtmlEncode(message).Replace("\r\n", "<br/>").Replace("\n", "<br/>");

Clients.All.receiveMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), clientName, message);

}

[HubMethodName("sendOne")]

public void Send(string toUserId, string message)

{

string clientName = OnLineUsers[Context.ConnectionId];

message = HttpUtility.HtmlEncode(message).Replace("\r\n", "<br/>").Replace("\n", "<br/>");

Clients.Caller.receiveMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("您对 {1}", clientName, OnLineUsers[toUserId]), message);

Clients.Client(toUserId).receiveMessage(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("{0} 对您", clientName), message);

}

public override System.Threading.Tasks.Task OnConnected()

{

string clientName = Context.QueryString["clientName"].ToString();

OnLineUsers.AddOrUpdate(Context.ConnectionId, clientName, (key, value) => clientName);

Clients.All.userChange(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("{0} 加入了。", clientName), OnLineUsers.ToArray());

return base.OnConnected();

}

public override System.Threading.Tasks.Task OnDisconnected(bool stopCalled)

{

string clientName = Context.QueryString["clientName"].ToString();

Clients.All.userChange(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"), string.Format("{0} 离开了。", clientName), OnLineUsers.ToArray());

OnLineUsers.TryRemove(Context.ConnectionId, out clientName);

return base.OnDisconnected(stopCalled);

}

public ActionResult Index()

{

ViewBag.ClientName = "聊客-" + Guid.NewGuid().ToString("N");

var onLineUserList = ChatHub.OnLineUsers.Select(u => new SelectListItem() { Text = u.Value, Value = u.Key }).ToList();

onLineUserList.Insert(0, new SelectListItem() { Text = "-所有人-", Value = "" });

ViewBag.OnLineUsers = onLineUserList;

return View();

}

WEB客户端：

100

101

102

103

104

105

106

107

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<meta charset="utf-8" />

<title>聊天室</title>

<script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="~/Scripts/jquery.signalR-2.2.0.min.js" type="text/javascript"></script>

<style type="text/css">

#chatbox {

width: 100%;

height: 500px;

border: 2px solid blue;

padding: 5px;

margin: 5px 0px;

overflow-x: hidden;

overflow-y: auto;

}

.linfo {

}

.rinfo {

text-align: right;

}

</style>

<script type="text/javascript">

$(function () {

var clientName = $("#clientname").val();

var eChatBox = $("#chatbox");

var eUsers = $("#users");

var conn = $.hubConnection();

conn.qs = { "clientName": clientName };

conn.start().done(function () {

$("#btnSend").click(function () {

var toUserId = eUsers.val();

if (toUserId != "") {

chat.invoke("sendOne", toUserId, $("#message").val())

.done(function () {

//alert("发送成功！");

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

})

.fail(function (e) {

alert(e);

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

});

}

else {

chat.invoke("send", $("#message").val())

.done(function () {

//alert("发送成功！");

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

})

.fail(function (e) {

alert(e);

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

});

}

});

var chat = conn.createHubProxy("chat");

chat.on("receiveMessage", function (dt, cn, msg) {

var clsName = "linfo";

if (cn == clientName || cn.indexOf("您对") >= 0) clsName = "rinfo";

eChatBox.append("<p class='" + clsName + "'>" + dt + " <strong>" + cn + "</strong> 说：<br/>" + msg + "</p>");

eChatBox.scrollTop(eChatBox[0].scrollHeight);

});

chat.on("userChange", function (dt, msg, users) {

eChatBox.append("<p>" + dt + " " + msg + "</p>");

eUsers.find("option[value!='']").remove();

for (var i = 0; i < users.length; i++) {

if (users[i].Value == clientName) continue;

eUsers.append("<option value='" + users[i].Key + "'>" + users[i].Value + "</option>")

}

});

</script>

</head>

<body>

<h3>大众聊天室</h3>

<div id="chatbox">

</div>

<div>

<span>聊天名称：</span>

@Html.TextBox("clientname", ViewBag.ClientName as string, new { @readonly = "readonly", style = "width:300px;" })

<span>聊天对象：</span>

@Html.DropDownList("users", ViewBag.OnLineUsers as IEnumerable<SelectListItem>)

</div>

<div>

@Html.TextArea("message", new { rows = 5, style = "width:500px;" })

<input type="button" value="发送消息" id="btnSend" />

</div>

</body>

</html>

服务端与客户端代码都比较简单，网上相关的说明也有，这里就不再解说了，只说一下这种方式JS端调用服务端方法采用：chat.invoke，而被服务端回调的方法则采用：chat.on （这里的chat是createHubProxy创建得来的）

第二种：采用集线器类（Hub）+自动生成代理模式

DEMO - 2 示例代码如下：

服务端与DEMO 1相同，无需改变

客户端：

100

101

102

103

104

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<meta charset="utf-8" />

<title>聊天室</title>

<script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="~/Scripts/jquery.signalR-2.2.0.min.js" type="text/javascript"></script>

<script src="~/signalr/hubs" type="text/javascript"></script>

<style type="text/css">

#chatbox {

width: 100%;

height: 500px;

border: 2px solid blue;

padding: 5px;

margin: 5px 0px;

overflow-x: hidden;

overflow-y: auto;

}

.linfo {

}

.rinfo {

text-align: right;

}

</style>

<script type="text/javascript">

$(function () {

var clientName = $("#clientname").val();

var eChatBox = $("#chatbox");

var eUsers = $("#users");

var chat = $.connection.chat;

$.connection.hub.qs = { "clientName": clientName };

chat.state.test = "test";

chat.client.receiveMessage = function (dt, cn, msg) {

var clsName = "linfo";

if (cn == clientName || cn.indexOf("您对")>=0) clsName = "rinfo";

eChatBox.append("<p class='" + clsName + "'>" + dt + " <strong>" + cn + "</strong> 说：<br/>" + msg + "</p>");

eChatBox.scrollTop(eChatBox[0].scrollHeight);

}

chat.client.userChange = function (dt, msg, users) {

eChatBox.append("<p>" + dt + " " + msg + "</p>");

eUsers.find("option[value!='']").remove();

for (var i = 0; i < users.length; i++) {

if (users[i].Value == clientName) continue;

eUsers.append("<option value='" + users[i].Key + "'>" + users[i].Value + "</option>")

}

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

$("#btnSend").click(function () {

var toUserId = eUsers.val();

if (toUserId != "") {

chat.server.sendOne(toUserId, $("#message").val())

.done(function () {

//alert("发送成功！");

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

})

.fail(function (e) {

alert(e);

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

});

}

else {

chat.server.send($("#message").val())

.done(function () {

//alert("发送成功！");

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

})

.fail(function (e) {

alert(e);

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

});

}

});

</script>

</head>

<body>

<h3>大众聊天室</h3>

<div id="chatbox">

</div>

<div>

<span>聊天名称：</span>

@Html.TextBox("clientname", ViewBag.ClientName as string, new { @readonly = "readonly", style = "width:300px;" })

<span>聊天对象：</span>

@Html.DropDownList("users", ViewBag.OnLineUsers as IEnumerable<SelectListItem>)

</div>

<div>

@Html.TextArea("message", new { rows = 5, style = "width:500px;" })

<input type="button" value="发送消息" id="btnSend" />

</div>

</body>

</html>

上述代码中特别需要注意的是，需要引用一个“不存在的JS目录”：<script src="~/signalr/hubs" type="text/javascript"></script>，为什么要打引号，是因为我们在写代码的时候是不存在的，而当运行后就会自动生成signalr的代理脚本，这就是与非自动生成代理脚本最根本的区别，也正是因为这个自动生成的脚本，我们可以在JS中更加方便的调用服务端方法及定义回调方法，调用服务端方法采用：chat.server.XXX，而被服务端回调的客户端方法则采用：chat.client.XXX

看一下上述两种的运行效果截图吧：

第三种：采用持久化连接类（PersistentConnection）

DEMO - 3 示例代码如下：

服务端：

//Startup类：

using System;

using System.Threading.Tasks;

using Microsoft.Owin;

using Owin;

using Microsoft.AspNet.SignalR;

[assembly: OwinStartup(typeof(TestWebApp.Models.Startup))]

namespace TestWebApp.Models

{

public class Startup

{

public void Configuration(IAppBuilder app)

{

app.MapSignalR<MyConnection>("/MyConnection");

}

//MyConnection类：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using System.Web;

using Microsoft.AspNet.SignalR;

namespace TestWebApp.Models

{

public class MyConnection : PersistentConnection

{

private static List<string> monitoringIdList = new List<string>();

protected override Task OnConnected(IRequest request, string connectionId)

{

bool IsMonitoring = (request.QueryString["Monitoring"] ?? "").ToString() == "Y";

if (IsMonitoring)

{

if (!monitoringIdList.Contains(connectionId))

{

monitoringIdList.Add(connectionId);

}

return Connection.Send(connectionId, "ready");

}

else

{

if (monitoringIdList.Count > 0)

{

return Connection.Send(monitoringIdList, "in_" + connectionId);

}

else

{

return Connection.Send(connectionId, "nobody");

}

protected override Task OnReceived(IRequest request, string connectionId, string data)

{

if (monitoringIdList.Contains(connectionId))

{

return Connection.Send(data, "pass");

}

return null;

}

protected override Task OnDisconnected(IRequest request, string connectionId, bool stopCalled)

{

if (!monitoringIdList.Contains(connectionId))

{

return Connection.Send(monitoringIdList, "out_" + connectionId);

}

return null;

}

WEB客户端：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>MonitoringPage</title>

<script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="~/Scripts/jquery.signalR-2.2.0.min.js" type="text/javascript"></script>

<style type="text/css">

table {

border:1px solid #808080;

width:600px;

}

td {

border:1px solid #808080;

padding:3px;

}

.odd{ }

.even{ }

.non-temptr {

display:none;

}

</style>

<script type="text/javascript">

$(function () {

$("#userstable tbody tr:odd").addClass("odd");

$("#userstable tbody tr:even").addClass("even");

var conn = $.connection("/MyConnection", {"Monitoring":"Y"});

conn.start().done(function () {

$("#userstable").delegate("button.pass", "click", function () {

var rid = $(this).parent("td").prev().attr("data-rid");

conn.send(rid);

var tr = $(this).parents("tr");

tr.remove();

});

}).fail(function (msg) {

alert(msg);

});

conn.received(function (msg) {

if (msg == "ready")

{

$("#spstatus").html("监控服务已就绪");

return;

}

else if (msg.indexOf("in_") == 0) {

var tr = $(".non-temptr").clone(true);

tr.removeClass("non-temptr");

var td = tr.children().first();

var rid = msg.toString().substr("in_".length);

td.html(rid + "进入被监控页面，是否允许？");

td.attr("data-rid", rid);

$("#userstable tbody").append(tr);

}

else

{

var rid = msg.toString().substr("out_".length);

$("td[data-rid=" + rid + "]").parent("tr").remove();

}

});

</script>

</head>

<body>

<div>

以下是实时监控到进入EnterPage页面的用户情况：(服务状况：<strong><span id="spstatus"></span></strong>)

</div>

<table id="userstable">

<tr>

<td>用户进入消息</td>

<td>授权</td>

</tr>

<tr class="non-temptr">

<td></td>

<td style="width:100px"><button class="pass">允许</button></td>

</tr>

</table>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>EnterPage</title>

<script src="~/Scripts/jquery-1.6.4.min.js" type="text/javascript"></script>

<script src="~/Scripts/jquery.signalR-2.2.0.min.js" type="text/javascript"></script>

</head>

<body>

<script type="text/javascript">

$(function () {

var conn = $.connection("/MyConnection");

conn.start().fail(function (msg) {

alert(msg);

});

conn.received(function (data) {

if (data == "pass") {

$("#msg").html("管理员已审核通过，可以进入浏览详情。");

setTimeout(function () {

self.location = "http://www.zuowenjun.cn";

}, 3000);

}

else

{

$("#msg").html("无管理员在线，请稍候再重新进入该页面。");

}

});

</script>

<div id="msg">

该页面浏览受限，已自动将您的浏览请求发给管理员，请稍候。。。

</div>

</body>

</html>

上述代码可以看出与采用Hub（集线器类）的不同之处，一是：Startup.Configuration中是需要指定app.MapSignalR<MyConnection>("/MyConnection")，二是需实现继承自PersistentConnection类的自定义的持久化连接类，在这个连接中可以重写：OnConnected、OnDisconnected、OnReceived、OnReconnected、ProcessRequest方法，同时有几个重要的属性成员Connection、Groups，服务端发消息给客户端采用：Connection.Broadcast（广播，所有客户端都可以收到消息）,Connection.Send（发送给指定的客户端）

运行效果如下截图示：

SignalR支持额外附加：QueryString、Cookie、State，具体的客户端设置与服务端接收请见上面的代码，同时也可以参见如下其它博主总结的表格（SignalR的Javascript客户端API使用方式整理）：

通过三个DEMO学会SignalR的三种实现方式转载https://www.cnblogs.com/zuowj/p/5674615.html的更多相关文章

SignalR代理对象异常：Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论异常汇总:http://www ...
通过三个DEMO学会SignalR的三种实现方式
一.理解SignalR ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信(即:客户端(Web页面)和服务器端可以互相实时的通知消息 ...
SignalR 2.0 入门与提高转载https://www.cnblogs.com/vance/p/SignalR.html
SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP.NET SignalR2.0 1. ...
SignalR的几种方式_转自:https://www.cnblogs.com/zuowj/p/5674615.html
SignalR有三种传输模式: LongLooping(长轮询). WebSocket(HTML5的WEB套接字). Forever Frame(隐藏框架的长请求连接), 可以在WEB客户端显式指定一 ...
Activity详解三启动activity并返回结果转载 https://www.cnblogs.com/androidWuYou/p/5886991.html
首先看演示: 1 简介 .如果想在Activity中得到新打开Activity 关闭后返回的数据,需要使用系统提供的startActivityForResult(Intent intent, int ...
棒槌的工作第八天-----------------------早会-------三次握手四次挥手（转载https://www.cnblogs.com/zmlctt/p/3690998.html）尚待了解，下班补充
TCP三次握手所谓三次握手(Three-way Handshake),是指建立一个TCP连接时,需要客户端和服务器总共发送3个包. 三次握手的目的是连接服务器指定端口,建立TCP连接,并同步连接双方 ...
SignalR的三个Demo
一.理解SignalR ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信(即:客户端(Web页面)和服务器端可以互相实时的通知消息 ...
10天学会phpWeChat——第三天：从数据库读取数据到视图
在第二天,我们创建了我们的第一个phpWeChat功能模块,但是比较简单.实际生产环境中,我们不可能有如此简单的需求.更多的情况是数据存储在MySql数据库中,我们开发功能模块的作用就是将这些数据从M ...
并发编程系列小结（线程安全，synchronized，脏读，线程间的通信wait/notify，线程的三种实现方式Demo，可替代wait/notify的方法）
线程安全: 当多个线程访问某一个类(对象或方法)时,这个类始终都能表现出正确的行为,那么这个类(对象或方法就是线程安全的) synchronized: 可以在任意对象或方法上加锁,而加锁的这段代码称为 ...

随机推荐

Excel VBA 连接各种数据库（三） VBA连接SQL Server数据库
本文主要涉及: VBA中的SQL Server环境配置 VBA连接SQL Server数据库 VBA读写SQL Server数据如何安装SQL Client 系统环境: Windows 7 64bi ...
socket远程执行命令
两个脚本模拟远程执行命令 cmd_server.py import socket import subprocess # 运行系统命令 sk = socket.socket() addess = (' ...
16.ajax_case05
# 抓取36氪快讯 # https://36kr.com/newsflashes import requests import json header = { 'Accept': 'text/html ...
4_3.springboot2.x之默认访问首页和国际化
1.默认访问首页 1.引入thymeleaf和引入bootstrap  <dependency> <groupId>org.sp ...
Print Article /// 斜率优化DP oj26302
题目大意: 经典题数学分析 G(a,b)<sum[i]时 a优于b G(a,b)<G(b,c)<sum[i]时 b必不为最优 #include <bits/stdc++.h& ...
Easy Excel导出
@GetMapping(value = "/down2") public void down2(HttpServletResponse response) throws Excep ...
LeetCode第一题—— Two Sum（寻找两数，要求和为target）
题目描述: Given an array of integers, return indices of the two numbers such that they add up to a speci ...
2.vue插件总结——总有你能用上的插件
UI组件框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - ...
CF1163E Magical Permutation
题意:给定集合,求一个最大的x,使得存在一个0 ~ 2x - 1的排列,满足每相邻的两个数的异或值都在S中出现过.Si <= 2e5 解:若有a,b,c,令S1 = a ^ b, S2 = b ...
Django之深入了解路由层
目录 ORM表关系建立一对一一对多多对多 Django 请求生命周期 url 路由层路由匹配无名分组有名分组反向解析路由匹配条件无分组的情况的反向解析无名分组情况的反向解析有名分组 ...

通过三个DEMO学会SignalR的三种实现方式 转载https://www.cnblogs.com/zuowj/p/5674615.html

通过三个DEMO学会SignalR的三种实现方式 转载https://www.cnblogs.com/zuowj/p/5674615.html的更多相关文章

随机推荐

热门专题

通过三个DEMO学会SignalR的三种实现方式转载https://www.cnblogs.com/zuowj/p/5674615.html

通过三个DEMO学会SignalR的三种实现方式转载https://www.cnblogs.com/zuowj/p/5674615.html的更多相关文章