用SignaiR和Push.js完成消息推送代码详解-C#.Net教程-PHP中文网

首页

后端开发

C#.Net教程

用SignaiR和Push.js完成消息推送代码详解

Y2J

May 10, 2017 am 10:44 AM

ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库，可以简化开发人员将实时 Web 功能添加到应用程序的过程。有兴趣的可以了解一下。

一.使用背景

1. SignalR是什么？

ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库，可以简化开发人员将实时 Web 功能添加到应用程序的过程。实时 Web 功能是指这样一种功能：当所连接的客户端变得可用时服务器代码可以立即向其推送内容，而不是让服务器等待客户端请求新的数据。

2.Push.js是什么？【需要浏览器支持H5Notifications】

Notifications翻译过来即是通知。那么Push.js的通知又是什么样的，见下图:大多数在屏幕的右下角出现。

需要允许哦:

3.很多时候我们只能使用轮询的方式进行数据展示的更新和消息推送。于是就想到有没有一种方式可以完成服务端数据更新时同步更新客户端的一种解决方案。

二.开始部署一个 SignalR项目【使用mvc】

1.新建mvc项目

.....................

2.导入程序包【Vs2015】

工具->NuGet包管理器-> 程序包管理控制台->Install-Package Microsoft.AspNet.SignalR->等待安装成功

3.新建集线器类

项目->右键->添加->新建项->SignalR->SignalR 永久链接类->保存->【以MyConnection1为例】MyConnection1

 public class MyConnection1 : PersistentConnection
  {
    /// <summary>
    /// 发送消息
    /// </summary>
    /// <param name="request"></param>
    /// <param name="connectionId"></param>
    /// <returns></returns>
    protected override Task OnConnected(IRequest request, string connectionId)
    {
      Debug.WriteLine(connectionId);
      return Connection.Send(connectionId, "Welcome!");//单推事列
    }

    /// <summary>
    /// 接受客户端消息
    /// </summary>
    /// <param name="request"></param>
    /// <param name="connectionId"></param>
    /// <param name="data"></param>
    /// <returns></returns>
    protected override Task OnReceived(IRequest request, string connectionId, string data)
    {
      Debug.WriteLine(data);
      return Connection.Broadcast(data);//广播
    }
    /// <summary>
    /// 掉线
    /// </summary>
    /// <param name="request"></param>
    /// <param name="connectionId"></param>
    /// <param name="stopCalled"></param>
    /// <returns></returns>
    protected override Task OnDisconnected(IRequest request, string connectionId, bool stopCalled)
    {
      Debug.WriteLine("掉线");
      return base.OnDisconnected(request, connectionId, stopCalled);
    }

    /// <summary>
    /// 重连
    /// </summary>
    /// <param name="request"></param>
    /// <param name="connectionId"></param>
    /// <returns></returns>
    protected override Task OnReconnected(IRequest request, string connectionId)
    {
      Debug.WriteLine("重连");
      return base.OnReconnected(request, connectionId);
    }
  }

登录后复制

4.新建 Owin Startup 类【SignalR遵循Owin标准，Startup则是组件的启动，默认会存在Startup类，只需修改即可】

我们在Configuration里面追加以下代码

public void Configuration(IAppBuilder app)
    {
      app.MapSignalR<MyConnection1>("/myconnection");
    }

登录后复制

解释:访问myconnection的时候，触发MyConnection1

5.增加客户端【h5】

@{
  ViewBag.Title = "Home Page";
  Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <meta charset="utf-8" />
</head>
<body>
  <script src="~/Scripts/jquery-1.10.2.js"></script>
  <script src="~/Scripts/jquery.signalR-2.2.1.js"></script>
  <script type="text/javascript">
    var conn = $.connection("/myconnection");

    conn.start().done(function (data) {
      console.log("已连接服务器,当前GUID为" + data.id);
      conn.send("To Admin");//发送给服务器
    });

    //接受服务器的推送
    conn.received(function (data) {
      console.log("服务器返回消息： " + data);
    });
  </script>
</body>
</html>

登录后复制

6.启动项目打开浏览器控制台，你会发现见下图、这就表示你已经完成了第一步。

7.下面我们需要准备 push.js

下载地址 github.com/Nickersoft/push.js

8.引用js

<script src="../Js/push.js"></script>

登录后复制

9.新建js推送demo

  function push(data, url, img) {
    var imgurl = img != "" ? img : "../Images/icon.png";
    Push.create("新通知", {
      body: data,
      icon: imgurl,
      requireInteraction: true,
      onClick: function () {
        window.focus();
        this.close();
        window.location.href =url;
      }
    });
  }

登录后复制

解释:data:为消息内容

url：为点击通知进入的链接

img: 为通知展示的图片地址

requireInteraction: 设置为true时，除非用户手动关闭或单击该通知，否则该通知不会关闭。需要设置消失时间请替换该属性为timeout: 5000 单位毫秒

其他事件请阅读:www.npmjs.com/package/push.js

10.组合两者

  //实时推送
  var conn = $.connection("/myconnection");

  conn.start().done(function (data) {
    console.log("已连接服务器,当前GUID为" + data.id);
  });

  //接受服务器的推送
  conn.received(function (msg) {
    console.log("服务器返回消息： " + msg);
    if (msg != "") {
      push(msg, "#", "")
    }
  });

登录后复制

11.效果如下：

12.实现服务器的主动推送.现只介绍广播。单推原理一致。

分为广播及单推两种模式。

广播:

 var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接
  context.Connection.Broadcast("我是一条新的推送消息！");//广播推送

登录后复制

单推:

 var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接
 context.Connection.Send(connectionId, "Welcome!");//单推事列

登录后复制

connectionId:是服务端为每个客户端分配的GUID

13.效果如下:

这样当我们服务端处理某个任务时就可以调用广播来实现主动推送到客户端，进行数据的即时更新及消息的推送。

【相关推荐】

1. ASP免费视频教程

2. ASP教程

3. 李炎恢ASP基础视频教程

以上是用SignaiR和Push.js完成消息推送代码详解的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程

1663

CakePHP 教程

1419

Laravel 教程

1313

PHP教程

1263

C# 教程

1237

显示更多

Related knowledge

使用Firebase Cloud Messaging（FCM）在PHP应用中实现消息推送功能 Jul 24, 2023 pm 12:37 PM

使用FirebaseCloudMessaging（FCM）在PHP应用中实现消息推送功能随着移动应用的快速发展，实时消息推送已经成为现代应用不可或缺的功能之一。FirebaseCloudMessaging（FCM）是一种跨平台的消息推送服务，可以帮助开发者将实时消息推送到Android和iOS设备。本文将介绍如何使用FCM在PHP应用中实现消息推送功

如何在uniapp中实现消息推送和通知提醒 Oct 20, 2023 am 11:03 AM

如何在uniapp中实现消息推送和通知提醒随着移动互联网的快速发展，消息推送和通知提醒成为了移动应用中必不可少的功能。在uniapp中，我们可以通过一些插件和接口来实现消息推送和通知提醒。本文将介绍一种在uniapp中实现消息推送和通知提醒的方法，并提供具体的代码示例。一、消息推送实现消息推送的前提是我们需要一个后台服务来发送推送消息，这里我推荐使用极光推送

高德地图消息推送怎么关闭_高德地图消息推送关闭方法 Apr 01, 2024 pm 03:06 PM

1、打开手机设置，点击应用，点击应用管理。2、找到并点击进入高德地图。3、点击通知管理，关闭允许通知开关即可关闭消息推送通知。本文以荣耀magic3为例适用于MagicUI5.0系统高德地图v11.10版本

如何使用PHP框架Lumen开发一个高效的消息推送系统，提供及时的推送服务 Jun 27, 2023 am 11:43 AM

随着移动互联网的快速发展和用户需求的变化，消息推送系统已成为现代应用程序不可或缺的一部分，它能够实现即时通知、提醒、推广、社交等功能，为用户和商业客户提供更好的体验和服务。为了满足这一需求，本文将介绍如何使用PHP框架Lumen开发一个高效的消息推送系统，提供及时的推送服务。一、Lumen简介Lumen是由Laravel框架开发团队开发的一个微框架，它是一个

UniApp实现消息推送与推送服务的设计与开发技巧 Jul 04, 2023 pm 12:57 PM

UniApp是一款用于开发跨平台应用的框架，可以同时在iOS、Android和Web平台上运行。在实现消息推送功能时，UniApp可以与后端推送服务进行配合，实现消息推送的设计与开发。一、消息推送的设计概述在UniApp中实现消息推送功能，需要设计一个推送服务，用于向App发送推送消息。推送服务需要实现以下功能：与App建立连接并发送消息与App之间的消息传

PHP实时通信功能与消息推送中间件的关系剖析 Aug 10, 2023 pm 12:42 PM

PHP实时通信功能与消息推送中间件的关系剖析随着互联网的发展，实时通信功能在Web应用中的重要性越来越凸显。实时通信允许用户在应用中实时地发送和接收消息，可以应用于多种场景，如实时聊天、即时通知等。在PHP领域中，实现实时通信功能的方式有很多，其中一种常见的方式就是使用消息推送中间件。本文将介绍PHP实时通信功能和消息推送中间件之间的关系，以及如何使用消息推

PHP开发实时聊天功能的消息推送服务选择 Aug 26, 2023 am 11:21 AM

PHP开发实时聊天功能的消息推送服务选择引言：随着互联网的迅速发展，实时通讯已成为很多网站和应用程序不可或缺的功能。为了实现实时的消息推送和实时聊天功能，选择合适的消息推送服务至关重要。本文将介绍一些常用且适合PHP开发的消息推送服务，并提供相关代码示例。一、WebSocket协议实现WebSocket协议是一种基于TCP的协议，专门用于实现实时的双向通讯。

快速入门：使用Go语言函数实现简单的消息推送功能 Jul 31, 2023 pm 02:09 PM

快速入门：使用Go语言函数实现简单的消息推送功能在当今移动互联网时代，消息推送已成为各种APP的标配功能。Go语言是一门快速高效的编程语言，非常适合用来开发消息推送功能。本文将介绍如何使用Go语言函数实现简单的消息推送功能，并提供相应的代码示例，帮助读者快速入门。在开始之前，我们需要了解一下消息推送的基本原理。通常，消息推送功能需要两个主要的组件：推送服务器

See all articles

用SignaiR和Push.js完成消息推送代码详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题