jQuery 使用多个连接的SignalR客户端

在本文中，我们将介绍如何使用jQuery和SignalR库来创建一个SignalR客户端，该客户端可以与多个连接进行通信。SignalR是一个强大的实时通信库，它使得在Web应用程序中实现实时通信变得非常简单。

什么是SignalR？

SignalR是一个开源的ASP.NET库，它允许即时双向通信。通过SignalR，Web应用程序可以通过服务器发送实时内容给客户端，而不需要客户端进行轮询。

SignalR支持多种传输方式，包括WebSocket、Long Polling、Server-Sent Events等。它能够自动选择最佳的传输方式，以确保实时通信的稳定性和可靠性。

如何使用jQuery和SignalR来创建SignalR客户端？

首先，我们需要引入jQuery和SignalR的库文件。可以从官方网站上下载相应的库文件，也可以通过NPM或CDN来获取。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.signalr/3.1.0/jquery.signalr.min.js"></script>

接下来，我们需要在客户端代码中创建SignalR连接。使用$.hubConnection()方法来创建一个连接对象，并指定服务器上的Hub名称。

var connection1 =  $.hubConnection('/myHub1'); var connection2 =$ .hubConnection('/myHub2');

创建连接对象之后，我们需要定义客户端方法，以便在服务器端调用。通过调用连接对象的proxy.on()方法来定义客户端方法。

connection1.proxy.on('clientMethod1', function (data) {
    console.log('Server called client method 1 with data: ' + data);
});

connection2.proxy.on('clientMethod2', function (data) {
    console.log('Server called client method 2 with data: ' + data);
});

接下来，我们需要启动连接。调用连接对象的start()方法来启动连接。

connection1.start().done(function () {
    console.log('Connection 1 started');
});

connection2.start().done(function () {
    console.log('Connection 2 started');
});

现在，我们已经创建了两个连接并启动了它们。我们可以使用连接对象的proxy.invoke()方法来调用服务器端的方法。

connection1.proxy.invoke('serverMethod1', 'Hello from Connection 1');

connection2.proxy.invoke('serverMethod2', 'Hello from Connection 2');

这样，我们就可以实现与多个连接进行通信的SignalR客户端。

示例说明

假设我们有一个在线聊天室应用程序，它包含多个聊天室。客户端可以加入不同的聊天室，并与其他成员进行实时聊天。

我们可以使用多个SignalR连接来处理不同的聊天室。每个连接对应一个聊天室，客户端加入哪个聊天室就连接到对应的连接。

var chatConnection =  $.hubConnection('/chatHub'); var gameConnection =$ .hubConnection('/gameHub');

chatConnection.proxy.on('receiveMessage', function (message) {
    console.log('Received message in chat room: ' + message);
});

gameConnection.proxy.on('receiveScore', function (score) {
    console.log('Received score in game room: ' + score);
});

chatConnection.start().done(function () {
    console.log('Chat connection started');
});

gameConnection.start().done(function () {
    console.log('Game connection started');
});

chatConnection.invoke('joinChatRoom', 'ChatRoom1');
gameConnection.invoke('joinGameRoom', 'GameRoom1');

在上面的示例中，我们创建了两个连接，一个用于处理聊天室，另一个用于处理游戏房间。在连接对象的客户端方法中，我们分别定义了当服务器端调用对应方法时的行为。

然后，我们启动了这两个连接，并调用了服务器端的方法，示例中分别是加入聊天室和加入游戏房间。