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

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

服务端：

asp.net webapi

1 usingSystem.Threading.Tasks;2 usingMicrosoft.AspNet.SignalR;3 usingSystem.Collections.Generic;4

5 namespaceDMS.WebApi.Hubs6 {7 /// < summary>

8 ///SmartEMSHub 这是我们要定义的hub9 /// summary>

10 public classSmartEMSHub : Hub11 {12 /// < summary>

13 ///

14 /// summary>

15 public static List Users = new List();16

17 ///

18 ///The OnConnected event.19 ///

20 ///

21 public overrideTask 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();30 context.Clients.Client(clientId).updateUserName(clientId);31 return base.OnConnected();32 }33

34 ///

35 ///The OnReconnected event.36 ///

37 ///

38 public overrideTask 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 ///

50 ///The OnDisconnected event.51 ///

52 ///

53 ///

54 public override Task OnDisconnected(boolstopCalled)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 ///

67 ///Get‘s the currently connected Id of the client.68 ///This is unique for each client and is used to identify69 ///a connection.70 ///

71 ///

72 private stringGetClientId()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 returnclientId;88 }89

90 ///

91 ///Sends the update user count to the listening view.92 ///

93 ///

94 ///The count.95 ///

96 public void Send(intcount)97 {98 //Call the addNewMessageToPage method to update clients.

99 var context = GlobalHost.ConnectionManager.GetHubContext();100 context.Clients.All.updateUsersOnlineCount(count);101 }102 ///

103 ///自己写的一个服务端方法Hello.104 ///

105 /// 参数106 ///

107 public void Hello(stringmsg)108 {109 var context = GlobalHost.ConnectionManager.GetHubContext();110 context.Clients.All.clientMethod("server:"+msg);111 }112 }113 }

当然还要支持跨域

1 usingMicrosoft.AspNet.SignalR;2 usingMicrosoft.Owin;3 usingMicrosoft.Owin.Cors;4 usingOwin;5

6 [assembly: OwinStartup(typeof(DMS.WebApi.Hubs.Startup))]7 namespaceDMS.WebApi.Hubs8 {9 public classStartup10 {11 public voidConfiguration(IAppBuilder app)12 {13 //连接标识

14 app.Map("/signalr", map =>

15 {16 //跨域

17 map.UseCors(CorsOptions.AllowAll);18 var hubConfiguration = newHubConfiguration19 {20 EnableJSONP = true

21 };22 //启动配置

23 map.RunSignalR(hubConfiguration);24 });25 }26 }27 }

> Javascript client(vuejs)

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

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

signalr connect

{{showmsg}}

信息按钮

//import Hubs from ‘../signalr/hubs‘

exportdefault{

name:"Signalr",

data() {return{

value:"",

showmsg:"222",

proxy: {}

}

},

mounted() {var$this = this;

$this.connectServer();

},

methods: {

connectServer() {var$this = this;varconn=$.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;

})

}

}

}

--------------------------

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

原文：http://www.cnblogs.com/vktun/p/7218151.html