MVC5使用SignalR进行双向通信
Posted owenzh
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MVC5使用SignalR进行双向通信相关的知识,希望对你有一定的参考价值。
@a604572782
2015-08-10 09:01
字数 2133
阅读 1245
MVC5使用SignalR进行双向通信 (1)
配置SignalR
- 在NuGet中通过 install-package Microsoft.AspNet.SignalR 命令进行安装
- 在Scripts文件夹中会添加 jquery.signalR-2.2.0.js 和 jquery.signalR-2.2.0.min.js
- 在startup的configuration方法中加入
app.MapSignalR();
app.MapSignalR()
是把Signal Hub 映射到/signal
using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
public class Startup
public void Configuration(IAppBuilder app)
// Any connection or hub wire up and configuration should go here
app.MapSignalR();
后台代码
- 在Model文件夹中新建一个ChatHub继承自Hub,写一个send方法,用户接受客户端的请求
public class ChatHub:Hub
/// <summary>
/// 发送信息给所有用户
/// </summary>
/// <param name="message"></param>
public void SendAll(string name,string message)
//发送给所有客户端
Clients.All.sendAll(name,message);
前台代码
- 新建一个视图名为
Chat.cshtml
- 加入如下代码
@
ViewBag.Title = "Chat";
<h2>Chat</h2>
<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>
//在Layout.cshtml 中定义了名为 scripts 的section
@section scripts
<!--Script 引用. -->
<!--jquery 在 _Layout.cshtml 中已经被引用. -->
<!--引用 SignalR. -->
<script src="~/Scripts/jquery.signalR-2.1.0.min.js"></script>
<!--该script会自动生成,添加到引用中 -->
<script src="~/signalr/hubs"></script>
<!--SignalR 关键js语句块.-->
<script>
$(function ()
// 引用hub委托
var chat = $.connection.chatHub;
// 添加一个方法供hub回调
chat.client.sendAll = function (name,message)
// 处理返回的数据到页面
$(‘#discussion‘).append(‘<li><strong>‘ + htmlEncode(name) + ‘</strong>: ‘+ message +‘</li>‘);
;
// 弹出一个框存储姓名
$(‘#displayname‘).val(prompt(‘输入你的名字:‘, ‘‘));
$(‘#message‘).focus();
// 打开连接
$.connection.hub.start().done(function ()
$(‘#sendmessage‘).click(function ()
// 按钮点击时发送给服务器信息,服务器进行转发.
chat.server.send($(‘#displayname‘).val(), $(‘#message‘).val());
// 清楚输入框并添加焦点
$(‘#message‘).val(‘‘).focus();
);
);
);
// 编码化
function htmlEncode(value)
var encodedValue = $(‘<div />‘).text(value).html();
return encodedValue;
</script>
对Signal 工作原理进行下分析:
1. 页面加载是弹出一个框输入姓名
2. 在页面加载的时候,先创建一个hub引用var chat = $.connection.chatHub
3. 通过$.connection.hub.start()
初始化连接
初始化连接后通过$.connection.hub.start().done()
调用回调函数。
在这个回调函数中绑定了个点击事件当按钮点击时向ChatHub中的send
方法发出请求,后台则会通过Clients.All.sendAll(name,message)
向所有在线客户端发送信息客户端会调用在js中定义的sendAll
方法,通过在sendAll
方法进行数据处理实时的显示
SignalR
MVC
以上是关于MVC5使用SignalR进行双向通信的主要内容,如果未能解决你的问题,请参考以下文章