vue includes撖寡情

一、SignalR 是什么？

ASP.NET SignalR 是一个面向 ASP.NET 开发人员的库，可简化将实时 web 功能添加到应用程序的过程。 实时 web 功能是让服务器代码将内容推送到连接的客户端立即可用，而不是让服务器等待客户端请求新数据的能力。

SignalR 是开放源代码，可通过访问GitHub。

二、Vue中使用SignalR

signalR包已经不更新，请使用新版@microsoft/signalr，查看新文档使用

在Vue项目中使用SignalR
首先安装 SignalR 的package，需要注意的是 SignalR 依赖 jQuery。

npm i signalr jquery --save

为了方便，在webpack.base.conf.js中注册全局的jQuery

const webpack = require('webpack')

plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'root.jQuery': 'jquery'
    })
]

然后在main.js中引入 SignalR

import 'signalr'

1.建立连接

var connection = $.hubConnection('http://localhost:8080');
//如果前后端为同一个端口，可不填参数。如果前后端分离，这里参数为服务器端的URL
var demoChatHubProxy = connection.createHubProxy('demoChatHub');
// demoChatHub为后端定义，使用驼峰式命名，后端首字母必须大写
// addMessageToList 为后端demoChatHub方法
demoChatHubProxy.on('addMessageToList', function(userName, message) {
    console.log(userName + ' ' + message);
});  
connection.start()
    .done(function(){ console.log('Now connected, connection ID=' + connection.id); })
    .fail(function(){ console.log('Could not connect'); });

需要注意的是，开始连接之前（调用 start 方法之前），最好注册至少一个事件处理方法，如果没有注册的话，Hubs的 OnConnected 方法将不会被调用，那么客户端的方法就不能被服务端调用（这容易埋坑，所以要提前注册方法）。

2.客户端如何调用服务器端方法

使用 invoke，注意调用服务器端的方法名首字母可以不大写，如果方法名称要限制必须大写，需要后端做配置。

demoChatHubProxy.invoke('newChatMessage', {name:'a',message:'b'}); // 传递参数对象
demoChatHubProxy.invoke('newChatMessage', name, message);  //传递参数列表

3. 服务器端调用客户端方法

首先客户端要注册方法才能让服务器端调用，使用 on 方法注册。

demoChatHubProxy.on('addMessageToList', function(userName, message) {
    console.log(userName + ' ' + message);
});

4. 生命周期方法

// starting：通过连接发送任何数据之前引发。
// received：在连接上接收到任何数据时引发。 提供接收到的数据。
// connectionSlow：当客户端检测到慢速或频繁删除连接时引发。
// reconnecting：基础传输开始重新连接时引发。
// reconnected：当基础传输已重新连接时引发。
// stateChanged：连接状态更改时引发。 提供的旧状态和新的状态 （连接、 已连接、 正在重新连接或已断开连接）。
// disconnected：当连接已断开连接时引发。

connection.start()
    .done(()=>{
        // .....
    })
    .fail(()=>{
        // ...
    })
connection.error((error)=>{
    console.log(error)
})
   
connection.reconnected(()=>{
    console.log('reconnected')
})
    
connection.disconnected(()=>{
    console.log('disconnected')
})

connection.received((data)=>{
    console.log('received')
    console.log(data)
})
    
connection.connectionSlow(()=>{
    console.log('connectionSlow')
})