vue + signalr

·    引入JQ：vue 全局引入 jquery - 简书

·     引入signalr  “jquery.signalR-2.4.1.min.js”

·     引入hubs文件（接口定义的方法，可忽略）

·     连接

var connection = $.hubConnection();

connection.start()

这样直接连接，默认连接的是本地的服务（http://localhost/8100） 

这段代码写在 beforeMount 或者更早一点的钩子函数

解决办法：

$.connection.hub.url = "连接地址";

$.connection.hub .start()

·    判断连接状态

$.connection.hub.start()执行之后会有 “.done”  “.fail”来判断是否连接成功

$.connection.hub.start().done(function () {console.log("Connected")})

                                             .fail(function (a) {Unable to connect})

·    连接失败原因

      失败的原因很多，大致是跨域、地址不对、引入文件不对、token没有或者失效

      如果是跨域以及地址问题 和 后端沟通解决办法

      如果是引入的文件不对可以直接引入服务器文件挂在 public 下的 html 文件

       缺少 token 的原因：沟通 token 格式并在 start() 前加入 $.connection.hub.qs = { authorization: "token" };

·     接收消息

       let chat = $.connection.chatHub; chatHub为后端定义

       实例化后调用 “onMessage” 来接受消息

let _this = this;

chat.client.onMessage = function (name, messageType, message) {

        console.log(name, messageType, message)

       // 具体接受几个参数根据 onMessage 定义决定（后端）

        // 需要注意在这里用 this 指向不对需要用 _this

};

·    发送消息

     由于发送消息是一定是要基于 start() 成功来执行的，所以要监听连接是否成功来执行是否发送消息

在 data 中定义一个 flag

data() { return {

    IfConnect: false

} }

在 beforeMount 执行的连接代码中嵌入 IfConnect

let _this = this;

$.connection.hub.start().done(function () { _this.IfConnect = true; }) 

                                             .fail(function (a) { _this.IfConnect = false; })

发送前校验 IfConnect 状态来发送

let chat = $.connection.chatHub;

chat.server.send("这是一条消息");

·       监听错误

$.connection.hub.error(function (error) {

    console.log(error);

});

·        生成日志

$.connection.hub.logging =true;

$.connection.hub.start();