Question

我有一个与信号集线器的反应应用程序连接。在我的构造函数中，我调用一个建立连接的函数，并在我的组件状态

中设置接收的数据

let chat = $.connection.chatHub;

//some function to map the data from the server to state

$.connection.hub.start().done(function () {
    chat.server.join(id);
});

问题在于，当我想将数据发送到服务器时，我会在我的组件中的另一个函数上执行此操作 - 但这需要我建立另一个连接

submit(name, message) {
    let chat = $.chatHub;
    $.connection.hub.start().done(function () {
        chat.server.send(name, message);
        chat.server.join(id);
    });
}

问题是，如果我在提交功能中省略$.connection.start()，我就不允许将消息发送到服务器。我如何限制连接，所以我只需要运行一个连接？

Answer 1

基本上，您可以创建一个启动signalR连接的功能，只有在连接和启动集线器时，您才能呈现您的应用。
示例initSignalR：

export function initSignalR(callback) {
    let connection = $.hubConnection('hubURL');
    let _hub = connection.createHubProxy('hubname');

    // register to functions that the server triggers
    _hub.client.someFunction = (data) => {
        //return data from server;
    }

    _hub.client.SomeOtherFunction = (data1, data2) => {
        //return other data from server;
    }

    // connect the hub and invoke the callback passing the hub object
    $.connection.hub.start(() => callback(_hub));
}

在您呈现应用的index.js中，您可以像这样使用它：

// this will render only after the connection established
// and will pass the hub to the root component as props
// it's also possible to store the hub as global in window
initSignalR((hub) => {
    render(<App hub={hub} />,
        document.getElementById("root"));
});

现在你有一个连接的hub实例并侦听服务器方法，作为支持传递给你的根组件。
所以你可以在那里使用它（或者将它进一步传递给其他组件）：

// pass down the hub prop to your components to invoke methods on the server
class App extends React.Component {

    submit = (data) => {
        const { hub } = this.props;
        hub.invoke("methodName", data)
            .done((result) => console.log(result));
    }

    render() {
        return (
            <div>
                <input type="text" />
                <button onClick={this.submit}>Submit</button>
            </div>
        );
    }
}

如果您使用的是redux，那么hub.invoke的部分可以在中间件中处理，而不是在组件内部处理。

注意上面的代码未经过测试，我使用了redux并获得了一些不同的设置，但总体思路是一样的。

多个signalR连接

1 个答案: