vue使用signalr

1.先安装依赖：

npm i signalr jquery --save

2.因为signalr依赖jquery，我们先配置全局jquery，这里使用的项目框架是vue-cli3+ts，所以先配置vue.config.js

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'windows.jQuery': 'jquery',
            }),
        ],
    },
}

3.在main.ts中引入signalr:

// 先引入$，防止报$找不到的错误
import $ from "jquery";
// 引入signalr
import "signalr"

这里需要注意：如果你的引入方式是这样的，然后在使用中报了“$.hubConnection is not a function”的错误，请使用以下方式引入jquery:

首先先安装：

npm install --save expose-loader

然后在main.ts中引入

import "expose-loader?jQuery!jquery";
import $ from "jquery";
// 如果不行的话就用这个引入：import "../node_modules/signalr/jquery.signalR.min.js";
import "signalr";

4.在需要使用signalr的组件中使用：

先创建连接：

// 我这里是前后端分离的，连接地址是后台地址，注意：连接地址后面不要加/signalr，因为它会自动加上的
this.connection = ($ as any).hubConnection("连接地址");
// 创建代理
this.chatHubProxy = this.connection.createHubProxy("代理名称");

// 监听后台的test事件，即后台执行test时，会执行以下内容
this.chatHubProxy.on("test", (data: any) => {
    console.log(data);
});

    // 开始连接 jsonp是开启跨域
    this.connection
            .start({ jsonp: true })
            .done(() => {
                // 连接成功
                console.log("Now connected, connection ID=" + this.connection.id);
            })
            .fail((err: any) => {
                console.log(err);
            });

    // 调用后台方法，参数形式可以和后台协商
    this.chatHubProxy.invoke("后台方法名","参数");

说一下我遇到的坑吧：

1.引入signalr报错，总是报$.hubConnection is not a function，找了两天，才正确引入。

2.以为signalr你websocket一样，有自己的send、receive、close事件，最后才发现，要实现交互，只需要使用on监听后台事件，使用invoke调用后台事件就可以了