){kind=small}
ASP.NET Core MVCとSignalRでSMSメッセージを受信する方法
所要時間：4 分
このチュートリアルでは、SMSメッセージを Vonage Messages APIから SMS メッセージを受信し、リアルタイムでブラウザにプッシュする方法を学びます。API サーバーとウェブページには ASP.NET Core MVC を使用し、SMS メッセージをリアルタイムで受信するために SignalR を使用します。
このデモからコードを引っ張ってくるだけなら、すべて GitHub.
Vonage APIアカウントが必要です。
最新バージョンの .NET Core 3.1 SDK
Visual Studio 2019、Visual Studio for Mac、またはVisual Studio Codeのいずれかが必要です。
オプション：私は Ngrokを使ってテストしました。
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
Visual Studioを開き、"Create a new project "をクリックし、"ASP.NET Core Web Application "を選択し、"Next "をクリックします。アプリケーション名を "ReceiveSmsAspNetCoreMvc "とします。次のページで、"Web Application (Model-View-Controller)" を選択し、"Create" をクリックします。
SignalRを使用しているので、2種類の依存関係を追加する必要があります。まず、NuGetパッケージの依存関係を追加する必要があります。次に、クライアント・パッケージの依存関係を追加する必要があります。
2つのNuGetパッケージをインストールする必要がある：
これには複数の方法があるが、ここではdotnet CLIを使うことにする。プロジェクトのプロジェクト・ディレクトリに移動し、以下を実行する：
SignalR Client-Sideライブラリに依存しているので、SignalR Client-Sideライブラリも追加する必要がある。
Visual Studioでプロジェクトを右クリックします。 wwwroootに進みます。 Add > Client-Side Library.すると、ライブラリを追加するための小さなダイアログが表示される。このデモでは、以下を使用した。
プロバイダーunpkg
ライブラリMicrosoft/signalr@latest
特定のファイルを選択します：選択したのは
Files/dist/browser/signalr.jsそしてFiles/dist/browser/signalr.min.jsターゲットの場所wwwroot/js/signalr
フォームに記入すると、次のようになります：
Adding a Client Side library in Visual Studio
このフォームに記入した後、インストールをクリックすると、必要なファイルが以下の場所にインストールされます。 wwwroot/js/signalr
SignalRの仕組みは、クライアント・ブラウザがHubと呼ばれるものに接続する。Hubは、サーバーから各クライアントにメッセージをプッシュする。一般的にはWebSocketだが、Server-Side-Events(SSE)やLong-Pollingを使うこともできる。サーバーとブラウザークライアントを接続するために、サーバーにHubを作成する必要があります。
プロジェクトの下に Hubs.そのフォルダーの下に、新しいC#ファイル SmsHub.cs.このファイルは大したことをする必要はない。Hubクラスを拡張するクラスを宣言するだけです。このファイルは以下のようにする。
using Microsoft.AspNetCore.SignalR;
namespace ReceiveSmsAspNetCoreMvc.Hubs
{
public class SmsHub : Hub
{
}
}
次に startup.csファイルに入り、SignalRエンドポイントをミドルウェアに追加する必要がある。ミドルウェアを追加することで、SMSハブ・ルートが立ち上がり、ブラウザ・クライアントでSignalRを使えるようになる。それでは startup.csを開いて ConfigureServicesメソッドにたどり着きます。このメソッドに services.AddSignalR();SignalRミドルウェアをサーバーに追加します。これが終わると ConfigureServicesメソッドはこのようになります：
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR();
}
滞在する startup.csでいて Configureメソッドを見つける。このメソッドには app.UseEndpoints関数を引数として取り、その関数の中で SmsHubをパス /smsHub.を呼び出す。 app.UseEndpointsの呼び出しは次のようになる：
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<SmsHub>("/smsHub");
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
ミドルウェアの準備ができたので、VonageからSMSを受け取るメソッドを追加する必要がある。空のMVC Controllerを使います。Controllersフォルダを右クリックし、add -> Controllerと進み、"MVC Controller - Empty "を選択して "Add "をクリックします。 SmsControllerという名前を付けて、もう一度「追加」をクリックします。
最初に必要なのは SmsControllerを注入する。 HubContextに対して SmsHub.という IHubContextというプロパティを宣言します。 HubContextというプロパティを宣言し SmsControllerコンストラクタを宣言する。 IHubContextを引数として取り、このパラメータを HubContextプロパティに代入します。依存性注入のマジックによって、コントローラは作成時にハブコンテキストを受け取ります。
/// <summary>
/// Allows access to all browser clients subscribed through the /smsHub
/// </summary>
public IHubContext<SmsHub> HubContext { get; set; }
public SmsController(IHubContext<SmsHub> hub)
{
HubContext = hub;
}
Hub Contextにアクセスできるようになったので、受信SMS用のAPIルートを追加する必要がある。このルートは、Vonage がアプリケーションに Webhook を送信する際に使用するルートになります。このメソッドはリクエストを受け取り、そこから InboundSms オブジェクトをパースし、アプリケーションに接続されているすべてのクライアントに InboundSmsシグナルを送信します。このメソッドは、MSISDNとメッセージのテキストをユーザーにプッシュする。参考までに、MSISDNはメッセージの発信元の番号である。以下を SmsController.
[HttpPost("webhooks/inbound-sms")]
public async Task<IActionResult> InboundSms()
{
using (var reader = new StreamReader(Request.Body))
{
var json = await reader.ReadToEndAsync();
var inbound = JsonConvert.DeserializeObject<InboundSms>(json);
await HubContext.Clients.All.SendAsync("InboundSms", inbound.Msisdn, inbound.Text);
}
return NoContent();
}
ここまでできたら、あとはアプリにフロントエンドを追加するだけだ。そのために、ホーム・ビューを引き継ぐことにする。開く /Vies/Home/Index.cshtmlを開き、ウェルカムテキストを含むdivを削除してください。
次に、スクリプトのインポートをいくつか追加します。インポートするのは ~/js/sms.js(先ほどインポートしたクライアント・ライブラリである ~/js/signalr/dist/browser/signalr.jsこれは、前にインポートしたクライアント・ライブラリです。この2つのタグを追加すればOKだ。
<a href="http://~/js/signalr/dist/browser/signalr.js">http://~/js/signalr/dist/browser/signalr.js</a>
<a href="http://~/js/sms.js">http://~/js/sms.js</a>最後に、メッセージを表示するテーブルを追加します。カラムは2つだけ、 From Numberそして Message- と Msisdnと Textに対応します。
<h1>Messages</h1>
<table class="table" id="messageList">
<thead>
<tr>
<th>From Number</th>
<th>Message</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
最後に必要なのは、イベント・ハンドラを追加することです。 InboundSmsイベントハンドラを追加することです。先ほど参照した sms.jsファイルに追加します。先に進んで sms.jsファイルを /wwwroot/jsディレクトリにファイルを追加してください。このファイルでやるべきことは3つある。
smsHubへのSignalR接続の構築
のイベントハンドラを登録する。
InboundSmsイベントハンドラを登録する。SignalRの接続を開始します。
この3つをすべて実行するには、次のように sms.jsファイルに追加する。
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/smsHub").build();
connection.on("InboundSms", function (fromNumber, text) {
var rowHtml =
'<tr><td>' +
fromNumber +
'</td><td>' +
text +
'</td></tr>';
$('#messageList tbody').append(rowHtml);
});
connection.start()
.then(function () {
console.log("connection started");
})
.catch(function (err) {
console.log("Error encountered: " + err);
})
開発の観点からは、必要なことはこれだけなので、さっそくテストに取りかかろう。このテストを Ngrokを使ってこのデモをテストする。Ngrokを使用すると、アプリに一般にアクセス可能なトンネルを構築できるため、一般にアクセス可能なHTTPエンドポイントをアプリに公開する必要がある場合に便利だ。私のようにIIS Expressでこのデモをテストするのであれば、当社の をご覧いただきたい。をご覧いただきたい。要するに、ngrove を起動するときに --host-headerオプションを追加する必要があるということだ。
Visual Studioでcsprojファイルを右クリックし、プロパティを開きます。そこで、Debugタブをクリックします。便宜上、テスト時にはSSLを有効にするチェックボックスのチェックを外します。アプリのURLとその末尾のポート番号を控えておいてください。
The IIS configuration screen
次に、ngrokを立ち上げる。着信リクエストはアプリのURLからポートを指定し、ホストとポートは着信ホストヘッダを置き換えるようにします。新しいターミナルで以下のコマンドを実行してngrokを起動する（ポート番号はあなたのポートに置き換えてください）。
このコマンドを実行すると、端末がngrokに乗っ取られる。そのURLにアクセスすると、ローカルサーバーにリクエストを転送するURLが表示されます。このURLは http://randomhash.ngrok.io.私のランダムハッシュは d98024d97b04というわけで、この説明の続きでは、この値をあなたのハッシュ値に置き換えてください。
Running Ngrok to give local access to our application
IIS Expressでアプリを起動した後、ngrok URLにナビゲートして、それが一般にアクセス可能であることを確認できる。
思い出してほしい。 InboundSmsメソッドに SmsControllerで [HttpPost("webhooks/inbound-sms")]これで http://d98024d97b04.ngrok.io/webhooks/inbound-smsへのルートを確立します。テストが始まる前に最後にしなければならないことは、先ほど説明したURLへのSMSメッセージの送信先をVonageに伝えることだ。
これを行うには、${CUSTOMER_DASHBOARD_URL}/settingsに移動しましょう。デフォルトSMS設定]で、[受信メッセージ]フィールドをそのURLに設定し、[HTTPメソッド]を POST-JSON.Save Changes（変更を保存）」をクリックし、テストの準備が整いました。ホームページに移動し、Vonage API バーチャル番号にテストメッセージを送信します。Vonageバーチャル番号がわからない場合は、ダッシュボードの[numbers]の下にある ダッシュボードの「番号.サーバーにメッセージを送った後、アプリに関連付けられているウェブページを見ることで、SMSメッセージがリアルタイムでサーバーに入ってくるのがわかります。
Incoming SMS messages being displayed on the screen in the application we built
そして、メッセージを受信し、リアルタイムで表示するために必要なことはそれだけだ！
このデモのコードはすべて GitHub
