SignalR - Javascript Hub Proxies

使用SignalR时,在HTML中需要引用以下两个脚本:

<script src="~/Scripts/jquery.signalR-1.0.0.js"></script>
<script src="/signalR/hubs"></script>

第二个是用于自动生成的JavaScript集线器代理 . 一切正常 . 但是,如果以某种方式禁用JavaScript Hub Proxy生成会发生什么,可能是通过设置DisableJavaScriptProxies属性(https://github.com/SignalR/SignalR/commit/7e974f4e92551a26f3e3e0a166e1dbf6c064e850) . 禁用JavaScript代理生成并尝试在HTML中引用/ signalr / hubs时,会出现JavaScript错误:

Uncaught Error: SignalR: JavaScript Hub proxy generation has been disabled.

当我在浏览器中浏览到该路径时,响应为:

throw new Error('SignalR: JavaScript Hub proxy generation has been disabled.')

如果禁用JavaScript代理生成,那么 $.connection.myHub.client JavaScript代码将如何工作?为了让它有效,还需要做些什么?我得到的JavaScript错误是

Uncaught TypeError: cannot read property 'client' of undefined.

回答(3)

2 years ago

您可以自己创建代理 . 见here .

这也在SignalR源中的示例项目中完成 . 请参阅MouseTracking示例 . JS for it(来自here):

/// <reference path="../../Scripts/jquery-1.8.2.js" />
/// <reference path="../../Scripts/jquery.signalR.js" />

$(function () {
    var hubConnection = $.hubConnection('/signalr', { qs: 'test=1', logging: false, useDefaultPath: false }),
        hub = hubConnection.createHubProxy('mouseTracking');

    hub.on('move', updateCursor);

    function updateCursor(id, x, y) {
        var e = document.getElementById(id);
        if (!e) {
            e = $('<div id="' + id + '"><i class="icon-screenshot"></i>' + id + '</div>').appendTo(document.body);
            e.css('position', 'absolute');
        }
        else {
            e = $(e);
        }
        e.css({ left: x + 15, top: y + 15 });
    }

    hubConnection.logging = true;
    hubConnection.start({ transport: activeTransport })
        .pipe(function () {
            return hub.invoke('join');
        })
        .pipe(function () {
            $(document).mousemove(function (e) {
                hub.invoke('move', e.pageX, e.pageY);
                updateCursor(hub.state.id, e.pageX, e.pageY);
            });
        });
});

2 years ago

您可能已在Startup类中禁用它,如下所示:

public partial class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            ConfigureAuth(app);

            var hubConfiguration = new HubConfiguration();
            hubConfiguration.EnableDetailedErrors = true;
            hubConfiguration.EnableJavaScriptProxies = false;
            app.MapSignalR("/signalr", hubConfiguration);
        }
    }

我有上面的代码 . 删除/注释掉这一行:hubConfiguration.EnableJavaScriptProxies = false;应该给你代理生成 .

public partial class Startup
        {
            public void Configuration(IAppBuilder app)
            {
                ConfigureAuth(app);

                var hubConfiguration = new HubConfiguration();
                hubConfiguration.EnableDetailedErrors = true;
                app.MapSignalR("/signalr", hubConfiguration);
            }
        }

2 years ago

对于每个在这个问题上遇到困难的人 . 它似乎是设计的,甚至SignalR实用程序也只生成服务器代理方法 .

即使您有一个强类型的Hub(客户端接口),它也不会创建客户端方法 .

因此,唯一正确的答案应该是您应该生成小函数,如Microsoft所述 .

与股票样本中一样:

$.connection.hub.start()
        .then(init)
        .then(function () {
            return ticker.server.getMarketState();
        })
        .done(function (state) {
            if (state === 'Open') {
                ticker.client.marketOpened();
            } else {
                ticker.client.marketClosed();
            }

stockticker本身的定义类似于这个公共类StockTickerHub:Hub

和界面

public interface IClientStock
    {
        void MarketOpened();
        void MarketClosed();
        void MarketReset();
        void UpdateStockPrice(Stock stock);
    }

因此对于每个客户端代理方法,重复此操作 . 这不应该破坏任何机构项目目标 .

$.extend(ticker.client, {
        updateStockPrice: function (stock) {
            var displayStock = formatStock(stock),
                $row = $(rowTemplate.supplant(displayStock)),
                $li = $(liTemplate.supplant(displayStock)),
                bg = stock.LastChange < 0
                        ? '255,148,148' // red
                        : '154,240,117'; // green

            $stockTableBody.find('tr[data-symbol=' + stock.Symbol + ']')
                .replaceWith($row);
            $stockTickerUl.find('li[data-symbol=' + stock.Symbol + ']')
                .replaceWith($li);

            $row.flash(bg, 1000);
            $li.flash(bg, 1000);
        },

        marketOpened: function () {
            $("#open").prop("disabled", true);
            $("#close").prop("disabled", false);
            $("#reset").prop("disabled", true);
            scrollTicker();
        },