使用ASP.NET MVC Web SignalR 构建单身聊天室(一)
前言：本系列的头章，想要带大家一起学习Web SignalR，那它是什么呢？ASP .NET SignalR 是一个ASP .NET 下的类库，可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。
WebSockets是HTML5提供的新的API，可以在Web网页与服务器端间建立Socket连接，当WebSockets可用时（即浏览器支持Html5）SignalR使用WebSockets，当不支持时SignalR将使用其它技术来保证达到相同效果。
SignalR当然也提供了非常简单易用的高阶API，使服务器端可以单个或批量调用客户端上的JavaScript函数，并且非常 方便地进行连接管理，例如客户端连接到服务器端，或断开连接，客户端分组，以及客户端授权，使用SignalR都非常 容易实现。
1.、使用Visual Studio Community 2017新建一个Web项目，选择空白模板。
2.工具=>nuget工具包=>控制台
安装命令
Install-Package Microsoft.AspNet.SignalR
3.添加Startup.cs。
代码如下：
using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin; [assembly: OwinStartup(typeof(SignalR_Chat.Startup))] namespace SignalR_Chat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
}
}
4、添加一个Hub。（最好创建一个Hub文件）
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using SignalR_Chat.Models; namespace SignalR_Chat.Hubs
{
[HubName("hub")]
public class ChatHub : Hub
{
private static int _rating;
public void Rate()
{
_rating += 1;
Clients.All.rateUpdate(_rating);
}
}
}
5.客户端页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Rating</title>
</head>
<body>
<h2>Please rate</h2>
<input type="button" id="vote" value="Good (0)" /> <script src="Scripts/jquery-1.6.4.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.js"></script> <script type="text/javascript">
$(function () {
var con = $.hubConnection(); var hub = con.createHubProxy("rateHub"); hub.on('rateUpdate', function (count) {
$('#vote').val("Good (" + count + ")");
}); con.start().done(function () {
$('#vote').click(function () {
hub.invoke("Rate");
});
});
});
</script>
</body>
</html>
结语：con创建了hub连接，通过这个连接去找到rateHub的实例,hub.on的事件是针对C#中写的事件，因为C#中已经写好了客户端的方法，所以我们要针对这个方法去改dom什么的，那start是什么呢？ 它是监听连接创建之后干的事情，也就是监听事件，通过invoke可以调用服务器发送过来的方法，才可以调用服务器代码。
6.效果图
7.问题
这一下子问题来了，其他客户端进来的时候能不能不是初始化值啊？
只要在Hub中添加一个线程，简单的监听下就OK了
public override Task OnConnected()
{
Clients.Caller.rateUpdate(_rating);
return base.OnConnected();
}
8.开头
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.charDiv {
width: 380px;
background-color: green;
height: 600px;
}
</style>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
var chat = $.connection.chathub;
chat.client.SentMsgToPages = function (name, message) {
var dom = document.createElement("p");
dom.innerHTML = name + ":" + message + Date.now;
$(".charDiv").append(dom);
};
$(function () {
$.connection.hub.start().done(function () {
$("#send").click(function () {
chat.server.send(xx,xxx);
})
}
)
})
</script>
</head>
<body>
<div class="charDiv">
<!--内容--> </div>
<div>
<input type="text" placeholder="请输入您的名字" />
<input type="text" /><button id="send">发送</button>
</div>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs; namespace SignalRDemo
{
[HubName("chathub")]
public class RateHub : Hub
{
public void Send(string name, string message)
{
//send message to all pages
Clients.All.SentMsgToPages(name, message);
}
}
}
使用ASP.NET MVC Web SignalR 构建单身聊天室(一)的更多相关文章
- [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序
本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...
- ASP.NET MVC Web API For APP
近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集成功能,以及通过在浏览器中使用 JavaScr ...
- Asp.NET MVC 使用 SignalR 实现推送功能二（Hubs 在线聊天室 获取保存用户信息）
简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...
- ASP.NET MVC Web API Post FromBody（Web API 如何正确 Post）
问题场景: ASP.NET MVC Web API 定义 Post 方法,HttpClient 使用 JsonConvert.SerializeObject 传参进行调用,比如 Web Api 中定义 ...
- 【转载】ASP.NET MVC Web API 学习笔记---联系人增删改查
本章节简单介绍一下使用ASP.NET MVC Web API 做增删改查.目前很多Http服务还是通过REST或者类似RESP的模型来进行数据操作的.下面我们通过创建一个简单的Web API来管理联系 ...
- Asp.net mvc web api 在项目中的实际应用
Asp.net mvc web api 在项目中的实际应用 前言:以下只是记录本人在项目中的应用,而web api在数据传输方面有多种实现方式,具体可根据实际情况而定! 1:数据传输前的加密,以下用到 ...
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
- 在 ASP.NET MVC Web 应用程序中输出 RSS Feeds
RSS全称Really Simple Syndication.一些更新频率较高的网站可以通过RSS让订阅者快速获取更新信息.RSS文档需遵守XML规范的,其中必需包含标题.链接.描述信息,还可以包含发 ...
- 实战 ASP.NET MVC Web API
实战 ASP.NET MVC Web API Web API 框架基于 ASP.NET MVC 框架开发,是一个面向 Http 协议的通信框架.相对于 WCF 而言,Web API 只面向于 Http ...
随机推荐
- json随笔
<script> var obj2={};//这只是JS对象 var obj3={width:100,height:200};/*这跟JSON就更不沾边了,只是JS的对象 */ var o ...
- P1522 牛的旅行 Cow Tours floyed
题目描述 农民 John的农场里有很多牧区.有的路径连接一些特定的牧区.一片所有连通的牧区称为一个牧场.但是就目前而言,你能看到至少有两个牧区通过任何路径都不连通.这样,Farmer John就有多个 ...
- [转]PHP实现页面静态化的超简单方法
为什么要页面静态化? 1.动态文件执行过程:语法分析-编译-运行 2.静态文件,不需要编译,减少了服务器脚本运行的时间,降低了服务器的响应时间,直接运行,响应速度快:如果页面中一些内容不经常改动,动态 ...
- DBUtils - Python数据库连接池
flask没有ORM操作这一功能, 但是想要操作数据库怎么办呢, 使用第三方包DBUtils 查询需要SQL原生语句! DBUtils 第一步还是要下载 使用pycharm直接搜索DBUtils fr ...
- 【C语言编程练习】7.1 线型表就地逆置
写在前面的话:直接从第5章跳到了第7章数据结构的趣题,原因是前面的数学趣题做久了,会觉得稍许疲倦,所以想“变个口味”,以后数学趣题和数据结构混合着练习. 1. 题目要求 编写一个函数,实现顺序表的就地 ...
- Codechef April Challenge 2019 游记
Codechef April Challenge 2019 游记 Subtree Removal 题目大意: 一棵\(n(n\le10^5)\)个结点的有根树,每个结点有一个权值\(w_i(|w_i\ ...
- web基础要点记录
最近公司项目做完了,不怎么忙,翻看了一些基础的资料,文章.就做了个简单的记录. 1.Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -we ...
- section标签实现文字滚动
h5新增样式 section标签 使用demo //h5新增属性 h5新增滚动的标签 <marquee> <div style="padding-left: 20px;ma ...
- IDEA使用Git传放项目
使用Git下载项目到IDEA工具上开发 1. 下载Git 软件工具 https://git-scm.com/ 2. 下载安装 3.打开IDEA 配置Git 4. 搜索Git 在登入 5.选择自己Git ...
- Android Studio的构建系统：Gradle
原文作者:youxiachai <用Gradle 构建你的android程序> 前言 android gradle 的插件终于把混淆代码的task集成进去了,加上最近,android st ...