SignalR 2.x入门(二):SignalR在MVC5中的使用
开发(代码下载)
新建一个ASP.NET Web项目,项目类型为MVC,将认证模式改为无身份认证。在程序包管理控制台输入如下语句,安装SignalR
- <span style="font-size:14px;">install-package Microsoft.AspNet.SignalR</span>
为了便于管理,在项目中添加一个名为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>
- }
运行,效果如图:
需注意的
JS在调用Hub时,Hub的首字母小写,不管后端代码是大写还是小写,JS调用时首字母均小写,除非后台Hub类上已经定义了
HubName 属性(如:
[HubName("ChatHub")]
),这种情况下,JS调用Hub时,根据HubName属性定义的名称走。
SignalR 2.x入门(二):SignalR在MVC5中的使用的更多相关文章
- SignalR入门二、使用 SignalR 2 实现服务器广播
一.概述 这篇教程通过实现一个股票报价的小程序来讲解如何使用SignalR进行服务器端的推送,服务器会模拟股票价格的波动,并把最新的股票价格推送给所有连接的客户端,最终的运行效果如下图所示. 教程:使 ...
- SignalR系列教程:在MVC5中使用SignalR
本章主要内容: 1:向MVC5添加SignaIr 2: 什么是集线器,如何创建集线器 3: 客户端通过jqery调用集线器 本文还是延续“SignaIR快速入门”中聊天室的例子进行讲解.首先我们通过V ...
- SignalR 2.0入门
下载已完成的项目 本教程展示如何使用那么 SignalR 创建一个实时聊天应用程序.你会那么 SignalR 添加一个空的 ASP.NET web 应用程序,创建一个 HTML 页面发送并显示消息. ...
- SignalR 2.0 入门与提高
SignalR 2.0 入门与提高 SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP ...
- ASP.NET SignalR 2.0入门指南
ASP.NET SignalR 2.0入门指南 介绍SignalR ASP.NET SignalR 是一个为 ASP.NET 开发人员的库,简化了将实时 web 功能添加到应用程序的过程.实时Web功 ...
- SignalR的简单使用(二)
原文:SignalR的简单使用(二) 之前提到SignalR代理在网页,通过生成的Js来完成相关的功能.但我不禁想一个问题, 难到SignalR的服务端就能寄存在web端吗,通过访问网页能方式才能启动 ...
- SignalR 2.0 入门与提高 转载https://www.cnblogs.com/vance/p/SignalR.html
SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP.NET SignalR2.0 1. ...
- 《ASP.NET SignalR系列》第五课 在MVC中使用SignalR
接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET SignalR. 添加Signal ...
- [渣译文] SignalR 2.0 系列: SignalR 自托管主机
原文:[渣译文] SignalR 2.0 系列: SignalR 自托管主机 英文渣水平,大伙凑合着看吧…… 这是微软官方SignalR 2.0教程Getting Started with ASP.N ...
随机推荐
- 自学华为IoT物联网_05 能源工业物联网常见问题及解决方案
点击返回自学华为IoT物流网 自学华为IoT物联网_05 能源工业物联网常见问题及解决方案 1. 1 能源工业--油田业务面临的三大挑战 故障处理不及时: 部分油田开采难道大.机械故障较多.现场发生的 ...
- Android RadioGroup中设置默认选中RadioButton 后,选中两个的问题 解决方法
项目中遇到多个RadioGroup中单选RadioButton ,设置了默认选中第一个 . 然后就 能选中两个RadioButton . . .. 我开始这样给设置默认选中一个的: for (int ...
- 【BZOJ4891】[TJOI2017]龙舟(Pollard_rho)
[BZOJ4891][TJOI2017]龙舟(Pollard_rho) 题面 BZOJ 洛谷 题解 看了半天题....就是让你求\(\frac{b}{a}\)在模\(M\)意义下的值... 首先把\( ...
- 单片机的外围功能电路 LET′S TRY“嵌入式编程”: 2 of 6
单片机的外围功能电路 LET′S TRY“嵌入式编程”: 2 of 6 本连载讲解作为嵌入式系统开发技术人员所必需具备的基础知识.这些基础知识是硬件和软件技术人员都应该掌握的共通技术知识. 上期在&l ...
- 构造器引用和直接用new创建对象区别
万事用事实说话 package cn.lonecloud; /** * @author lonecloud * @version v1.0 * @date 上午11:22 2018/4/30 */ p ...
- Spring Boot + Mybatis + Redis二级缓存开发指南
Spring Boot + Mybatis + Redis二级缓存开发指南 背景 Spring-Boot因其提供了各种开箱即用的插件,使得它成为了当今最为主流的Java Web开发框架之一.Mybat ...
- A1135. Is It A Red-Black Tree
There is a kind of balanced binary search tree named red-black tree in the data structure. It has th ...
- 登录rabbitmq报错User can only log in via localhost
在访问管理界面使用guest用户登录时出现login failed错误. 到服务器上查询日志显示出现错误的原因是:HTTP access denied: user ‘guest’ - User can ...
- eCharts使用图表简单示例
https://blog.csdn.net/hlbt0112/article/details/48862427 1. eCharts官网 http://echarts.baidu.com/index. ...
- C++ Exception机制
C++异常机制的执行顺序. 在构造函数内抛出异常 /* * ExceptClass.h * * Created on: 2018年1月2日 * Author: jacket */ #ifndef EX ...