この記事では、WebSocketの基本概念から始めて、ローカル共同デバッグから展開、実際の開発におけるオンラインまでのプロセスと注意事項を紹介し、WebSocketXiaobaiを最小限のコストでプロジェクトに適用できるようにします。
1.WebSocketの基本
1.WebSocketとは
WebSocketは、単一のTCP接続で全二重通信を実行できるネットワーク伝送プロトコルです。
2.httpを比較します
- どちらもアプリケーション層にあり、どちらもTCPプロトコルに依存しています
- WebSocketプロトコルは通常、ws：//またはwss：//で始まります。
- HTTPは全二重通信をサポートしていません。通常、ポーリングが使用されます
3.WebSocketの基本的な使用法
互換性：
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
簡単なデモ
クライアントは、console-network-wsの下にWebSocketメッセージを表示できます。
リクエストヘッダーのいくつかの重要なフィールドに注意してください
- リクエストアドレスはws：//またはwss：//で始まります
- 接続をアップグレードに設定する必要があります。これは、クライアントがアップグレードに接続することを望んでいることを示します。
- [アップグレード]フィールドをWebSocketに設定する必要があります。これは、WebSocketプロトコルにアップグレードすることを示します。
- サーバーがwebsocketをサポートしている場合、同じ情報が応答ヘッダーに返され、接続ステータスが101に設定されます（プロトコル切り替えが成功しました）。
2つ目は、プロジェクトでWebSockeを使用する方法です。
実際のプロジェクトを例として取り上げて、開発のプロセス全体->共同デバッグ->展開-オンラインを含む、WebSocketインターフェイスを実装する方法を示しましょう。
1.開発環境
上記のデモをカプセル化して、プロジェクトで次のように呼び出します。
Webpackプロキシを構成する
説明：
- WebSocketインターフェースはhttpインターフェースから分離する必要があります
- ドメイン名はlocation.hostを使用し、Cookieとヘッダー情報を保持するためにリバースプロキシを介して転送されます。
2.ハートビートの検出と切断後の再接続
安定した接続を確保するために、接続の中断やサーバーのタイムアウトなどを引き起こすネットワークの変動など、いくつかの異常な状態を考慮する必要があります。
ハートビート検出とは、接続を安定させるために、クライアントが定期的にハートビートメッセージをサーバーに送信することを意味します。
切断後、つまりメッセージを送信する前に再接続し、接続ステータスを確認します。接続が中断された場合は、n回接続を試みます。
パッケージは次のとおりです。
サードパーティのライブラリ処理を選択することもできます。
3.Nginx構成
WebSocketプロトコルはHTTPプロトコルとは異なりますが、WebSocketハンドシェイクはHTTPと互換性があり、HTTPアップグレード機能を使用して接続をHTTPからWebSocketにアップグレードします。
これにより、WebSocketアプリケーションを既存のインフラストラクチャに簡単に適合させることができます。
たとえば、WebSocketアプリケーションは標準のHTTPポート80および443を使用できるため、既存のファイアウォールルールを使用できます。
location /websocket {
proxy_pass http://xx.xxx.xx.xx; # websocket服务器。不用管 ws://
proxy_http_version 1.1; # http协议切换
proxy_set_header Host $host; # 保留源信息
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Upgrade $http_upgrade; # 请求协议升级，如果生产环境有报400错误，可以尝试将值设置为websocket
proxy_set_header Connection $connection_upgrade;
}3、その他
sockiet.io
sockiet.ioは、Nodeに基づくリアルタイムアプリケーションフレームワークです。ネイティブWebSocketと比較して、sockiet.ioはより一般的な機能をカプセル化し、WebSocketをサポートしないブラウザーでのポーリング通信にダウングレードできます。
利点：成熟した、箱から出してすぐに使用できる、優れた互換性。
短所：サイズが大きいため、フロントエンドとバックエンドを統合する必要があります。つまり、バックエンドでsocket.ioを使用する場合 、フロントエンドでsocket.io -clientを使用する必要があります。
著者：vivo商用大規模フロントエンドチーム