Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

时间:2023-02-21 10:21:15

ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信。什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消息及调用方法,当然这是实时操作的。

https://github.com/SignalR/SignalR.git

先给大家看看实现的效果图。本文底部有完整demo 不想看我墨迹的可以跳过了^_^.

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

第一步:

先创建一个目标框架是.netframework 4.5或以上的MVC项目。

然后选择工具---库程序包管理--如下图

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

在控制台输入:Install-Package Microsoft.AspNet.SignalR 回车

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

安装完成以后我们发现解决方案已经有引用了script文件夹里面也多了两个脚本文件

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

我们在项目根目录创建文件家Hubs

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

在创建一个类ChatHub.cs 需要继承Hub

using Microsoft.AspNet.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using Microsoft.AspNet.SignalR.Hubs; namespace SignalR_Chat.Hubs
{
[HubName("chat")]
public class ChatHub : Hub
{ public void SendMessage(string message)
{
Clients.All.addNewMessageToPage(message);
}
}
}

添加OWIN Startup Class

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

修改代码

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();
//这个是下一篇永久连接类的 我们先不用
//app.MapSignalR<MyConnection>("/echo");
}
}
}

好了 我们开始客户端的准备工作。

先创建一个controller

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

在添加一个VIEW

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

html页面

@{
ViewBag.Title = "Index";
}
@{
Layout = null;
} <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>websocket</title>
</head>
<body>
<form action="/" method="post">
<textarea rows="10" cols="300" id="msg"></textarea>
<button id="btn_send" type="button">send</button>
</form>
<div id="chatContent"></div> <script src="~/Scripts/jquery-3.3.1.min.js"></script>
<!--<script src="~/Scripts/jquery.signalR-2.3.0.js"></script>-->
<script src="~/Scripts/jquery.signalR-2.3.0.min.js"></script>
<!--Reference the autogenerated SignalR hub script. 注意一定别忘记写这句,signalr生成的脚本都在这-->
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/core/talk.js"></script>
</body>
</html>

talk.js

$(document).ready(function () {

    //talkMessage就是我们刚才创建继承Hub的类名。如果设置了[HubName("chat")]就是括号里面的名称为准。
var chat = $.connection.chat; //接收服务器信息
chat.client.addNewMessageToPage = function (message) {
//#chatContent就是一个div层 我们把服务器返回的信息追加到这个层上 跟QQ聊天相反,新的信息我们追加顶部
$('#chatContent').prepend(function () {
$("#msg").val("");
return "<div>" + message + "</div>";
});
}; $.connection.hub.start().done(function () { $("#btn_send").click(function (e) {
e.preventDefault();
chat.server.sendMessage($("#msg").val()); }); }); });

好了启动项目跑起来把 分别用两个浏览器来模拟不同的客户端 来聊天吧。

demo

本文讲的比较糙,推荐一个链接https://blog.csdn.net/wangyunfeis/article/details/77099480

如果这篇文章对您有帮助,您可以打赏我

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

技术交流QQ群:15129679

Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)的更多相关文章

  1. Asp&period;NET MVC 使用 SignalR 实现推送功能二(Hubs 在线聊天室 获取保存用户信息)

    简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...

  2. Asp&period;NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

    简介       ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端 ...

  3. 在 Asp&period;NET MVC 中使用 SignalR 实现推送功能 &lbrack;转&rsqb;

    在 Asp.NET MVC 中使用 SignalR 实现推送功能 罗朝辉 ( http://blog.csdn.net/kesalin ) CC许可,转载请注明出处 一,简介 Signal 是微软支持 ...

  4. MVC 中使用 SignalR 实现推送功能

    MVC 中使用 SignalR 实现推送功能 一,简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Pus ...

  5. 史上最全面的SignalR系列教程-3、SignalR 实现推送功能-集线器类实现方式

    1.概述 通过前两篇 史上最全面的SignalR系列教程-1.认识SignalR 史上最全面的SignalR系列教程-2.SignalR 实现推送功能-永久连接类实现方式 文章对SignalR的介绍, ...

  6. 使用 SignalR 实现推送功能

    百度搜索:使用 SignalR 实现推送功能

  7. Asp&period;NET MVC 中使用 SignalR 实现推送功能

    一,简介Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请 ...

  8. 在 Asp&period;NET MVC 中使用 SignalR 实现推送功能

    一,简介Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请 ...

  9. ASP&period;NET Core2基于RabbitMQ对Web前端实现推送功能

    在我们很多的Web应用中会遇到需要从后端将指定的数据或消息实时推送到前端,通常的做法是前端写个脚本定时到后端获取,或者借助WebSocket技术实现前后端实时通讯.因定时刷新的方法弊端很多(已不再采用 ...

随机推荐

  1. EDA技术与ASIC设计和FPGA开发有什么关系?FPGA在ASIC设计中有什么用途?

    利用EDA技术进行电子系统设计的最后目标是完成专用集成电路ASIC的设计和实现:FPGA和CPLD是实现这一途径的主流器件.FPGA和CPLD通常也被称为可编程专用IC,或可编程ASIC.FPGA和C ...

  2. Magento开发常用方法

    这里是我做Magento开发常用到的方法,现在总结出来,后续会把更多有用的方法总结出来. 1.直接操作数据库 查找数据:$read = Mage::getSingleton("core/re ...

  3. ava中Class&period;forName的作用浅谈

    转自:http://www.jb51.net/article/42648.htm Class.forName(xxx.xx.xx) 返回的是一个类 一.首先你要明白在java里面任何class都要装载 ...

  4. &lbrack;python&rsqb;类与类中的列表

    最近在用类中的列表时出现一件怪事 实例2中的列表,竟然有实例1中的数据. 查了半天发现是list的append方法的问题. 将全部的list.append(value) 换成 list = list ...

  5. Asp&period;Net WebApi&plus;Microsoft&period;AspNet&period;WebApi&period;Core 启用CORS跨域访问

    WebApi中启用CORS跨域访问 1.安装 Nugget包Microsoft.AspNet.WebApi.Cors This package contains the components to e ...

  6. C&num;读取word文件

    第一步:添加对在项目引用里添加上对Microsoft Word 11.0 object library的引用.右击--引用---在com标签下添加.

  7. CentOS下安装Nginx服务器

    一.nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos7作为安装环境. 1.1  gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果 ...

  8. k8s1&period;13&period;3安装istio(helm方式)

    官方文档:https://istio.io/zh/docs/setup/kubernetes/install/helm/ 一.环境信息 centos7 k8s1.13.3 主机名 ip cpu ram ...

  9. 伯克利SocketAPI&lpar;一&rpar; socket的C语言接口&sol;最简单的服务器和对应的客户端C语言实现

    1. 头文件 2. API函数 3. 最简单的服务器和对应的客户端C语言实现 3.1 server #include <sys/types.h> #include <sys/sock ...

  10. div无法触发blur事件解决办法

    默认情况下div无法获取焦点,无法触发focus与blur事件,猜测span,a等标签也无法触发焦点事件(input:button,及button标签可以触发) 如何使div触发blur事件:可以给d ...