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

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

服务端：

asp.net webapi

using System.Threading.Tasks;
using Microsoft.AspNet.SignalR;
using System.Collections.Generic;

namespace DMS.WebApi.Hubs
{
/// < summary>
/// SmartEMSHub 这是我们要定义的hub
/// </ summary>
public class SmartEMSHub : Hub
{
/// < summary>
/// 
/// </ summary>
public static List<string> Users = new List<string>();

/// <summary>
/// The OnConnected event.
/// </summary>
/// <returns></returns>
public override Task OnConnected()
{
string clientId = GetClientId();
if (Users.IndexOf(clientId) == -1)
{
Users.Add(clientId);
}
Send(Users.Count);
var context = GlobalHost.ConnectionManager.GetHubContext<SmartEMSHub>();
context.Clients.Client(clientId).updateUserName(clientId);
return base.OnConnected();
}

/// <summary>
/// The OnReconnected event.
/// </summary>
/// <returns></returns>
public override Task OnReconnected()
{
string clientId = GetClientId();
if (Users.IndexOf(clientId) == -1)
{
Users.Add(clientId);
}
Send(Users.Count);
return base.OnReconnected();
}

/// <summary>
/// The OnDisconnected event.
/// </summary>
/// <param name="stopCalled"></param>
/// <returns></returns>
public override Task OnDisconnected(bool stopCalled)
{
string clientId = GetClientId();

if (Users.IndexOf(clientId) > -1)
{
Users.Remove(clientId);
}
Send(Users.Count);
return base.OnDisconnected(stopCalled);
}

/// <summary>
/// Get's the currently connected Id of the client.
/// This is unique for each client and is used to identify
/// a connection.
/// </summary>
/// <returns></returns>
private string GetClientId()
{
string clientId = "";

// clientId passed from application 
if (Context.QueryString["clientId"] != null)
{
clientId = this.Context.QueryString["clientId"];
}

if (string.IsNullOrEmpty(clientId.Trim()))
{
clientId = Context.ConnectionId;
}

return clientId;
}

/// <summary>
/// Sends the update user count to the listening view.
/// </summary>
/// <param name="count">
/// The count.
/// </param>
public void Send(int count)
{
// Call the addNewMessageToPage method to update clients.
var context = GlobalHost.ConnectionManager.GetHubContext<SmartEMSHub>();
context.Clients.All.updateUsersOnlineCount(count);
}
/// <summary>
/// 自己写的一个服务端方法Hello.
/// </summary>
/// <param name="msg">参数
/// </param>
public void Hello(string msg)
{
var context = GlobalHost.ConnectionManager.GetHubContext<SmartEMSHub>();
context.Clients.All.clientMethod("server:"+msg);
}
}
}

当然还要支持跨域

using Microsoft.AspNet.SignalR;
using Microsoft.Owin;
using Microsoft.Owin.Cors;
using Owin;

[assembly: OwinStartup(typeof(DMS.WebApi.Hubs.Startup))]
namespace DMS.WebApi.Hubs
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 连接标识
app.Map("/signalr", map =>
{
//跨域
map.UseCors(CorsOptions.AllowAll);
var hubConfiguration = new HubConfiguration
{
EnableJSONP = true
};
//启动配置
map.RunSignalR(hubConfiguration);
});
}
}
}

> 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日 由于时间仓促，还待补充