コラム

Webアプリケーションを開発している時にはJSONでデータを送受信することが多いでしょう。このJSONは大抵、HTTP/HTTPSを使って送受信されます。

サーバーとWebブラウザでは、殆どがこのHTTP/HTTPSによってやり取りをしていますが、他にも便利なプロトコルが存在します。よりWebアプリケーションを便利にするためにも、ぜひこれらの技術を知っておきましょう。

WebSocket

WebSocketは ws:// または wss:// で表現されます。テキストを同期通信するのに使われるプロトコルです。テキストチャットを作るのに使われますが、ソーシャルメディアでの通知などでも使われます。

リアルタイム通信ができるので、サーバーに定期的に情報更新がないか確認する必要がありません。

WebSocket – Web API | MDN

SSE

SSEはサーバー送信イベント（Server-Sent Events）の略になります。WebSocketとは異なり、サーバーからクライアントへの通信のみ可能です。HTTP/2でなくとも利用できますが、最大接続数に制限があるため、複数タブ開いていると使えなくなる場合があるようです。

サーバー側では Content-Type: text/event-stream を使って持続的に接続し続けます。

サーバー送信イベントの使用 – Web API | MDN

WebRTC

WebRTCはWebSocketのようにテキストデータの他、動画や音声についてもリアルタイム通信できるプロトコルです。また、サーバーを介して行う方式と、P2Pで接続する方式とがサポートされています。

WebRTCは動画チャットを作るのによく使われます。最近であれば、Webブラウザを使った動画チャット（ミーティング）サービスでも使われています。サーバーを経由した方が画質や音質面で安定しますが、サーバーが必要です（当たり前ですが）。P2Pの場合は接続されるクライアント数に応じてコネクションが増えてしまう難点がありますが、中央サーバーなしで動画チャットを行えるのがメリットです。

WebRTC

WebTransport

WebSocketやWebRTCの次世代プロトコルとして注目されている（現在策定の進められている）のがWebTransportです。WebTransportはTCPではなく双方向UDP通信を目指しています。つまりサーバーからクライアントへのメッセージ到達順序や、そもそも到達を保障しない仕組みです。しかし、それだけにシンプルに実装できます。

WebTransportはHTTP/3を用いており、WebRTCのように特別な仕組みは使いません。その点においてシンプルなプロトコルです。まだ一部（Chromeなど）のブラウザでしか動作しませんので注意してください。

WebTransport

Push API

ブラウザでプッシュ通知を可能にするAPIです。仕組みとしては、プッシュ通知を許可したクライアントはデバイストークンを含んだURLを生成します。そのURLは各ブラウザベンダーによって提供されます。そのURLに対してリクエストを実行すると、ブラウザのWeb Workerが実行されるので、Web Worker内でプッシュ通知を表示するAPIを実行します。ブラウザとプッシュ通知のサーバーが通信しているプロトコルは不明です。

プッシュ通知を使うことで、Webサイトを訪れていないユーザーに対して通知を送信できます。現在Chrome系のみですが、2022年秋にはSafari（macOS）に、2023年にはiOSでもWeb Push APIが実現する予定です。

Push API – Web API | MDN

Web USB API

こちらもまだChrome系のブラウザのみ実装されています。WebUSB APIはその名の通り、ブラウザからPCに接続されているUSBデバイスを操作するAPIです。

ここでいうUSBデバイスはUSBドライブのようなものではなく、Arduinoなどのマイコンデバイスとの読み書きを行う仕組みになります。

USB – Web APIs | MDN

Web Bluetooth API

ブラウザからBluetoothデバイスにアクセスするAPIです。ペアリングし、Bluetoothデバイスからデータを読み書きします。ビーコンなどの電波を受信したり、IoT系のBluetoothデバイス（センサーなど）からデータを受信したりできます。

Web Bluetooth APIもまた、Chrome系ブラウザのみが対応しています。

Web Bluetooth API – Web APIs | MDN

Web NFC API

SuicaやPASMOなどのNFCに対応したカードから情報を読み取れるAPIです。Chrome系の中でもAndroidだけが対応しています。アプリレベルであればiPhoneでもNFCに対応していますが、Androidはブラウザでも扱えます。

ウェブ NFC API – Web API | MDN

iPhoneでの実現可能性は？

AppleはWeb USB API、Web Bluetooth API、Web NFC APIなどはプライバシー上の懸念があるとして実装を拒否しています。

Appleがプライバシ上の理由から、NFC、Bluetooth、他14のWeb APIの実装を拒否

昔のプロトコル

FTP/FTPSはGoogle Chrome 88で完全に利用できなくなっています。Chromium系ブラウザでサポートされなくなると、殆どのWebブラウザで使えない状態なので、利用しない方が良いでしょう。

まとめ

今回紹介したプロトコル、APIはブラウザの可能性を大きく広げるものになるでしょう。まだ先進的なブラウザでしか使えないものが多いですが、徐々に標準化も進んでいくはずです。また、業務システムのように利用者のブラウザが限定的であれば、利用できるものもありそうです。

私たちの提供するHexabaseでは、WebSocketやSSEを使った通知・同期メッセージ機能を提供しています。重たい処理の完了を通知したり、データ更新を通知するのに使えます。ぜひお試しください。

リアルタイム通知 – Hexabase