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调用后台事件就可以了

Logo

前往低代码交流专区

更多推荐