使用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 pagesClients.All.SentMsgToPages(name, message);}}
}

转载于:https://www.cnblogs.com/ZaraNet/p/9933426.html

使用ASP.NET MVC Web SignalR 构建单身聊天室(一)相关推荐

angular2+typescript在asp.net MVC Web项目上的实现
网上现在还没有关于angular2+typescript在asp.net mvc web项目上的实现的系统介绍,这里我也只是探索到了一个简单的方式,还有很多问题没能解决.但是能有个好的开头也值得记录一 ...
总结ASP.NET MVC Web Application中将数据显示到View中的几种方式
当我们用ASP.NET MVC开发Web应用程序的时候,我们都是将需要呈现的数据通过"Controllers"传输到"View"当中,怎么去实现,下面我介绍一下 ...
pusher 创建新应用_基于 Laravel + Pusher + Vue 通过事件广播构建实时聊天室应用
基于 Laravel + Pusher + Vue 通过事件广播构建实时聊天室应用由学院君创建于2年前, 最后更新于 3个月前版本号 #3 前言:学院君之前有说过要整理出一篇事件广播手把手教程 ...
只需五步，快速构建Python聊天室
在本文中,我们来谈一谈如何构建一个Python聊天室. 注意:你不需要安装任何额外的Python包. 作者 | Dark Soulz 译者 | 弯月,责编 | 郑丽媛头图 | CSDN 下载自东方 ...
springboot+websocket构建在线聊天室（群聊+单聊）
系列导读: 1.springboot+websocket构建在线聊天室(群聊+单聊) 2.Spring Boot WebSocket:单聊(实现思路) 3.Websocket Stomp+Rabbit ...
百行go代码构建p2p聊天室
百行go代码构建p2p聊天室 1. 上手使用 2. whisper 原理 3. 源码解读 3.1 参数说明 3.1 连接主节点 3.2 我的标识 3.2 配置我的节点 3.3 哪个聊天室 3.3 加入 ...
Live：主流技术构建即时聊天室演示应用，直播源码
Live :服务端采用 RTMP(Nginx), WebSocket(Socket.io),客户端 VideoCore+IJKPlayer 构建即时聊天室演示应用. 这个项目是为了演示如何建立一个现场 ...
C# ASP.NET MVC 之 SignalR 学习实时数据推送显示配合 Echarts 推送实时图表
本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何 ...
Asp.NetCore MVC Web 应用
Asp.NetCore MVC 与普通的MVC 基本一致, 只是代码结构稍有改动一.创建项目 1. 2. 3. 项目结构二. 构建数据模型 1. Startup类中配置EF Core MySql ...
Ubuntu下利用Mono,Jexus搭建Asp.Net(MVC) Web服务器
最近在Ubuntu上搭建了Asp.Net的Web服务器,其中遇到很多问题,整理一下思路,以备后用. 搭建环境以及配套软件 Ubuntu: 11.10 Mono:3.0.6 下载地址(http://do ...

使用ASP.NET MVC Web SignalR 构建单身聊天室(一)

使用ASP.NET MVC Web SignalR 构建单身聊天室(一)相关推荐

最新文章

热门文章