ネットワーク リクエスト + Node.js ベースの WebSocket

 

目次

序文

ネットワーク アクセス構成

1. 構成プロセス

予防

利用制限

ネットワーク リクエスト詳細 API

wx.request リクエストデータ API

編集

wx.uploadFile ファイルアップロード API

wx.downloadFile ファイル ダウンロード API

WebSocket セッション API

Node.js ベースの WebSocket

WebSocket 接続では全二重通信を実現できるのに、HTTP 接続では実現できないのはなぜですか?

現在、WebSocket をサポートしている主流のブラウザーは次のとおりです。

 WebSocket の簡単な紹介


序文

アプレットがページを動的にレンダリングする場合、バックグラウンド サーバー インターフェイスからデータを取得する必要があり、ページまたはビジネス ロジック レイヤーにデータを直接書き込むことはできません。このようなデータは静的です. 動的データは、インターフェイスを呼び出してネットワーク要求を開始し、API を介してデータを返し、ページを表示する効果を得るためにページビューにレンダリングすることによって取得する必要があります.

ネットワーク アクセス構成

 

アプレットがネットワーク リクエストを開始する前に、WeChat パブリック プラットフォームのドメイン名の構成にアクセスする必要があります。アプレットは、通常の HTTPS リクエスト (wx.request)、アップロード ファイル (wx.uploadFile)、ダウンロード ファイル (wx.downloadFile)、および WebSocket 通信 (wx.connectSocket) のドメイン名を含む、設定されたドメイン名へのアクセスのみを許可します!

        注: ベース ライブラリ 2.4.0 以降、ネットワーク リクエストは LAN IP との通信を許可しますが、ネイティブ IP との通信を許可しないように注意してください。基本ライブラリ 2.7.0 以降、アプレットは UDP 通信 (wx.createUDPSocket) を提供します。これは、同じローカル エリア ネットワーク内の非ネイティブ IP との通信のみを許可します。

1. 構成プロセス

 

WeChat パブリック プラットフォームのホームページにログインし、ミニ プログラムのバックエンドにある [開発] > [開発設定] > [サーバー ドメイン名] で構成します (登録済みの WeChat でコードをスキャンして確認する必要があります)。身元)

 ドメイン名が直接アクセス用に構成されていない場合、システムはエラー メッセージを表示します。

予防

1. ドメイン名は、https (wx.reauest、wx.uplosdFile、wx.downloadFile) および wss (wx.connect-Socket) プロトコルのみをサポートします。

2. ドメイン名に IP アドレス (アプレットのローカル エリア ネットワーク IP を除く) または localhost を使用することはできません。

3. https://xxxxx.com:xxxx のようにポートを設定できますが、設定後は https://xxxxx.com:xxxx へのリクエストしか開始できません。 /xxxxx.com、https://xxxxx .com:yyyy などの URL は、リクエストの送信に失敗します。

4. https://xxxxx.com のようにポートが構成されていない場合、リクエストが https://xxxxx.com に送信される場合、デフォルトの 443 ポートであっても、リクエストされた URL にポートを含めることはできません。 443、失敗します。

5. ドメイン名は ICP ファイリングを通過する必要があります。

6. セキュリティ上の理由から、api.weixin.qq.com をサーバー ドメイン名で構成することはできず、関連する API をアプレット内で呼び出すことはできません。開発者は AppSecret をバックグラウンド サーバーに保存し、getAccessToken インターフェイスを使用してサーバー経由で access_token を取得し、関連する API を呼び出す必要があります。

7. インターフェースごとに、それぞれ最大 20 個のドメイン名を設定できます。

8. ネットワーク リクエストのデフォルトのタイムアウト時間と最大タイムアウト時間は 60 秒です.タイムアウト時間は、app.json ファイルまたは game.json ファイルの networktimeout で設定できます.

利用制限

 

ネットワーク アクセスには、ネットワーク リクエストの設定、同時実行制限の設定、タイムアウトの設定、エンコードの設定、その他の使用制限など、使用制限もあります。

1. ネットワークリクエストのリクエスト元リファラーヘッダーが設定できない。形式は https://servicewechat.com/{appid}/{version}/page-frame.html に固定されています。{appid} はアプレットの appid、{version} はアプレットのバージョン番号です。バージョン番号は 0 開発版、試用版、監査版を示し、バージョン番号は開発者ツールである devtools、残りは正式なバージョン番号です。

2. wx.reauest、wx.uploadFile、および wx.downloadFile の最大同時制限は 10 です。

3. wx.connectSockt の最大同時制限は 5 です。

4. アプレットがバックグラウンドで実行された後、ネットワーク リクエストが 5 秒以内に終了しない場合、fail interrupted というエラー メッセージがコールバックされ、フォアグラウンドに戻る前に、ネットワーク リクエスト インターフェイスを呼び出すことができなくなります。

5. サーバーの戻り値には UTF-8 エンコーディングを使用することをお勧めします。非 UTF-8 エンコーディングの場合、アプレットは変換を試みますが、変換に失敗する場合があります。

6. アプレットは BOM ヘッダーを自動的にフィルタリングします (1 つの BOM ヘッダーのみがフィルタリングされます)。

7. サーバーからの戻り値が正常に受信されている限り、戻りステータス コード (statusCode) が何であれ、成功 (success) コールバックに入ります。ここでは、独自のビジネス ロジックに従って戻り値を判断できます。

ネットワーク リクエスト詳細 API

 

wx.request リクエストデータ API

 

wx.request は、サーバー データを要求するために使用される API で、HTTPS 要求を開始してバックエンド サーバー インターフェイスからデータを取得します。wx.request(Object object) には Object オブジェクト パラメータがあります。

wx.request リクエストが開始されると、システムは次の 3 つのメソッドを提供する RequestTask オブジェクトも作成します。

1.RequestTask.abort() 割り込み要求タスク。

2.RequestTask.onHeaderReceived(関数コールバック) は、HTTP 応答ヘッダー イベントをリッスンします。

3.RequestTask.offHeaderReceived(function callback) は、HTTP 応答ヘッダー イベントのリッスンをキャンセルします

コードを実装する例として https://www.toutiao.com を使用しました。

// pages/index/index.js
Page({

onLoad:function(){
  var requestTask = wx.request({
    url: 'https://www.toutiao.com',
    data:{
      provinceld:'1'
    },
    method:'GET',
    success:function(res){
      console.log(res)
    },
    fail:function(err){

    },
    complete:function(){

    }
  });
  //监听HTTP Response Header事件
  requestTask.onHeadersReceived(function(res){
    console.log("-----------监听HTTP Response Header事件----------");
    console.log(res)
  })
  //取消监听HTTP Response Header事件
  requestTask.offHeadersReceived(function(res){
    console.log("------------取消HTTP Response Header事件----------");
    // console.log(res)
  })
  
},

})

リクエスト成功後にサーバーに送信されるデータは文字列型で、受信データが dstring 型でない場合は文字列型に変換されます変換規則は以下の通りです。

1. header['Content-Type'] が 'Application/json' のデータは JSON シリアライズされます。

2. ヘッダー['Content-Type'] が 'Application/x-www-form-urlencoded' であるデータの場合、データはクエリ文字列 (encodeURlComponent(k)=encodeURlComponent(v)&encodeURIComponent(k)=) に変換されます。 encodeURIComponent( v)...)。

wx.uploadFile ファイルアップロード API

 

wx.uploadFile API は、ローカル リソースをサーバーにアップロードできます。クライアントが HTTPS POST 要求を開始します。

wx.uploadFile リクエストが開始されると、システムは次の 5 つのメソッドを提供する UploadTask オブジェクトも作成します。

1.UploadTask.abort() 割り込み要求タスク。

2.UploadTask.onHeadersReceived(関数コールバック) は、HTTP 応答ヘッダー イベントをリッスンします。

3.UploadTask.offHeadersReceived(関数コールバック) は、HTTP 応答ヘッダー イベントのリッスンをキャンセルします。

4.UploadTask.onProgressUpdate(関数コールバック) は、アップロード進行状況変更イベントを監視します。

5.UploadTask.offProgressUpdate(関数コールバック)は、アップロード進行状況変更イベントの監視をキャンセルします。

uploadTask は wx.uploadFile によって作成されたオブジェクトです。uploadTask.abort() を使用して、リクエスト タスクを中断し、大気中のネットワーク リクエストを停止できます。uploadTask.onHeaderReceived(function callback) を使用して、HTTP レスポンス ヘッダー イベントをリッスンします。リクエスト完了イベントより前に完了; uploadTask.offHeaderReceived(関数コールバック) は HTTP 応答ヘッダー イベントの監視をキャンセルします; uploadTask.onProgressUpdate(関数コールバック) を使用してアップロード進行状況変更イベントを監視します; uploadTask.offProgressUpdate(関数コールバック) を使用して監視をキャンセルします進行状況変更イベントをアップロードします。

wx.downloadFile ファイル ダウンロード API

 

wx.uploadFile はファイルをアップロードするための API であり、wx.downloadFile はファイルをダウンロードするための API です. これらは正反対です. wx.downloadFile は、クライアントによって直接開始される HTTPS GET リクエストであり、サーバーから取得したデータは、ファイルのローカル一時パス、word ダウンロードできる最大ファイル サイズは 50MB で、アプレット クライアントにローカルにダウンロードされます。

DownloadTask オブジェクト wx.downloadFile によって作成されたオブジェクトで、ダウンロードの進行状況の変更イベントを監視し、ダウンロード タスク オブジェクトをキャンセルできます. DownloadTask オブジェクトは次のメソッドを提供します:

1.DownloadTask.abort() ターミナル ダウンロード タスク。

2.DownloadTask.onProgressUpdate(関数コールバック) は、ダウンロード進行状況の変更イベントを監視します。

3.DownloadTask.offProgressUpdate(関数コールバック)は、ダウンロード進行状況変更イベントの監視をキャンセルします。

4.DownloadTask.onHeadersReceived(関数コールバック) は、HTTP 応答ヘッダー イベントをリッスンします。これは、要求完了イベントよりも前になります。

5.ダウンロードタスク。offHeadersReceived(function callback) は、HTTP 応答ヘッダー イベントのリッスンをキャンセルします。

 

最初に実行するのはDownloadTask.onHeadersReceived(function callback)で、リクエスト監視イベントよりも前に実行されるHTTP Response Header イベントをリッスンし、次に実行するのはDownloadTask.onProgressUpdate(function callback) でダウンロードをリッスンします。ダウンロードが完了するまで変更イベントを進行させ、最後にファイルが返されます一時パスに従って、ファイルをレンダリングしたり、ビューにレンダリングしたり、モバイル クライアントにダウンロードしたりできます。

WebSocket セッション API

 

WebSocket は、実際にはマルチパーティ通信インターフェイスです. アプレットがサービス プロバイダーにデプロイされると、WebSocket により、複数の携帯電話がバックグラウンド サーバーにアクセスして通信を確立できます!

 

WebSocket セッション API を使用してセッション接続を作成します. セッション接続が作成されると、WeChat チャットや QQ チャットと同様に、互いに通信できます. 彼は次の 7 つの方法を使用します。

1.wx.connectSocket(OBJECT) はセッション リンクを作成します。

2.wx.onSocketOpen(CALLBACK) は、WebSocket 接続のオープン イベントを監視します。

3.wx.onSocketError(CALLBACK) は WebSocket エラーを監視します。

4.wx.sendSocketMessage(OBJECT) はデータを送信します。

5.wx.onSocketMessage(CALLBACK) は、WebSocket がサーバーのメッセージ イベントを受信するのをリッスンします。

6.wx.closeSocket() は WebSocket 接続を閉じます。

7.wx.onSocketClose(CALLBACK) は、WebSocket のクローズをリッスンします。

注: WeChat アプレットは、同時に 1 つの WebSocket 接続しか持つことができません.作成時に WebSocket 接続が既に存在する場合、接続は自動的に閉じられ、WebSocket 接続が再作成されます.

Node.js ベースの WebSocket

 

WebSocketはバックグラウンドプログラムの連携が必要で、バックグラウンドプログラムはTomcat配下のJavaプログラムかNode.jsプログラム、簡単に言えばNode.jsはサーバーサイドで動くJavaScriptです。Node.js は、Chrome JavaScript ランタイムに基づくプラットフォームです。イベント駆動型の I/O サーバー側 JavaScript 環境です。Google の V8 エンジンに基づいています。V8 エンジンは JavaScript を非常に高速に実行するため、そのパフォーマンスは非常に優れています。 !

WebSocket は HTML5 の新しいプロトコルです。その目的は、ブラウザとサーバーの間に無制限の双方向通信チャネルを確立することです。たとえば、サーバーはいつでもブラウザにメッセージを送信できます。いずれかの当事者が率先して相手にメッセージを送信できます。

HTTP プロトコルは、要求と応答のプロトコルです。サーバーが要求に応答し、データをブラウザーに送信する前に、ブラウザーからサーバーに要求を送信する必要があります。つまり、ブラウザがアクティブに要求しない場合、サーバーはブラウザにデータをアクティブに送信できません。

WebSocket は新しいプロトコルではありませんが、HTTP プロトコルを使用して接続を確立します。WebSocket 接続がどのように作成されるかを見てみましょう。

このリクエストは、いくつかの点で通常の HTTP リクエストとは異なります。

  1. GET リクエストのアドレスは似ていません/path/ws://、アドレスは ; で始まります。
  2. ヘッダーUpgrade: websocketを 要求Connection: Upgradeし、この接続が WebSocket 接続に変換されることを示します。
  3. Sec-WebSocket-Keyデータを暗号化するためではなく、この接続を識別するために使用されます。
  4. Sec-WebSocket-VersionWebSocket のプロトコル バージョンを指定します。

WebSocket 接続では全二重通信を実現できるのに、HTTP 接続では実現できないのはなぜですか?

 

実際、HTTP プロトコルは TCP プロトコルの上に構築されており、TCP プロトコル自体は全二重通信を実現しますが、HTTP プロトコルの要求応答メカニズムは全二重通信を制限します。WebSocket 接続が確立された後は、実際には単なる単純なルールです。次に、通信に HTTP プロトコルを使用せず、データを直接相互に送信します。

安全な WebSocket 接続メカニズムは、HTTPS に似ています。

まず、ブラウザwss://xxxが WebSocket 接続を作成すると、最初に HTTPS を介して安全な接続が作成されます. 次に、HTTPS 接続が WebSocket 接続にアップグレードされ、基礎となる通信は引き続き安全な SSL/TLS プロトコルです.

当然のことながら、WebSocket 通信をサポートするには、ブラウザがこのプロトコルをサポートしている必要があります。これによりws://xxx、リクエストを発行できるようになります。

現在、WebSocket をサポートしている主流のブラウザーは次のとおりです。

  • クロム

  • ファイアフォックス
  • IE >= 10
  • お金 >= 6
  • アンドロイド >= 4.4
  • iOS >= 8

 

 WebSocket の簡単な紹介

WebSocket はプロトコルであるため、サーバーがそれを実装する方法は、使用するプログラミング言語とフレームワーク自体によって異なります。Node.js がサポートするプロトコルには、TCP プロトコルと HTTP プロトコルがありますが、WebSocket プロトコルをサポートするには、Node.js が提供する HTTPServer の追加開発が必要です。Node.js に基づく安定した信頼性の高い WebSocket 実装が既にいくつかあります。それらを npm で直接インストールして使用できます。

其实wsモジュールには、サーバー側とクライアント側の両方が含まれます。これはクライアントを意味wsし、実際には、WebSocketServer がイベントに応答するときにコールバック関数によって渡される変数の型です。WebSocketconnectionws

おすすめ

転載: blog.csdn.net/lbcyllqj/article/details/127467041