WebSocketプロトコル(WS)は、ブラウザとサーバーの間で持続的な接続を介してデータを交換する機能を提供します。データは、接続を切断したり、HTTPリクエストを追加したりすることなく、「パケット」の形で双方向にそれを介して送信されます。

WebSocketは、チャットルーム、オンラインゲーム、リアルタイムマーケットプレイスなどの常時通信サービスに向いています。

例として、簡単なチャットのバックエンドを作成してみましょう。基本的な機能を提供することが必要です。

  1. チャットへのメッセージの送信
  2. メッセージの作成者を決定する。
  3. アクションの通知。例えば、新しいメンバーがチャットに参加した、チャットから退出した、タイピングインジケータ(誰かがタイピングしている...)など。

データベースモデル

データベースのモデルを作成することから始めましょう。最初はメッセージや通信の履歴をデータベースに保存する予定がなくても、メッセージや通知の送信を構造化するためのモデルが必要です。

一般的な chat_eventを含むモデルを作成しましょう。

  1. ユーザーとの関係。どのメッセージも、どのユーザーを参照しているかという情報を含んでいます。
  2. Type (enum)4つの可能な選択肢を持つフィールド。 ConnectedDisconnected- ユーザが接続されたときや切断されたときの通知に使用します。 Typing- は、ユーザーが現在新しいメッセージを書いているという情報を伝えるために使用します。 Message- 標準的なテキスト・メッセージの場合。
  3. Message (text)- メッセージのテキスト


エンドポイントの設定

次の開発ステップは、アプリケーションの他の機能に共通する標準的なアプローチとは少し異なります。通常、ビジネスプロセスが作成され、それを実行するためにエンドポイントが構成されます。WebSocket の場合、すべてが異なる方法で行われ、出発点は、ビジネスプロセスがさらに作成されるトリガーに基づくエンドポイントの作成です。

エンドポイントセクションが必要です。そこで、適切なオプションを選択して、新しいエンドポイントを作成します。 WebSocket Endpoint.


WebSocketの場合、リクエストメソッドの選択肢はありません - 常に GET.シンプルな URL を指定してみましょう。 /chat/を指定し、同じ名前でそのためのグループを作成します。

次に、WebSocket 内でのデータ交換形式を決定するための変数を作成する必要があります。

  • Client-to-Server.標準的なビジネスプロセスの受信パラメータに似ています。この例では、単純なテキスト変数メッセージを作成します (サーバーに通常のテキスト メッセージを送信します)。
  • Server-to-Client.ここでは、サーバーからユーザーへデータを送信する、サーバーメッセージ用の変数が作成されています。これは、ユーザーのリクエストに対するレスポンスとは違うことに注意してください。また、ユーザーのアクションに対する反応として送られることもありますが、何らかの外部イベントによって引き起こされることの方が多いのです。この例では、サーバーはチャット内のすべてのイベントの通知を送信するので、変数に chat_eventモデルを変数として設定します。


変数を作成したら、本題である WebSocket のロジックの作成に進みます。これは、WebSocket で新しいメッセージを受信したとき、および接続が確立または切断されたときに起動するトリガーに基づきます。


ビジネス プロセスを作成する

を使用し、そのためのビジネス プロセスを作成してみましょう。 connectトリガーを使用して、そのためのビジネス プロセスを作成してみましょう。これは、ユーザがWebSocketとの接続を確立した瞬間に起動され、そのタスクは、接続されているすべてのユーザにこれに関する通知を送信することです。

開始ブロックは2つのパラメータを含むことに注意してください。 User IDConnection ID.このように、接続を確立したユーザーを即座に判断できるだけでなく、この接続に一意の識別子を取得することができます。将来的には、この識別子を使用して、たとえば標的型メッセージを送信したり、接続を強制的に終了したりすることができます。

ビジネスプロセスに必要なすべてのステップを作成します。

  1. Make User.開始パラメータ User IDを使用して、ユーザー・モデルを作成します。
  2. Make chat_event.イベント通知モデルを作成します。前のステップで作成したモデルを使ってユーザーに接続し、またイベントの種類を選択し、セットします。 Type = Connected.この場合、送信されるのはメッセージではなく、接続通知なので、messageパラメータは使用しません。
  3. WSS Connections /chat/.このブロックを使用すると、すべてのアクティブな WebSocket 接続のリストを取得できます。
  4. For Each Loop.connections 配列をループパラメータとして使用し、接続されている各ユーザーに通知を送信しています。
  5. Expand WebSocket Connection.接続情報を展開し Connection ID.
  6. WSS Send /chat/.を使用しています。 Connection IDと生成された chat_eventを使用して通知を送信します。


Postman を使って WebSocket をテストする

この段階では、WebSocket は重要な機能を持っていないものの、すでに動作可能であり、実際にテストすることができます。これを行うには、WebSocketを扱うことができる任意のツールを使用することができます。を例にして、その方法について見てみましょう。 Postmanを例にして、その方法を見てみましょう。

をクリックする必要があります。 New buttonを選択し WebSocket Request


WebSocket の URL を指定する必要があります。これは、WebSocketが残りのエンドポイントと一緒にリスト内にあるSwaggerを使用して見つけることができます。


標準のリクエストとは異なり、WebSocket は wssプロトコルを使用して動作するため httpswss.その結果、次のような URL になるはずです: wss://qvlxglh-app.apms.io/api/chat/.

次に、匿名での接続ができないため、リクエストに認証トークンを追加する必要があります。匿名では接続できないので、リクエストに認証トークンを追加する必要があります。 Authorizationヘッダを作成する必要があります。 Bearer lBCiunRWg6BfogDrLml4jrC4iJiWucKo.lBCiunRWg6BfogDrLml4jrC4iJiWucKo の代わりに、認証の結果として得られるあなた自身のトークンを挿入する必要があります (POST /auth/エンドポイント)の結果として取得できます。


すべてが正しく行われたなら、ボタン Connectボタンをクリックすると、接続が確立され、先に作成した送信用のビジネスプロセスであるサーバー側から最初のメッセージが受信されます。


同時に、サーバーからのメッセージの受信は、こちらからの何らかの要求に対する反応としてだけ発生するのではないことを確認することができます。他のユーザーのアクションによって発生することもあるのです。これをテストするために、他のユーザーの認証トークンを使って別のタブで接続を確立することができます。このことを知らせるサーバーからのメッセージは、接続が有効になっているすべてのタブに送信されます。

メッセージングのビジネス・プロセス

さて、WebSocket の機能をさらに発展させ、メッセージングのビジネス プロセスを作成することができます。ところで、メッセージを送信することはできますが、最初にロジックを作成しなければ、メッセージは何の反応も引き起こさないので意味がありません。そこで、エンドポイント設定に戻り、トリガー用のビジネスプロセスを作成しましょう。 receiveトリガーのビジネスプロセスを作成します。

多くの点で、前のビジネスプロセスと同じになります。メッセージが受信されると、"Message "を生成し、それに関する通知をすべてのユーザに送信する必要があります。 chat_eventを生成し、すべてのチャット参加者にそれに関する通知を送信する必要があります。違いは、メッセージ自体をchat_event に追加する必要があることと、メッセージの作成者がメーリングリストに含まれる必要がないことです。

ビジネスプロセスの最初の部分では、同じブロックが使用されます。の中では Make chat_eventブロックでは、設定する必要があります。 type = messageを設定し、開始ブロックからメッセージ自体を添付します。


ループの中では、チェックする必要があります (Equalブロック)で、受信者の接続IDが送信者の接続IDと一致しない場合のみ、メッセージを送信する(If-Else = False).


結果を公開し、テストを開始することができます。なお、メッセージそのものは JSON形式なので、message変数を使用すると、このように表示されることに注意してください。

{"message":"Some text here"}

この例では、チャット接続通知を受け取り、自分のメッセージを送信し (Hi!) を送信し、応答 (Glad to see you!)


これで、WebSocket を使用したチャットの基本的なバックエンドの作成は完了です。フロントエンドの構築を開始し、あなた自身のリアルタイムメッセージングアプリを開発することができます。

Was this article helpful?

AppMaster.io 101 クラッシュコース

10 モジュール
2 週

何から始めればいいのかわからない?初心者のためのクラッシュコースで、AppMasterを隅から隅まで見ていきましょう。

コース開始
Development it’s so easy with AppMaster!

もっと助けが必要ですか?

私たちの専門家の助けを借りて問題を解決します。時間を節約し、アプリケーションの構築に集中してください。

headphones

サポート問い合わせ先

問題について教えてください。解決策を見つけます。

message

コミュニティチャット

チャットで他のユーザーと質問について話し合います。

コミュニティに参加する