Vue は、SignalR フロントエンドとフロントエンドのリアルタイムメッセージ同期実装メソッドを組み合わせています-jsチュートリアル-php.cn

Vue は、SignalR フロントエンドとフロントエンドのリアルタイムメッセージ同期実装メソッドを組み合わせています

小云云

リリース： 2018-02-05 16:15:42

オリジナル

2785 人が閲覧しました

この記事では主に、フロントエンドとバックエンドのリアルタイムメッセージ同期を実現するための Vue を紹介します。興味のある方は参考にしていただければ幸いです。

最近、ビジネスにおいてサーバーとクライアント間のリアルタイム通信機能を実現する必要があるので、Signalrについて少しまとめて整理してみました。

SignalR は、ASP.NET のライブラリとして、アプリケーションにリアルタイムのサーバー側とクライアント側の双方向通信機能を簡単かつ便利に提供できます。

SignalR には、クライアント側に接続とハブという 2 つの API があります。

送信されるメッセージの形式が特定で変更されていない場合など、特殊な場合には、Connections API を使用します。

ハブは、接続 API のより高度な実装であり、クライアントとサーバーが相互にメソッドを直接呼び出すことができるため、ほとんどの場合に使用されます。実際のアプリケーションの特定のシナリオでは、たとえば、サーバーが新しい注文を取得すると、クライアントの印刷メソッドを呼び出します。クライアントが印刷を完了した後、サーバーの注文ステータス更新メソッドを呼び出します。

以下はフロントエンドのハブのAPIを紹介します

生成されたプロキシ

生成されたプロキシを使用する場合、サーバー上で直接メソッドを呼び出すのと同じように、構文レベルでサーバー側のメソッドを呼び出す方が簡単です。

以下はサーバー側のコードです。これはチャットメッセージをリストに追加することを意味します

public class DemoChatHub : Hub
{
  public void NewChatMessage(string name, string message)
  {
    Clients.All.addMessageToList(name, message);
  }
}

ログイン後にコピー

クライアントが呼び出すとき:

var demoChatHubProxy = $.connection.DemoChatHub;
demoChatHubProxy.client.addMessageToList = function (name, message) {
  console.log(name + &#39; &#39; + message);
};
$.connection.hub.start().done(function () {
 
  $(&#39;#newChatMessage&#39;).click(function () {
     demoChatHubProxy.server.newChatMessage($(&#39;#displayname&#39;).val(), $(&#39;#message&#39;).val());
   });
});

ログイン後にコピー

生成されたプロキシが使用されないとき、クライアントが呼び出すとき

var connection = $.hubConnection();
var demoChatHubProxy = connection.createHubProxy(&#39;demoChatHub&#39;);
demoChatHubProxy.on(&#39;addMessageToList&#39;, function(name, message) {
  console.log(name + &#39; &#39; + message);
});
connection.start().done(function() {
  $(&#39;#newChatMessage&#39;).click(function () {
    demoChatHubProxy.invoke(&#39;newChatMessage&#39;, $(&#39;#displayname&#39;).val(), $(&#39;#message&#39;).val());
    });
});

ログイン後にコピー

しかし、Vue プロジェクトでは、フロントエンドとバックエンドが分離されている場合、次のように参照されません:

<script src="@Url.Content("~/signalr/hubs")" type="text/javascript"></script>

ログイン後にコピー

そして、クライアントメソッドで複数のイベントハンドラーを使用したい場合は、生成されたプロキシは使用できません。

したがって、次の例では、生成されたプロキシを使用しません。

1. 接続を確立する方法

var connection = $.hubConnection(&#39;localhost:23123&#39;);//如果前后端为同一个端口，可不填参数。如果前后端分离，这里参数为服务器端的URL
var demoChatHubProxy = connection.createHubProxy(&#39;demoChatHub&#39;);
demoChatHubProxy.on(&#39;addMessageToList&#39;, function(userName, message) {
  console.log(userName + &#39; &#39; + message);
}); 
connection.start()
  .done(function(){ console.log(&#39;Now connected, connection ID=&#39; + connection.id); })
  .fail(function(){ console.log(&#39;Could not connect&#39;); });

ログイン後にコピー

接続を開始する前 (start メソッドを呼び出す前) に、少なくとも 1 つのイベント処理メソッドを登録することが最善であることに注意してください。登録すると、Hubs の OnConnected メソッドが呼び出されなくなり、サーバーからクライアントのメソッドを呼び出すことができなくなります (トラブルになりやすいため、事前にメソッドを登録しておく必要があります)。

2. クライアントがサーバー側メソッドを呼び出す方法
サーバーを呼び出すときにメソッド名の最初の文字を大文字にする必要がないことに注意してください。 -end 設定が必要です。

demoChatHubProxy.invoke(&#39;newChatMessage&#39;, {name:&#39;a&#39;,message:&#39;b&#39;});

ログイン後にコピー

3. サーバーはクライアントメソッドを呼び出します

まず、クライアントは、サーバーによって呼び出される前に、メソッドを登録する必要があります。

demoChatHubProxy.on(&#39;addMessageToList&#39;, function(userName, message) {
  console.log(userName + &#39; &#39; + message);
});

ログイン後にコピー

4 Vue プロジェクトで SignalR を使用する

まず、SignalR パッケージをインストールします。SignalR は jQuery に依存していることに注意してください。

npm私はsignalr、jquery

、利便性のために、webpack.base.conf.js

rreee

でグローバルjqueryを登録します。

現時点では、Vue プロジェクトで SignalR を使用でき、バックエンドの関連構成は一時的にスキップされます。

新しいsignalr.jsを作成する

plugins: [new webpack.ProvidePlugin({
      $: &#39;jquery&#39;,
      jQuery: &#39;jquery&#39;,
      &#39;window.jQuery&#39;: &#39;jquery&#39;,
      &#39;root.jQuery&#39;: &#39;jquery&#39;
    })
  ]

ログイン後にコピー

このように、コンポーネントにsignalr.jsを導入した後、startConnectionメソッドを呼び出して接続を確立します。