Asp.net は SignalR を使用してメッセージ リマインダーを実装します

1. はじめに
前回の記事では、SignalR を使用して画像を転送する方法を紹介しましたが、インスタント メッセージング アプリケーションにはメッセージ リマインダーが不可欠です。現在、多くの Web サイトに新しいメッセージ リマインダー機能が追加されています。当然ながら、SignalRシリーズにはこの機能の実装が必須となります。この記事では、SignalR+iNotify ライブラリを使用して、新しいメッセージに対するサウンドとポップアップ リマインダーを実装する方法を紹介します。

2. メッセージリマインダーの実装のアイデア
メッセージリマインダーとは、顧客が新しいメッセージを受信したときに、クライアントの右下隅にポップアップボックスが表示されることを意味します。この関数を実装するアイデアは次のとおりです:

1. SignalR サーバーがメッセージをクライアントにプッシュする方法は、クライアントの acceptMessage メソッドを呼び出してメッセージをチャット レコードに添付することです。これにより、クライアントのポップアップ ボックスを実装できます。 acceptMessage メソッド。
2. メソッドが定義されている場所を見つけたら、ポップアップ効果用のより適切な JS ライブラリを見つけるのが自然です。ここでは、それを実装するために iNotify ライブラリが使用されます。ライブラリの github アドレスは: https://github.com/jaywcjlove/iNotify、オンライン テストのアドレスは: http://jslite.io/iNotify/
3. QQ または WeChat のメッセージ リマインダーを確認してください。メッセージ リマインダーは通常、チャットしていないときに現在のタブ ページが表示されます。これを実現するには Html5 の VisibilityChange イベントを使用できますが、ここではフォーカスを失う方法である focus イベントを使用します。
3. 具体的な実装コード
ここで実装する具体的な実装コードは、2つ目の記事のコードをベースにしており、その上にメッセージリマインダー用のJSコードを追加しています。

ここでは、まず INotify ライブラリの JS ファイルを Index.cshtml ページに導入する必要があります。つまり、

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/layer/layer.min.js"></script>
<script src="~/Scripts/iNotify.js"></script>

次に、receivePrivateMessage メソッドに次の JS コードを追加します

var active = true;
 window.onfocus = window.onblur = function(e) {
  active = (e || event).type === "focus";
 };
 
 // 接收消息
  systemHub.client.receivePrivateMessage = function(fromUserId, userName, message) {
  // 专题二中的代码
   
  // 消息提醒的代码
 if (active == false) {
    var iN = new iNotify({
     effect: 'flash',
     interval: 500,
     audio: {
      file: ['/Music/msg.mp3']
     },
     notification: {
      title: "通知！",
      body: '您有一条新消息'
     }
    });
 
    iN.setTitle(true).player();
    iN.setFavicon(true).setTitle(true).notify();
   }
  };
}

上記 2 つの手順で、新しいメッセージ音とポップアップ リマインダーが完成しますが、このポップアップこの機能は IE ブラウザではサポートされていません。ポップアップ効果は Html5 通知 API を使用して実装されているため、この機能は IE ブラウザではサポートされていないため、実装できません。 Microsoft の IE ブラウザは本当に落とし穴であることがわかり、Microsoft はそれを断念して Edge を立ち上げました。私自身は Edge をテストしていませんが、多くの友人がまだ落とし穴だとコメントしています。

次に、具体的な運用実績を見てみましょう。

この記事はこれで終わりです。このブログ投稿をもちまして、SignalR シリーズは終了となります。読んでいただいた皆様、ありがとうございました。

SignalR を使用してメッセージ リマインダーを実装する Asp.net に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。