基于ajax与msmq技术的消息推送功能实现代码


Posted in Javascript onDecember 26, 2016

周末在家捣鼓了一下消息推送的简单例子,其实也没什么技术含量,欢迎大伙拍砖。

我设计的这个推送demo是基于ajax长轮询+msmq消息队列来实现的,具体交互过程如下图:

基于ajax与msmq技术的消息推送功能实现代码

先说说这个ajax长轮询,多长时间才算长呢?这个还真不好界定。

这里是相对普通ajax请求来说的,通常处理一个请求也就是毫秒级别的时间。但是这里的长轮询方式

在ajax发送请求给服务器之后,服务器给调用端返回数据的时间多长那可还真不好说。嘿嘿,这关键要看

我们啥时候往msmq队列中推送数据了,先看看推送的效果图吧。。。。。

基于ajax与msmq技术的消息推送功能实现代码

抱歉,没弄张动态效果图给大家。实现的功能大体上就是这样。上图中的winform程序中我们点击即刻发送按钮,同时网页上我们就能看到新推送的数据。

好了,说完具体实现流程和效果之后马上就开始编码实现吧。。。。

消息推送Winform程序代码

namespace SenderApp
{
  public partial class Form1 : Form
  {
    private string queueName = @".\Private$\pushQueue";
    private MessageQueue pushQueue = null;
    
    public Form1()
    {
      InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
      try
      {
        var queue = this.GetQueue();
        if (string.IsNullOrEmpty(this.textBox1.Text)) { this.label1.Text = "推送消息不能为空"; return; }
        queue.Send(this.textBox1.Text, "messagePush");
        this.label1.Text = "消息推送成功";
      }
      catch (Exception ex)
      {
        this.label1.Text = string.Format("消息推送失败:{0}",ex.Message);
      }
    }

    private MessageQueue GetQueue()
    {
      if (this.pushQueue == null)
      {
        if (!MessageQueue.Exists(queueName))
        {
          this.pushQueue = MessageQueue.Create(queueName);
        }
        else
        {
          this.pushQueue = new MessageQueue(queueName);
        }
      }
      return this.pushQueue;
    }

    private void textBox1_MouseDown(object sender, MouseEventArgs e)
    {
      this.textBox1.Text = "";
      this.label1.Text = "推送状态";
    }
  }
}

Web服务端代码

namespace MessagePushWeb.Controllers
{
  public class HomeController : Controller
  {
    private static string queueName = @".\Private$\pushQueue";
    private static MessageQueue pushQueue = null;

    public ActionResult Index()
    {
      return View();
    }

    public async Task<ActionResult> GetMessage()
    {
      string msg = await Task.Run(() => {
        return this.ReadMessage();
      });
      
      return Content(msg);
    }


    private MessageQueue GetQueue()
    {
      if (pushQueue == null)
      {
        if (MessageQueue.Exists(queueName))
        {
          pushQueue = new MessageQueue(queueName);
          pushQueue.Formatter = new XmlMessageFormatter(new string[] { "System.String" });
        }
      }
      return pushQueue;
    }

    private string ReadMessage()
    {
      var queue = GetQueue();
      Message message = queue.Receive();
      return message.Body.ToString();
    }
  }
}

页面视图代码

@{
  ViewBag.Title = "Push";
}


<h2>Push</h2>

<div>接收消息列表</div>
<div id="msg"></div>

<script type="text/javascript">
  $(function () {
    getMessage();
  });


  function getMessage() {
    $.get("/home/getmessage", {}, function (data) {
      var _msg = $("#msg").html();
      $("#msg").html(_msg + "<li>" + data + "</li>");
      getMessage();
    });
   }
</script>

当然,在这个只是一个初级的消息推送demo,是否能胜任生产环境的需要还有待考证。

如果你也有更好的实现和建议,都欢迎留言给我。

源码在这里:http://pan.baidu.com/s/1hsHSLTy

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
javascript验证身份证号
Mar 03 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
封装一下vue中的axios示例代码详解
Feb 16 Javascript
vue项目在webpack2实现移动端字体自适配功能
Jun 02 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 #Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 #Javascript
Bootstrap的modal拖动效果
Dec 25 #Javascript
原生ajax处理json格式数据的实例代码
Dec 25 #Javascript
JS异步文件分片断点上传的实现思路
Dec 25 #Javascript
BootStrop前端框架入门教程详解
Dec 25 #Javascript
半个小时学json(json传递示例)
Dec 25 #Javascript
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
JS动态日期时间的获取方法
2015/09/28 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
谈谈Jquery中的children find 的区别有哪些
2015/10/19 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
详解js实时获取并显示当前时间的方法
2019/05/10 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
产品促销活动策划书
2014/01/15 职场文书
面试后的英文感谢信
2014/02/01 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
供应链金融服务方案
2014/05/25 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
工程服务质量承诺书
2015/04/29 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js