Rundevlog

小さい会社のしがないエンジニアのブログ

2023.5.3

【Web開発入門 vol.4】Websocketとは〜双方向通信の実現〜

こんにちは、かじです。

今回はWebsocketについて解説していきたいと思います。

1.HTTP通信の問題点

以前の記事でWebの仕組みでは、クライアントがサーバーへリクエストすることで、サーバーからクライアントへサーバーへレスポンスを返すことで、WEBサイトやWEBアプリケーションを構築していると解説しました。

https://rundevlog.com/2023/06/04/%e3%80%90web%e9%96%8b%e7%99%ba%e5%85%a5%e9%96%80vol-1%e3%80%91web%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf%e3%80%9c%e3%82%af%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%b3%e3%83%88%e3%81%a8%e3%82%b5%e3%83%bc%e3%83%90/

しかし、これではクライアントからサーバーへリクエストを行わないと、サーバーからクライアントへ情報を渡すことができないということです。

WEBアプリケーションである掲示板Aをクライアント1とクライアント2が利用しているとします。クライアント1が掲示板Aに書き込みを行った際、クライアント2は掲示板のページを更新しない限り彼の画面上には、クライアント1の書き込みが反映されることはありません。

LINEなどのチャットアプリでは、送信されたメッセージが相手にすぐ表示されるリアルタイム性が売りになるかと思いますが、いちいち画面を更新しなければいけないとなると、新規のメッセージに気づきにくいですし、UI、UXの面で優れているとは言えません。

通常のHTTP通信で、チャットアプリでリアルタイムっぽさを出す方法としては、定期的にリクエストを行うようにしたり、メッセージを送信したタイミングでメッセージを取得するような実装が考えられますが、リクエストをかけていない間隔が生じてしまい、リアルタイム性が担保できません。

CometといってHTTPリクエストを送った後に新規の情報がなければ、レスポンスを返すのを待つという技術もありましたが、無駄が多くあまり流行りはしませんでした。

2.Web Socketとは

Web Socketとは双方向性通信を実現するための通信方法になります。

HTTP通信がクライアント、サーバー間のリクエスト、レスポンスによって情報をやり取りするのに対して、Web Socketはクライアントからサーバへ接続のリクエストをして、サーバーとクライアントへ接続の確立ができた後は、クライアントサーバー間で通信が双方向で通信された状態になります。

これによって、リアルタイム性を持った通信をすることが可能になります。

例として上記のチャットアプリでは、クライアントのリクエストをせずにサーバーから情報をクライアントへ送信することができます。

チャットアプリをはじめとするSNSサービスや、ビデオ通話アプリ、対戦型のゲームなどでこのWeb Socketを使用しています。

3.Web Socketサーバーを構築するためのライブラリ

Web Socketはサーバーサイド言語のライブラリによって構築することが可能です。

Node.jsではwsやsocket.ioを使用することでWebSocketサーバーを構築することが可能です。

Pythonではwebsockets、Rubyではem-websocket、PHPではRatchetを使用してWebSocketサーバーを構築することができます。

今回は、ここまでです。

次回はPHPのRatchetを使用してWebSocketサーバーを構築し簡単なチャットアプリを作成していきたいと思います。

~画像出典元~

Online illustrations by Storyset