Help us understand the problem. What is going on with this article?

非同期通信の仕組みについて

More than 1 year has passed since last update.

同期通信の実装に詰まっているため、一度、非同期通信の仕組みについて、アウトプットしてみた。

1.非同期通信とは?

非同期通信とは、コンピュータ間で送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式である。
つまり、送信者と受信者の両方がオンラインである必要がなく、片方が接続しているだけで通信が成立する。

非同期通信の対義語として、同期通信というものがある。
同期通信とは、コンピュータ間で送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせなければならない通信を行う通信方式であう。
つまり、送信者と受信者の両方がオンラインで繋がっている必要があり、片方が接続しているだけでは通信が成立しない。

非同期通信の身近な具体例としては、GoogleMapやLINEが挙げられる。
GoogleMapでは、ユーザーが、地図を拡大・縮小するとそれに合わせて、画面上における地図の詳細が変化したり、ユーザの周りの位置情報が変化したりする。LINEでは、メッセージを送信した時に、メッセージ画面の下に送信したメッセージがスクロールされる。

2.非同期通信の仕組み

同期通信と非同期通信との仕組みをそれぞれ比較しつつ、説明していく。

まず、同期通信の仕組みについて説明する。
同期通信では、ユーザーがWebブラウザ(ビュー)上から、Webサーバーにリクエストを送信する。次に、それを受け取ったサーバー側が、表示するHTMLファイルを作成し、それがユーザー側へレスポンス(応答)として、Webブラウザ(ビュー)上に表示されるという仕組みである。
つまり、同期通信では、リクエストを出してからレスポンスが返ってくるまでは、他の処理を行うことはできず、サーバーからのレスポンスを待ち続けなければならないのである。

次に、非同期通信の仕組みについて説明する。
リクエストがされた時、クライアント側(Webブラウザ上)で動くjavascriptが直接サーバーとのやりとりを行う。そして、それによって取得したデータを元に、HTMLファイルを更新するという仕組みである。この時、送受信するデータはHTMLではなくXMLで行われる。
つまり、非同期通信では、リクエストを出してからレスポンスが返ってくるまでの間、ブラウザ上で他の処理を行い、サーバーからのレスポンスが返ってきた時にサーバー側から所得した情報をWebブラウザ(ビュー)上に表示するのである。

3.私見における同期通信と非同期通信の違い

私見では同期通信と非同期通信とでは、アルゴリズムが組まれてその処理が実行されている場所にも違いがあると考えている。

つまり、同期通信では、アルゴリズムが組まれてその処理が実行されている場所は、サーバー側(バックエンド)のみであり(Rubyなど)、ビュー側(フロントエンド)では一切それがない。よって、サーバー側からのレスポンスが返ってくるまでの間、ビュー側での処理は止まる。

他方、非同期通信では、アルゴリズムが組まれてその処理が実行されている場所は、サーバー側(バックエンド)だけでなく、ビュー側(フロントエンド)においてもなされている(Javascriptなど)。よって、サーバー側からのレスポンスが返ってくるまでの間、ビュー側での処理は続行される。 

つまり、非同期通信では、、サーバー側(バックエンド)も、ビュー側(フロントエンド)も常に処理が実行され続けているということになる。
以上

okamoto_ryo
2019年4月から本格的にプログラムを勉強している文系大学4年生です。主にHTML/CSS/JavaScript/jQuery/Ruby/Ruby on Railsを勉強しています。そして、今後はPHP/Laravel/vue.js/Reactなどのフレームワークを学習していきます。 日々の勉強で学んだことや自分なりに理解できたことを発信していきます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away