クライアントからサーバーへ、またはその逆方向のデータ転送には、さまざまなプロトコルが使用されます。それらのルールは、関連する標準に記載されています。この記事では、データ転送プロトコルの 1 つである WebSocket について説明します。

WebSocket プロトコルとは何ですか

WebSocket は、クライアントとサーバー(ブラウザとサーバー)間に接続を作成し、リアルタイムで両者間のコミュニケーションを可能にする先進的な技術です。WebSocketとの主な違いは、たとえばHTTPで起こるような個別のリクエストを送信することなく、データを受け取ることができる点です。接続が確立された後は、リクエストを送信する必要がなく、データが勝手にやってくるのです。チャットや株価レポートなど、常に更新される情報を受け取る必要がある場合に、WebSocketプロトコルを使用する利点です。このプロトコルは情報の受信と送信を同時に行うことができるため、全二重の双方向通信が可能で、結果として情報のやりとりが速くなります。

WebSocketの仕組み

クライアントとサーバー間の接続は、当事者の一方によって終了されるかタイムアウトで終了するまで開いたままになっています。クライアントとサーバー間の接続を確立するために、ハンドシェイクを実行するのです。確立された接続は、クライアント側またはサーバ側で接続が終了するまで開いたままで、同じチャネルを使用して通信が行われます。メッセージは双方向に交換されます。WebSocketでは、送信するデータを暗号化することができます。そのためには、WSSプロトコルの上にアドオンを使用し、送信側でデータを暗号化し、受信側でデータを復号化する。送信側で暗号化し、受信側で復号化する。暗号化しなければ、データは脅威のターゲットになります。

WebSocket を使用するのはいつか?

WebSocket プロトコルは、リアルタイムのデータ更新とクライアントへのメッセージ送信機能が必要な場合に理想的です。以下は、Web ソケットのより広範な使用例です:

  • 交換プラットフォーム;
  • ゲーム アプリケーション;
  • チャットボット;
  • プッシュ通知;
  • ソーシャル ネットワーク;
  • チャット アプリケーション;
  • IoTアプリケーションです。

WebSocket プロトコルの使用を検討する理由

WebSocket は、サーバーとクライアント間の接続を提供することにより、リアルタイムの更新を実現します。Web ソケットは HTML5 と互換性があり、古い HTML バージョンとの後方互換性を提供します。そのため、Google Chrome、Mozilla Firefox、Safari など、すべてのモダンな Web ブラウザでサポートされています。また、プラットフォーム間でも互換性があります。Android、iOS、ウェブアプリ、デスクトップアプリなど、プラットフォームを問いません。

AppMaster.io で WebSocket を作成する方法

簡単なチャットボットの例を使って、AppMaster.io で WebSocket を作成しましょう。WebSocketを作成するには、ユーザーメッセージに応答し、応答を送信するビジネスプロセスをアプリケーションバックエンドに作成する必要があります。Backend > Business Processes.


ビジネスプロセスはメッセージを受け取り、内容に応じて応答で文字列を返す。

メッセージ="Hi!"の場合は「こんにちは!」という応答、
メッセージ=「調子はどうですか」の場合は「素晴らしい!」という文字列を返すことになる。

次に、このBPがボットと通信するためのWebSocket Endpointを作成する必要があります。Backend > Endpoints > New Endpoint > WebSocket Endpoint.


新しく開いたウィンドウで次のフィールドに入力します:

  • Endpoint Type.を入力します。GET
  • Endpoint URL: エンドポイントが外部からアクセスされるアドレス;
  • Business Process: この WS Endpoint で動作する BP を示します。

エンドポイントの設定後、それを使用するアプリケーションを公開する必要があります。

エンドポイントに設定されたアプリケーションは、次のようになります。io/api/_files/tNsALU3x4tKJvNPEFpfe75/download/" title="endpoint_create_form (1).PNG" width="800" height="712" alt="" data-mce-src="https://cdn.appmaster.io/api/_files/tNsALU3x4tKJvNPEFpfe75/download/">

Postman app でWebSocketをテストすることができます。Postman の詳しい使い方は こちらを参照してください。Postmanで認証した後、新しいWebSocketリクエストを作成する必要があります。New > WebSocket Request.


フルWebSocketアドレスは入力することです。作成したEndpointに空のリクエストを送信することで、Swagger (Preview > Development) でそれを取得することができます。


これをコピーしてPostmanの該当フィールドに貼り付けたら、サーバーとの通信にはhttpsをwssと置き換える必要があるので、このプロトコルを使用する必要があります。WebSocket接続には認証が必要です。これを行うには、アクセストークン gen_app_auth_token= を含むヘッダー (Header) Cookie を持つリクエストを送る必要があります。トークンを取得するには、authorization endpoint を実行してユーザー名とパスワードを渡すことで認証する必要があります。

以下のように手動でCookieを見つけることができます:

  • ブラウザで公開されたWebアプリケーションで、F12キーを押して開発者ツールに移動します;
  • ネットワークに移動してヘッダー タブに切り替えます;
  • リクエストヘッダーセクションで、Cookieを見つけてその値をコピーします。


apms.io/api/_files/cMnC6ARCNmCxnHyhhL2EtF/download/

PostmanでWebSocketへのリクエストヘッダにクッキーの値を追加してConnectをクリックすると、WSへの接続に成功したことを確認できます。

成功時の結果は以下のようになります。


New Message ブロックでメッセージは送信できますが、JSONフォーマットで記述することが必要です。もし「Hello」という文字列を送りたいのであれば、メッセージは次のようになります。{"message":"Hi"}のようになります。この場合、キー(=メッセージ)の名前はBP入力時の変数名と一致しなければなりません。

クエリ実行結果:


以上のようにWebSocketはAppMaster.ioで作ることが出来ます。プラットフォームでの作業に関するより多くの有用な情報を、Help Center.

で確認してみてください。