テンプレートテスト

ラベル SignalR の投稿を表示しています。すべての投稿を表示

2018/01/22

ASP.NET Core で SignalR を使用する

尚、WebSocket は昔に Node.js と Socket.IO を使ってみたことがあるのですが、SignalR は初めて触ります。  ## 環境  - Visual Studio 2017 - ASP.NET Core 2.0  ASP.NET Core 2.0 の MVC テンプレートプロジェクトをベースとします。  ## サーバーサイドの実装  ### SignalR Core のインストール  NuGet パッケージマネージャーコンソールで以下のコマンドでインストールします。   （現在は alpha 版なので、`-pre` をつけてインストールする必要があります。）  ```sh PM> Install-Package Microsoft.AspNetCore.SignalR -pre ```  ### Hub クラスの作成  SignalR ではPersistent Connection と Hub という２つの通信モデルがあるようです。  - http://www.atmarkit.co.jp/ait/articles/1303/19/news099_2.html  今回は Hub を使用します。  `SignalR.Hub` を継承したクラスを作成します。     ``` using Microsoft.AspNetCore.SignalR;  // 中略  public class SignalRTest : Hub {     public Task Send(string data)     {         return Clients.All.InvokeAsync("AddMessage", data);     } } ```  これで API が RPC として実装され、外部から `Send` メソッドが使用可能となります。   ### Startup.cs の変更  SignalR を使用するための準備として、`Startup` クラスの `ConfigureServices` メソッドに `AddSignalR` を追加します。  ```cs public void ConfigureServices(IServiceCollection services) {     services.AddSignalR();// <-- SignalR     services.AddMvc(); } ```  また、`Startup` クラスの `Configure` メソッドに `UseSignalR` を以下のように追加します。  ```cs app.UseSignalR(routes =>  // <-- SignalR {     routes.MapHub<SignalRTest>(nameof(SignalRTest)); }); ```  ここまで実装した状態でプログラムを実行し、`http://localhost:xxxxx/SignalR` を開いたときに `Connection ID required` と表示されれば正常です。  ## クライアントサイドの実装  SignalR の JavaScript Client を使用します。  ### SignalR Client のインストール  ASP.NET Core では SignalR の JavaScript 用クライアントも新しくなっているようです。  - https://blogs.msdn.microsoft.com/webdev/2017/09/14/announcing-signalr-for-asp-net-core-2-0/  ASP.NET Core ではフロントエンドのパッケージ管理は Bower で管理されていましたが、現在では Bower は非推奨となっているので、この新しい SignalR Client も Bower では提供されていないようです。   なので、上記のサイトに書いてある通り、npm でインストールします。  ```sh npm install @aspnet/signalr-client ```  インストールが完了したら、`signalr-client.js` をプロジェクト配下の `wwwroot/js` にコピーします。   尚、現在ではまだ alpha 版なので、ファイル名は `signalr-client-1.0.0-alpha2-final.js` のようになっています。   ### View の追加  ASP.NET Core の MVC テンプレートプロジェクトに対して、`Views/Home/SignalR.cshtml` というファイルを作成しました。  #### Script の読み込み  従来の SignalR では、Script ファイルに加えて、SignalR が動的に生成する `~/signalR/hubs` というフォルダも読み込む必要があったようですが、SignalR Core では不要になったようです。   なので、以下の一行で OK です。  ```html <script src="~/js/signalr-client-1.0.0-alpha2-final.min.js"></script>```  ASP.NET Core の MVC テンプレートプロジェクトでは、`_Layout.cshtml` に以下のセクションが定義されています。  ``` @RenderSection("Scripts", required: false) ```  従って、SignalR を使用したい View で、Script セクションを作成し、そこで SignalR の Script を読み込ませたいと思います。  セクションについては以下を参照してください。  - http://www.atmarkit.co.jp/fdotnet/aspnetmvc3/aspnetmvc3_08/aspnetmvc3_08_02.html  `SignalR.cshtml` に以下を記述します。  ```cs @section scripts {      <environment include="Development">        <script src="~/js/signalr-client-1.0.0-alpha2-final.min.js"></script>    </environment>} ```  #### SignalR の使用  まずは簡単なサンプルとして、上記のコードに以下のようなコードを追加しました。  ```html @section scripts {      <environment include="Development">        <script src="~/js/signalr-client-1.0.0-alpha2-final.min.js"></script>    </environment>     <script>        $(function () {             let connection = new signalR.HubConnection('/SignalRTest');              connection.start()                 .then(() => {                     console.log('connected');                     connection.invoke('send', 'Hello');                 });              connection.on('AddMessage', data => {                 console.log('recieved: ' + data);             });                    });     </script>} ```  `signalR.HubConnection` で `Hub` クラスを継承したクラスを指定します。  `connection.invoke('send', 'Hello');` で、Hub クラス内の `Send` メソッドをコールしています。  `connection.on('AddMessage',...);` で、`AddMessage` というメッセージを受信したときの処理を定義しています。    ### Controller の変更  `HomeController.cs` に以下の View に対応したアクションメソッドを追加しました。  ```cs public IActionResult SignalR() {     return View(); } ```  ### とりあえず実行  以上まで実装し、デバッガを起動し、`/Home/SignalR` にアクセスします。   デバッガのコンソールログには以下のように出力されます。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgs18OzggUnAQ46-KPaL2NbPyfLdWyJ4KN6wrySJQ-2lw437zW0zG12B72-qmKvcB4uQxTvUWqGznHQ-Y1juTHobgT65Fba8EhdbjnUmKCiWyr422gpCrbzBJFHRPyfsUta7Fk_z-o7U/s1600/signalr2.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhgs18OzggUnAQ46-KPaL2NbPyfLdWyJ4KN6wrySJQ-2lw437zW0zG12B72-qmKvcB4uQxTvUWqGznHQ-Y1juTHobgT65Fba8EhdbjnUmKCiWyr422gpCrbzBJFHRPyfsUta7Fk_z-o7U/s320/signalr2.png" width="320" height="153" data-original-width="514" data-original-height="246" /></a> ### メッセージの送信ボタンを実装  `SignalRTest.cshtml` を以下のように変更してみます。  ```html @{     ViewData["Title"] = "SignalR Test"; }  @section scripts {      <environment include="Development">        <script src="~/js/signalr-client-1.0.0-alpha2-final.min.js"></script>    </environment>     <script>        $(function () {             let connection = new signalR.HubConnection('/SignalRTest');              connection.start()                 .then(() => {                     console.log('connected');                     connection.invoke('send', 'Hello');                 });              connection.on('AddMessage', data => {                 console.log(data);                 $('#messages').append($('<li>').text(data));             });              $("#sendButton").click(function () {                 connection.invoke('send', $('#sendMessage').val());             });         });     </script>}  <h2>SignalR Test</h2> <input type="text" id="sendMessage" placeholder="Enter report name" /><input type="button" id="sendButton" value="Send" /> <ul id="messages"></ul>```  実行結果は以下のようになります。  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyAxHyaQ7Sh4ftyZ_aCh2dtsgAxEXcT-_PjgiBmThADADRK3cpQuHEqtjuHYdal9rpiToj8d1DKQ9_tyGmBWZqr7TlXBROKTaVVwapjOTlQzegc3upwdDYowqNdigwir_Ss-R7QMFoTBc/s1600/signalr3.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyAxHyaQ7Sh4ftyZ_aCh2dtsgAxEXcT-_PjgiBmThADADRK3cpQuHEqtjuHYdal9rpiToj8d1DKQ9_tyGmBWZqr7TlXBROKTaVVwapjOTlQzegc3upwdDYowqNdigwir_Ss-R7QMFoTBc/s320/signalr3.png" width="320" height="319" data-original-width="533" data-original-height="532" /></a> ## 感想  SignalR Core はまだ正式リリース前であり、また ASP.NET Core 自体の情報が少ないこともあり、ここまで動くようにするだけでも結構苦労しました。   しかし、実際動いたコードだけをみると、とても簡単に双方向通信が実現できて便利だなと思いました。  ## 参考 URL  **SignalR**   - https://docs.microsoft.com/en-us/aspnet/core/fundamentals/websockets - http://blog.livedoor.jp/monthly_check/archives/70912403.html - http://matsujirushi.hatenablog.jp/entry/2017/09/29/232258 - https://blogs.msdn.microsoft.com/webdev/2017/09/14/announcing-signalr-for-asp-net-core-2-0/  **WebSocket**   - http://tamafuyou.hatenablog.com/entry/aspnetcore_websocket_vue_sample - http://zbrad.github.io/tools/wscore/ - https://blog.masuqat.net/2016/06/10/asp-net-core-websocket/

テンプレートテスト

2018/01/22

ASP.NET Core で SignalR を使用する

Translate

Popular Posts

Labels

Blog Archive