MVC5使用SignalR进行双向通信(1)
MVC5使用SignalR进行双向通信 (1)
配置Signal
- 在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
方法进行数据处理实时的显示
Signal
MVC
MVC5使用SignalR进行双向通信(1)的更多相关文章
- MVC5使用SignalR进行双向通信 (1)
@a604572782 2015-08-10 09:01 字数 2133 阅读 1245 MVC5使用SignalR进行双向通信 (1) 配置SignalR 在NuGet中通过 install-pac ...
- 一步一步学习SignalR进行实时通信_1_简单介绍
一步一步学习SignalR进行实时通信\_1_简单介绍 SignalR 一步一步学习SignalR进行实时通信_1_简单介绍 前言 SignalR介绍 支持的平台 相关说明 OWIN 结束语 参考文献 ...
- ASPNET_WEBAPI快速学习02
这部分内容的学习,已经放了大半年时间了,果断补充上,尽早将过去遗留的老技术坑都补上.首先将介绍服务幂等性的概念和相关解决方案,这部分也将是本文的理解难点,由于WebAPI是一种Restful风格服务的 ...
- 如何使用Microsoft技术栈
Microsoft技术栈最近有大量的变迁,这使得开发人员和领导者都想知道他们到底应该关注哪些技术.Microsoft自己并不想从官方层面上反对Silverlight这样的技术,相对而言他们更喜欢让这种 ...
- 【开源】OSharp框架解说系列(1):总体设计及系列导航
系列文章导航 [开源]OSharp框架解说系列(1):总体设计 [开源]OSharp框架解说系列(2.1):EasyUI的后台界面搭建及极致重构 [开源]OSharp框架解说系列(2.2):EasyU ...
- 智能打印SDK-源码剖析
开源地址:http://www.dnnode.com/ 软件下载地址:http://www.dnnode.com/在线展示:http://www.dnnode.com/help.html 前面的文章, ...
- SignalR系列教程:在MVC5中使用SignalR
本章主要内容: 1:向MVC5添加SignaIr 2: 什么是集线器,如何创建集线器 3: 客户端通过jqery调用集线器 本文还是延续“SignaIR快速入门”中聊天室的例子进行讲解.首先我们通过V ...
- SignalR + MVC5 简单示例
本文和前一篇文章很类似,只不过是把 SignalR 应用在了 MVC 中 新建项目,选择 MVC 模板 安装 SignalR Install-Package Microsoft.AspNet.Sign ...
- SignalR 2.x入门(二):SignalR在MVC5中的使用
开发(代码下载) 新建一个ASP.NET Web项目,项目类型为MVC,将认证模式改为无身份认证.在程序包管理控制台输入如下语句,安装SignalR <span style="font ...
随机推荐
- addSubView需要注意的几个点
addSubview: Adds a view to the end of the receiver’s list of subviews. 译:增加一个视图到接收者的子视图列表中. - (void) ...
- vb eof详解
源地址:https://zhidao.baidu.com/question/87122186.html?qbl=relate_question_1&word=eof%20sql&ski ...
- [Flex] PopUpButton系列 —— 将DataGrid作为弹出内容
<?xml version="1.0" encoding="utf-8"?> <!--Flex中如何创建一个可以弹出DataGrid作为菜单的 ...
- jquery中各个事件执行顺序如下:
jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...
- python实现的json数据以HTTP GET,POST,PUT,DELETE方式页面请求
一.JSON简介 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...
- oracle插入主键数据、sequence和触发器
一.创建表: id number;并设为主键 name VARCHAR2(20 BYTE) 二. 插入数据 2.1 insert into addservice.test_table (id,na ...
- OLAP如何实现数据的聚合计算-分析过程
- ReferenceError: Sys is not defined
项目框架MVC3 <form action="/Organization/Update" method="post" onclick="Sys. ...
- jqGrid(struts2+jdbc+jsp)增删改查的例子
前几日一直在找关于Java操作jqgrid返回json的例子,在网上也看了不少东西,结果都没几个合理的,于是本人结合网上的零散数据进行整理,完成了 一个比较完整的jqgrid小例子,考虑到还有很多 ...
- MySQL数据库优化技术之数据库表的设计
三范式介绍表的范式:只有符合的第一范式,才能满足第二范式,进一步才能满足第三范式. 1. 第一范式:表的列具有原子性,不可再分解.只要是关系型数据库都自动满足第一范式.数据库的分类:关系型数据库:My ...