vue js 和signalr 结合实现消息推送1

由于signalr2.2.0 依赖于jQuery,虽然在vuejs 略显臃肿, 但是对于目前刚接触 vuejs 和想实现 前后分离的我来说 这已经很好了。目前先实现功能, 然后如果有时间或者期望大牛将signalr 改成不依赖jQuery的signalr.项目结构是分服务端asp.net webAPI 前端vuejs。所以牵扯到跨域的问题,但是目前的signalr 版本已经支持,只有服务端支持跨域就可以了。由于时间关系先简略记下当前的主要解决方法。

服务端:

asp.net webapi

  1 using System.Threading.Tasks;
  2 using Microsoft.AspNet.SignalR;
  3 using System.Collections.Generic;
  4
  5 namespace DMS.WebApi.Hubs
  6 {
  7 /// < summary>
  8 /// SmartEMSHub 这是我们要定义的hub
  9 /// </ summary>
 10 public class SmartEMSHub : Hub
 11 {
 12 /// < summary>
 13 ///
 14 /// </ summary>
 15 public static List<string> Users = new List<string>();
 16
 17 /// <summary>
 18 /// The OnConnected event.
 19 /// </summary>
 20 /// <returns></returns>
 21 public override Task OnConnected()
 22 {
 23 string clientId = GetClientId();
 24 if (Users.IndexOf(clientId) == -1)
 25 {
 26 Users.Add(clientId);
 27 }
 28 Send(Users.Count);
 29 var context = GlobalHost.ConnectionManager.GetHubContext<SmartEMSHub>();
 30 context.Clients.Client(clientId).updateUserName(clientId);
 31 return base.OnConnected();
 32 }
 33
 34 /// <summary>
 35 /// The OnReconnected event.
 36 /// </summary>
 37 /// <returns></returns>
 38 public override Task OnReconnected()
 39 {
 40 string clientId = GetClientId();
 41 if (Users.IndexOf(clientId) == -1)
 42 {
 43 Users.Add(clientId);
 44 }
 45 Send(Users.Count);
 46 return base.OnReconnected();
 47 }
 48
 49 /// <summary>
 50 /// The OnDisconnected event.
 51 /// </summary>
 52 /// <param name="stopCalled"></param>
 53 /// <returns></returns>
 54 public override Task OnDisconnected(bool stopCalled)
 55 {
 56 string clientId = GetClientId();
 57
 58 if (Users.IndexOf(clientId) > -1)
 59 {
 60 Users.Remove(clientId);
 61 }
 62 Send(Users.Count);
 63 return base.OnDisconnected(stopCalled);
 64 }
 65
 66 /// <summary>
 67 /// Get‘s the currently connected Id of the client.
 68 /// This is unique for each client and is used to identify
 69 /// a connection.
 70 /// </summary>
 71 /// <returns></returns>
 72 private string GetClientId()
 73 {
 74 string clientId = "";
 75
 76 // clientId passed from application
 77 if (Context.QueryString["clientId"] != null)
 78 {
 79 clientId = this.Context.QueryString["clientId"];
 80 }
 81
 82 if (string.IsNullOrEmpty(clientId.Trim()))
 83 {
 84 clientId = Context.ConnectionId;
 85 }
 86
 87 return clientId;
 88 }
 89
 90 /// <summary>
 91 /// Sends the update user count to the listening view.
 92 /// </summary>
 93 /// <param name="count">
 94 /// The count.
 95 /// </param>
 96 public void Send(int count)
 97 {
 98 // Call the addNewMessageToPage method to update clients.
 99 var context = GlobalHost.ConnectionManager.GetHubContext<SmartEMSHub>();
100 context.Clients.All.updateUsersOnlineCount(count);
101 }
102 /// <summary>
103 /// 自己写的一个服务端方法Hello.
104 /// </summary>
105 /// <param name="msg">参数
106 /// </param>
107 public void Hello(string msg)
108 {
109 var context = GlobalHost.ConnectionManager.GetHubContext<SmartEMSHub>();
110 context.Clients.All.clientMethod("server:"+msg);
111 }
112 }
113 }

当然还要支持跨域

 1 using Microsoft.AspNet.SignalR;
 2 using Microsoft.Owin;
 3 using Microsoft.Owin.Cors;
 4 using Owin;
 5
 6 [assembly: OwinStartup(typeof(DMS.WebApi.Hubs.Startup))]
 7 namespace DMS.WebApi.Hubs
 8 {
 9 public class Startup
10 {
11 public void Configuration(IAppBuilder app)
12 {
13 // 连接标识
14 app.Map("/signalr", map =>
15 {
16 //跨域
17 map.UseCors(CorsOptions.AllowAll);
18 var hubConfiguration = new HubConfiguration
19 {
20 EnableJSONP = true
21 };
22 //启动配置
23 map.RunSignalR(hubConfiguration);
24 });
25 }
26 }
27 }

> Javascript client(vuejs)

客户端利用webpack 来使用时 发现很难 动态加载<code>../signalr/hub</code> 于是找到了另一种方式来解决这个问题

我这里只做了一个组件, 其他方式应该也是可以

 <template>
    <div>
        signalr connect
        <div>
            <div>{{showmsg}}< /div>
            <input v-model="value" placeholder="请输入..." />
            <Button type="info" @click="sendMsg">信息按钮</Button>
        </div>
    </div>
    </template>
    <script>
    import $ from ‘jquery‘
    import signalR from ‘../assets/js/signalr.2.2.2.js‘
    // import Hubs from ‘../signalr/hubs‘
    export default {
    name: "Signalr",
    data() {
        return {
            value: "",
            showmsg: "222",
            proxy: {}
        }
    },
    mounted() {
        var $this = this;
        $this.connectServer();
    },
    methods: {
        connectServer() {
            var $this = this;
            var conn = $.hubConnection("http://localhost:52656/signalr", { qs: "clientId=1232222" })
            $this.proxy = conn.createHubProxy("smartEMSHub");
            $this.getMsg();
            conn.start().done((data) => {
                $this.sendMsg();
            }).fail((data) => {
            });
        },
        sendMsg() {
            var $this = this;
            $this.proxy.invoke("Hell", $this.value).done((msg) => {
            });
        },
        getMsg() {
            var $this = this;
            $this.proxy.on("clientMethod", (data) => {
                $this.showmsg = data;
            })
        }
    }
    }
    </script>

    <style>

    </style>

--------------------------
2017年7月21日 由于时间仓促,还待补充

时间: 2024-10-06 16:29:28

vue js 和signalr 结合实现消息推送1的相关文章

从壹开始 [Admin] 之四 || NetCore + SignalR 实现日志消息推送

缘起 哈喽大家周一好呀,感觉好久没有写文章了,上周出差了一次,感觉还是比坐办公室好的多,平时在读一本书<时生>,感兴趣的可以看看??...... 这几天翻看 NetCore 相关知识扩展的时候,发现了久违的一个知识点 —— SignalR ,为啥说久违呢,因为去年的时候,我在公司的项目里就想用了,后来组员说他学学看,也没有了下文,我也就耽搁了,昨天突然看到这个了,想着正好看看吧,尽量落地到 NetCore 项目上,当时我很自信的以为这个技术很老了,应该用的人很多,可是天不遂人愿,在.Net M

AngularJS+ASP.NET MVC+SignalR实现消息推送

原文:http://www.mincoder.com/article/4565.shtml 背景 OA管理系统中,员工提交申请单,消息实时通知到相关人员及时进行审批,审批之后将结果推送给用户. 技术选择 最开始发现的是firebase,于是很兴奋的开始倒腾起来.firebase用 起来倒是简单:引用一个js即可,按官网上的教程很快便应用到了项目中.第二天打开项目发现推送功能不好使了,这是为何?最后发现firebase官网打 不开了...难道firebase被google收了也会被天朝给墙掉?也许

Asp.net SignalR 实现服务端消息推送到Web端

原文:http://www.cnblogs.com/wintersun/p/4148223.html 之前的文章介绍过Asp.net SignalR,  ASP .NET SignalR是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.  今天我们来实现服务端消息推送到Web端,   首先回顾一下它抽象层次图是这样的: 实际上 Asp.net SignalR 2 实现 服务端消息推送到Web端, 更加简单. 为了获取更好的可伸缩性, 我们引入消息队列, 看如下

Signalr实现消息推送

一.前言 大多数系统里面好像都有获取消息的功能,但这些消息来源都不是实时的,比如你开两个浏览器,用两个不同的账号登录,用一个账号给另外一个账号发送消息,然而并不会实时收到消息,必须要自己手动F5刷新一下页面才会显示自己的消息,这样感觉用户体验不太好.之前看了Learning hard关于Signalr的文章,刚好自己项目中有用到获取实时消息的功能,然而我们项目中就是用js代码setinterval方法进行1秒刷新读取数据的,这样严重给服务器端添加负担,影响系统性能!所以自己稍微研究了一下,下面是

asp.net使用signalr实现集群集群下面的消息推送

1.选用Signalr的原因 Signalr内部给我们做了很多封装.当服务器或者浏览器不支持websoket协议的时候就使用长连接方式  不支持长连接再选用轮询的方式获取消息 websoket:与服务器保持长连接 服务器和客户端可以进行双工通讯而不用建立新的链接 长连接:服务器与客户端保持长连接 .每隔一段时间客户端询问服务器  而不用建立新连接 轮询:客户端定期向服务器发送请求询问 每次都会建立新的链接(建立新的链接使非常耗时的) 2.集群情况下的遇到的难点 当一个一台服务器的给某个用户发送了

基于SignalR的消息推送与二维码描登录实现

1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于SinglarR消息推送机制的扫描登录.本系统涉及到以下知识点:     SignalR:http://signalr.net/ 这官网,ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指这样一种功能:当

SignalR Self Host+MVC等多端消息推送服务(2)

一.概述 上次的文章中我们简单的实现了SignalR自托管的服务端,今天我们来实现控制台程序调用SignalR服务端来实现推送信息,由于之前我们是打算做审批消息推送,所以我们的demo方向是做指定人发送信息,至于做聊天消息和全局广播,这里就不在进行演示了. 二.创建控制台客户端 1.在SignalRProject解决方案下新建一个名为Clinet的控制台 2.在程序包管理控制台中输入以下命令 1 Install-Package Microsoft.AspNet.SignalR.Client 3.

node.js Websocket消息推送---GoEasy

Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送速度快,代码简单易懂上手快浏览器兼容性:GoEasy推送支持websocket 和polling两种连接方式,从而可以支持IE6及其以上的所有版本,同时还支持其它浏览器诸如Firefox, Chrome, Safari 等等.支 持不同的开发语言:   GoEasy推送提供了Restful API接口,无论你的后台程序用的是哪种语言都可以通过RestfulAPI来实现后台实时推送.

SignalR Self Host+MVC等多端消息推送服务(1)

一.概述 由于项目需要,最近公司项目里有个模块功能,需要使用到即时获得审批通知:原本的设计方案是使用ajax对服务器进行定时轮询查询,刚刚开始数据量和使用量不大的时候还好,后来使用量的增加和系统中各种业务的复杂度增加,服务器的压力也越来越大,于是我想使用消息推送的方式替换掉ajax轮询查询,当有审批提交时,调用推送方法,将消息推送到下一审批人那,这样就减低了服务器的压力. Signal 是微软支持的一个运行在.NET平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推