ASP.NET SignalR は、リアルタイム Web 機能をアプリケーションに追加するプロセスを簡素化する、ASP.NET 開発者向けのライブラリです。興味のある人は調べてみてください。
1. バックグラウンドの使用
1. SignalR とは何ですか?
ASP.NET SignalR は、開発者がアプリケーションにリアルタイム Web 機能を追加するプロセスを簡素化する、ASP.NET 開発者向けのライブラリです。リアルタイム Web 機能は、サーバー コードが、クライアントが新しいデータを要求するのをサーバーに待機させるのではなく、コンテンツが利用可能になるとすぐに、接続されたクライアントにコンテンツをプッシュできる機能です。
2.Push.jsとは何ですか? [ブラウザが H5Notifications をサポートしている必要があります]
Notifications は通知として翻訳されます。それでは、Push.js 通知はどのように見えるのでしょうか? 以下の図を参照してください。ほとんどの通知は画面の右下隅に表示されます。
許可が必要です:
3. 多くの場合、ポーリングはデータの表示更新とメッセージのプッシュにのみ使用できます。そこで、サーバー側のデータが更新されたときにクライアント側の更新を同期する方法はないか考えました。
2. SignalR プロジェクトのデプロイを開始します (mvc を使用)
1. 新しい mvc プロジェクトを作成します
.... ...... .
2. パッケージのインポート [Vs2015]
ツール -> NuGet パッケージ マネージャー -> パッケージ管理コンソール -> インストール - パッケージ Microsoft.AspNet.SignalR -> 待機中インストール 成功
3. 新しいハブ クラスを作成します
プロジェクト -> 右クリック -> 追加 -> 新しい項目 -> SignalR -> SignalR パーマネント リンク クラス -> 保存 -> ;[MyConnection1 を例に挙げます] MyConnection1
public class MyConnection1 : PersistentConnection { /// <summary> /// 发送消息 /// </summary> /// <param name="request"></param> /// <param name="connectionId"></param> /// <returns></returns> protected override Task OnConnected(IRequest request, string connectionId) { Debug.WriteLine(connectionId); return Connection.Send(connectionId, "Welcome!");//单推事列 } /// <summary> /// 接受客户端消息 /// </summary> /// <param name="request"></param> /// <param name="connectionId"></param> /// <param name="data"></param> /// <returns></returns> protected override Task OnReceived(IRequest request, string connectionId, string data) { Debug.WriteLine(data); return Connection.Broadcast(data);//广播 } /// <summary> /// 掉线 /// </summary> /// <param name="request"></param> /// <param name="connectionId"></param> /// <param name="stopCalled"></param> /// <returns></returns> protected override Task OnDisconnected(IRequest request, string connectionId, bool stopCalled) { Debug.WriteLine("掉线"); return base.OnDisconnected(request, connectionId, stopCalled); } /// <summary> /// 重连 /// </summary> /// <param name="request"></param> /// <param name="connectionId"></param> /// <returns></returns> protected override Task OnReconnected(IRequest request, string connectionId) { Debug.WriteLine("重连"); return base.OnReconnected(request, connectionId); } }
4. 新しい Owin Startup クラスを作成します[SignalR は Owin 標準に従い、Startup はコンポーネントの起動であり、Startup クラスはデフォルトで存在します。変更するだけです]
次のコードを設定に追加します
public void Configuration(IAppBuilder app) { app.MapSignalR<MyConnection1>("/myconnection"); }
説明:myconnection にアクセスするときに、MyConnection1
5 をトリガーします。クライアント [h5]
@{ ViewBag.Title = "Home Page"; Layout = null; } <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> </head> <body> <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Scripts/jquery.signalR-2.2.1.js"></script> <script type="text/javascript"> var conn = $.connection("/myconnection"); conn.start().done(function (data) { console.log("已连接服务器,当前GUID为" + data.id); conn.send("To Admin");//发送给服务器 }); //接受服务器的推送 conn.received(function (data) { console.log("服务器返回消息: " + data); }); </script> </body> </html>
6 を追加します。プロジェクトを開始します ブラウザーのコンソールを開くと、下の図は、最初のステップが完了したことを意味します。
7. 次に、push.jsを準備する必要があります
ダウンロードアドレスgithub.com/Nickersoft/push.js
8.Quotejs
<script src="../Js/push.js"></script>
9を新規作成します。 jsプッシュデモ
function push(data, url, img) { var imgurl = img != "" ? img : "../Images/icon.png"; Push.create("新通知", { body: data, icon: imgurl, requireInteraction: true, onClick: function () { window.focus(); this.close(); window.location.href =url; } }); }
説明: data: メッセージの内容です
url: 通知をクリックして入力されるリンクです
img: 通知に表示される画像のアドレスです
requireInteraction: 設定されている場合true に設定すると、ユーザーが通知を手動で閉じるかクリックしない限り、通知は閉じられません。消える時間を設定する必要がある場合は、この属性をタイムアウト: 5000 単位ミリ秒に置き換えてください
その他のイベントお読みください: www.npmjs.com/package/push.js
10 2 つを組み合わせます
//实时推送 var conn = $.connection("/myconnection"); conn.start().done(function (data) { console.log("已连接服务器,当前GUID为" + data.id); }); //接受服务器的推送 conn.received(function (msg) { console.log("服务器返回消息: " + msg); if (msg != "") { push(msg, "#", "") } });
11. 効果は次のとおりです:
12. ここでは、サーバーによるアクティブプッシュを実装します。単押しの原理も同じです。
ブロードキャストとシングルプッシュの2つのモードに分かれています。
Broadcast:
var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接 context.Connection.Broadcast("我是一条新的推送消息!");//广播推送
Single Push:
var context = GlobalHost.ConnectionManager.GetConnectionContext<MyConnection1>();//获取你当前的Connection连接 context.Connection.Send(connectionId, "Welcome!");//单推事列
connectionId:サーバーによって各クライアントに割り当てられる GUID です
13. 効果は次のとおりです:
サーバーはタスクを処理します。ブロードキャストを呼び出して、即時のデータ更新とメッセージのプッシュのためにクライアントにアクティブにプッシュできます。 【関連の推奨事項
以上がメッセージ プッシュを実装する ASP.NET のサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。