JavaScriptを使用してリアルタイムアプリを構築する5つの方法

Webページにあまり期待していなかった時期がありました。それは私に思い出させます、スペースジャム映画のウェブサイトはまだ元の形でインターネット上にあります。そしてそれはフレームセットを使用します。iFrameではありません。フレーム

スペースジャム

スペースジャム、文字、名前、および関連するすべての表示は、ワーナーブラザースの商標です。©1996 www.warnerbros.com

Warner Brosには、DreamweaverMXの穏やかに使用されたコピーがいくつかあります。

それは1996年でした。これは2019年です。時代は変わり、ユーザーはWebサイトにもっと多くのことを期待しています。彼らは、見栄えが良いだけでなく、アプリがいっぱいになることを期待しています。これには、リアルタイムであることも含まれます。

リアルタイムアプリケーション

リアルタイムアプリとは、現在のユーザーが行ったアプリだけでなく、接続されたアプリケーションのシステム内の任意の場所での変更に反応するアプリです。

リアルタイムの標準的な例は、メッセージングアプリケーションです。金曜日に手羽先を集めることについて友達のグループにテキストメッセージを送るときのように。次に、仕事からバーへの進捗状況を1分ごとに更新します。ありがとう、トレバー。今、私たちは皆、サインアップしなかった通知地獄に閉じ込められています。私はただいくつかの翼が欲しかった。

Webに関しては、通常ネイティブアプリケーション用に予約されているリアルタイム機能を取得するために使用できるいくつかの異なるパターン、テクノロジー、ライブラリ、およびサービスがあります。私は最近、JavaScriptでリアルタイムアプリを構築するための5つの方法を教えてくれたAnthonyChuと話をしました。

Anthony Chu #MSIgniteTheTour(@nthonyChu)| ツイッター

Anthony Chu #MSIgniteTheTour(@nthonyChu)からの最新のツイート。クラウドアドボケイト@Microsoft。Azure、ASP .NET、Node.js… twitter.com

1.ロングポーリング

これは、アプリケーションがスケジュールに従ってサーバーに更新を要求するときです。アプリはサーバーを「ポーリング」しています。

これは、「私たちはもうそこにいますか?」と尋ねる子供たちの正味の同等物です。5分ごと。私たちはまだそこにいるように見えますか、子供?もう一度聞いてみてください。この「TheBeeMovie」のコピーを溝に投げて、子供の頃と同じように窓から芝生を眺めることができることを誓います。

ロングポーリングは、jQueryやAxiosなどのJavaScriptHTTPライブラリを使用して手動で実装できます。私は実際にこれを自分で実装したことはありません。この記事の調査を行ったところ、これを行う最良の方法は、で再帰関数を使用することであることがわかりましたsetTimeout。これは、使用setIntervalが失敗またはタイムアウトしたリクエストを考慮しないためです。大量のajax呼び出しが発生し、すべてが順不同で処理される可能性があります。

これは、TechOctaveに関する非常に優れた記事の例です。

(function poll(){ setTimeout(function(){ $.ajax({ url: "server", success: function(data){ //Update your dashboard gauge salesGauge.setValue(data.value); //Setup the next poll recursively poll(); }, dataType: "json"}); }, 30000); })();

特にロングポーリング用のpollymer(Polymerと混同しないでください)のようなライブラリもあります。それを得る?「世論調査」イマー?ポーリングしますか?これはオンですか?

ファンアウト/ポリマー

汎用AJAX /ロングポーリングライブラリ。GitHubでアカウントを作成して、ファンアウト/ポリマーの開発に貢献します。github.com

ロングポーリングはすべてのブラウザで機能するため、優れています。超古いものでさえ。それは非常に非効率的であり、正確に「リアルタイム」ではないため、それは悪いことです。また、ですでに見たように、プログラムしなければならない奇妙なエッジケース(リクエストの失敗など)もいくつかありますsetInterval

ロングポーリングのより良い代替手段は、サーバー送信イベントまたはSSEです。

2.サーバー送信イベント

サーバー送信イベント(SSE)は、クライアントがサーバーに情報を要求するという点で、ロングポーリングに似ています。大きな違いは、SSEでは、サーバーが接続を開いたままにすることです。イベントが発生し、クライアントに送信する情報がある場合、サーバーはクライアントにイベントを送信します。

サーバー送信イベント

従来、Webページは、新しいデータを受信するためにサーバーに要求を送信する必要がありました。つまり、ページは… developer.mozilla.orgからのデータを要求します

「地獄からの遠征」の例えに戻ると、これは、子供が「もうそこにいますか?」と言って、あなたの応答を辛抱強く待っているようなものです。4時間の崇高な沈黙の後、目的地に到着し、振り返って「はい」と言います。これは、私がこれまでに思いついた中で最も非現実的なシナリオです。

SSEはブラウザEventSourceAPIの一部です。caniuse.comによると、IE11もEdgeもSSEをサポートしていないことに注意してください。そのため、選択するのは難しいテクノロジーですが、興味深いものです。

幸いなことに、ほとんどすべてのブラウザーがWebSocketsをサポートしています。

3.Webソケット

Web Socketsは、クライアントとサーバー間の真の双方向通信チャネルを促進するテクノロジーです。サーバーからクライアントへの通信のみであるServer-SentEventsとは異なり、WebSocketは双方向の通信に使用できます。

Web Sockets are, uh, kinda verbose. They aren’t really the kind of API’s you wanna build apps with. Kind of like you could make an HTTP request with the XHR object, but OMG NO. I Googled “PHP Web Socket Sample” and found this doozy from the PHP docs. I zoomed all the way out in Chrome and barely got everything in a single screenshot.

And that’s ONLY the server portion. You still gotta wire up the browser.

So….that’s a no for me.

Fortunately, there are plenty of libraries that abstract Web Sockets even further so you don’t have to write any of this. One of those libraries is called “SignalR”.

4. SignalR

SignalR is a library that implements Web Sockets both in JavaScript AND .NET. On the server, you create what is known as a “hub” in SignalR. This hub sends and receives messages from clients.

Clients then connect to the hub (using the SignalR JavaScript library) and respond to events from the hub, or send their own events into the hub.

SignalR also falls back to long-polling whenever Web Sockets is unavailable. Although that’s not super likely unless you’re using IE 9 or lower.

Here is an example of setting up SignalR on the server…

using System; using System.Web; using Microsoft.AspNet.SignalR; namespace SignalRChat { public class ChatHub : Hub { public void Send(string name, string message) { // Call the broadcastMessage method to update clients. Clients.All.broadcastMessage(name, message); } } }

OK, ok. I know this is not an apples to apples comparison with the PHP example from above, but I’m trying to make a point here. Just go with it. Do it for me. I’m having a rough morning.

So SignalR makes it more fun to program Web Sockets, but you know what’s even more fun than programming them? Not programming them.

5. Azure SignalR

Often, when we want to set up real-time applications, building out a Web Socket server isn’t exactly a value-added activity. We do it, but only because we have to to get the real-time. We’d prefer that it “just worked”.

Azure SignalR is exactly that. It is a SignalR Hub that you can consume on demand as a service. That means that you only have to send and respond to events — which is what you’re after in the first place.

What is Azure SignalR

An overview of the Azure SignalR service.docs.microsoft.com

You create the SignalR Hub in Azure as an Azure Service, and then you just connect to it from the client and send/receive messages.

And now you know….

Check out the interview below with Anthony. We shot this one in Vegas while we were both at a conference and had a good time with a wig that I bought at Party City. Best 8$ I ever spent.