Javascriptでストリーミング通信Webクライアントアプリを作る！

こんにちは！ピジョンです！

今日はストリーミング通信を行うWebクライアントをJavascriptで実装する方法を紹介したいと思います。

ただコードなどはインターネット上に溢れていると思うので、本記事では概念的な部分を専門用語を紹介しながらお話していきます。

その結果としてみなさんが開発上に課題に感じる部分をご自身で検索できるようになればいいかなと思います。

というわけで初心者エンジニア向けの解説記事になります。

それではさっそくみていきましょう。

ストリーミング通信を実現するには？

ストリーミング通信を実現するシンプルな方法は、クライアントとなるWebアプリからサーバーにむけて常にリクエストを送り続け、同時に結果を処理するシステムになります。

はじめにHPをロードした瞬間から更新差分がないか、ということサーバーに問い合わせ続けることになります。

そのクライアントから送るリクエストというのは非同期通信を実装することになります。

レスポンスがかえってくるまでの間に、非同期的に他の処理を進めるためです。

他の処理というのは主にウェブビューの更新になると思います。

非同期通信を実装するにはPromise型の通信が扱いやすいかと思います。

成功した場合と失敗した場合の処理を明示的にかけるためです。

ストリーミング通信するためには成功・失敗の場合でもまたさらに同じリクエストを作成することになります。

サーバー側でデータの更新があればレスポンスも変わるということになります。

ストリーミング通信するアプリを作成するためにはウェブビューを動的に更新していくことが必要になるかと思います。

そのためにDOM(Document Object Model)についての基本を理解する必要があります。

ウェブの表示する内容というのは基本的にHTMLドキュメントが持つデータ構造をもとに作成されることになります。

それがDOMになります。

DOMを非同期的にどんどん更新していけば、HTMLで表示する内容もどんどん変えていくことができるわけですね。

このDOMの概念は非常に面白いです。

Webページを作成したことがある人ならば誰もが触ったことがあるものなのですが、その基本概念を知っているのと知らないのではその技術の応用性に大きく開きが生まれます。

もしその基本知識が抜けているのであればこの機会にしっかりと理解されてみてください。

音声のストリーミング処理をするには連続したデータを処理することが必要です。

連続したデータを処理するというのは、音声データを細かい単位に分けて取得し、非同期的に随時サーバーにデータを送るという意味になります。

実際のデータ処理はサーバーが担当するケースがほとんどだと思うので。

ちなみにデータを細かいに分ける単位はチャンク（CHUNK）を使うことが多いです。

そのチャンクをキュー形式、FIFO(First In First Out)でサーバーに送り続けることになるわけですね。

データはyeildされた瞬間に転送されていくわけです。

その通信などの処理は非同期に行われるので、結果を表示することもできるわけです。

その結果としてストリーミング通信が実現するわけです。

ただ音声のストリーミング処理は非常に難しいです。

僕のオススメは音声取得のクライアントと結果表示のクライアントを分けることです。

開発初心者の方はなるべく構造を簡単にすることを心がけるべきだと思います。

いかがでしたでしょうか。

ストリーミング通信と聞くとなんだか難しそうに感じますが、概念的なものをブレイクダウンしていくと案外簡単そうだなと思われる方もいるかもしれません。

もちろん本記事で紹介した方法はあくまで一例にすぎません。

この方法がわかりにくいのであれば、自分にとってわかりやすい方法をみつけることも大事だと思います。

それでは今日はこのへんで。また。