SignalR 2.x入门(二):SignalR在MVC5中的使用
时间:2022-07-24
本文章向大家介绍SignalR 2.x入门(二):SignalR在MVC5中的使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.开发(代码下载)
新建一个ASP.NET Web项目,项目类型为MVC,将认证模式改为无身份认证。在程序包管理控制台输入如下语句,安装SignalR
install-package Microsoft.AspNet.SignalR
为了便于管理,在项目中添加一个名为Hubs的文件夹,在文件夹上右键单击,选择Visual C# >> Web >> SignalR >>SignalR 集线器类 ( V2 ),命名为ChatHub,这个类将是我们所有客户端调用的Hub服务,修改代码,代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat_Part2.Hubs
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
//调用所有客户端的addNewMessageToPage function
Clients.All.addNewMessageToPage(name, message);
}
}
}
接着,创建OWIN Startup 类,修改代码,代码如下:
using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChat_Part2.Startup))]
namespace SignalRChat_Part2
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 有关如何配置应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
}
}
然后,在HomeController中新增一个Action,命名为Chat,代码如下:
public ActionResult Chat()
{
return View();
最后,创建Chat 视图,修改试图代码,代码如下:
@{
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>
@section scripts {
<!--注意:这里的jQuery脚本已经在模板页_Layout.cshtml中引用-->
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<!--signalr自动生成的脚本-->
<script src="~/signalr/hubs"></script>
<script>
$(function () {
//声明hub代理
var chat = $.connection.chatHub;
//创建后端要调用的前端function
chat.client.addNewMessageToPage = function (name, message) {
//将信息添加到页面上
$('#discussion').append('<li><strong>' + htmlEncode(name) + '</strong>:' + htmlEncode(message) + '</li>');
};
//获取输入的名称
$('#displayname').val(prompt('Enter your name:', ''));
//将焦点定位在信息输入框中
$('#message').focus();
//开启链接
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
//调用后台hub的Send方法
chat.server.send($('#displayname').val(), $('#message').val());
//清除发送的内容,并将焦点定位到信息框
$('#message').val('').focus();
});
});
//该function防止JS注入
function htmlEncode(value) {
var encodeValue = $('<div/>').text(value).html();
return encodeValue;
}
});
</script>
}
运行,效果如图:
2.需注意的
JS在调用Hub时,Hub的首字母小写,不管后端代码是大写还是小写,JS调用时首字母均小写,除非后台Hub类上已经定义了HubName 属性(如:[HubName("ChatHub")]),这种情况下,JS调用Hub时,根据HubName属性定义的名称走。
- R语言数据抓取实战——RCurl+XML组合与XPath解析
- Python网络数据抓取实战——Xpath解析豆瓣书评
- 左手用R右手Python系列17——CSS表达式与网页解析
- 左手用R右手Python系列16——XPath与网页解析库
- 扒一扒rvest的前世今生!
- RCurl中这么多get函数,是不是一直傻傻分不清!!!
- 机器学习(二)深度学习实战-使用Kera预测人物年龄问题描述引入所需要模块加载数据集创建模型编译模型优化optimize1 使用卷积神经网络optimize2 增加神经网络的层数输出结果结果
- 异步加载的基本逻辑与浏览器抓包一般流程
- 左手用R右手Python系列之——表格数据抓取之道
- XML/HTML/JSON——数据抓取过程中不得不知的几个概念
- R语言网络数据抓取的又一个难题,终于攻破了!
- R语言数据清洗实战——高效list解析方案
- 左手用R右手Python系列——循环中的错误异常规避
- SpringBoot2.x开发案例之整合Quartz任务管理系统
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ASP.NET Core 性能优化最佳实践
- 如何在Vue中使用云开发的云函数,实现邮件发送
- 乐观锁与悲观锁
- 为什么配置文件加密了数据库配置信息,Spring Boot仍能成功连接数据库
- SpringBoot开发微信公众号
- 猿实战10——动态表单之实现类目属性绑定
- 猿实战11——类目属性绑定之el-tree的使用
- 猿实战12——类目属性之动态绑定
- 一个maskrcnn的目标检测和实例分割的小例子
- Nginx系列:Nginx自带后端健康检查
- 消息队列之推还是拉,RocketMQ 和 Kafka是如何做的?
- Nginx系列:root与alias指令用法的区别
- Redis系列:Linux下部署Redis 6.x 版本
- 分布式锁的封装也很有讲究呀
- PHP与SEO,应用curl及正则获取搜狗搜索相关关键词