JingtengNetworkのJingtengFE。Webフロントエンドに焦点を当てた開発チームであり、Webフロントエンドの分野で困難な問題を解決するための長年の経験を蓄積してきました。高効率、高品質、成長、自由と幸福を提唱します。
1.WebSocket
WebSocketは、ブラウザとサーバー間の全二重通信のためにHTML5によって提供されるネットワーク技術であり、アプリケーション層プロトコルに属しています。これはTCPトランスポートプロトコルに基づいており、HTTPハンドシェイクチャネルを多重化します。ブラウザとサーバーはハンドシェイクを完了するだけでよく、永続的な接続を2つの間で直接作成でき、双方向のデータ送信を実行できます。
WebSocketの登場により、半二重通信の欠点が解決されました。その最大の特徴は、サーバーがメッセージをクライアントにアクティブにプッシュできることと、クライアントがメッセージをサーバーにアクティブにプッシュできることです。
WebSocketの原則：クライアントはすべての受信者ID（受信者ID）を使用してイベントをWebSocketサーバーに通知し、サーバーは受信直後にすべてのアクティブなクライアントに通知します。IDのみが受信者IDシーケンスに含まれますサーバー内のクライアントがこのイベントを処理します。
WebSocketの機能は次のとおりです。
- 双方向通信をサポートし、よりリアルタイムに
- テキストまたはバイナリデータを送信できます」
- TCPプロトコルに基づいて構築されているため、サーバーの実装は比較的簡単です。
- データ形式は比較的軽量で、パフォーマンスオーバーヘッドは小さく、通信は効率的です。
- 同一生成元の制限はなく、クライアントは任意のサーバーと通信できます
- プロトコル識別子はws（または暗号化されている場合はwss）であり、サーバーURLはURLです。
- HTTPプロトコルとの互換性が良好です。また、ハンドシェイクフェーズではHTTPプロトコルが採用されているため、ハンドシェイク中にシールドするのは簡単ではなく、さまざまなHTTPプロキシサーバーを通過できます。
VueでのWebsocketの使用法は次のとおりです。
<template>
<div>
<button @click="send">发消息</button>
</div>
</template>
<script>
export default {
data () {
return {
path:"ws://localhost:8080/test/websocket",
socket:""
}
},
mounted () {
// 初始化
this.init()
},
methods: {
init: function () {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
// 实例化socket
this.socket = new WebSocket(this.path)
// 监听socket连接
this.socket.onopen = this.open
// 监听socket错误信息
this.socket.onerror = this.error
// 监听socket消息
this.socket.onmessage = this.getMessage
}
},
open: function () {
console.log("socket连接成功")
},
error: function () {
console.log("连接错误")
},
getMessage: function (msg) {
console.log(msg.data)
},
send: function () {
this.socket.send(params)
},
close: function () {
console.log("socket已经关闭")
}
},
destroyed () {
// 销毁监听
this.socket.onclose = this.close
}
}
</script>
<style>
</style>
2.インスタントメッセージングの実装：短いポーリング、長いポーリング、SSE、およびWebSocketの違いは？
短いポーリングと長いポーリングの目的は、クライアントとサーバー間の即時通信を実現することです。
ショートポーリングの基本的な考え方：ブラウザは定期的にhttpリクエストをブラウザに送信し、サーバーはデータの更新があるかどうかに関係なく、リクエストを受信した直後に応答します。このように実装されたインスタント通信は、基本的にブラウザがリクエストを送信し、サーバーがリクエストを受け入れるプロセスです。クライアントが継続的なリクエストを行えるようにすることで、クライアントはサーバー側のデータの変更をリアルタイムでシミュレートして受信できます。 。この方法の利点は、比較的単純で理解しやすいことです。欠点は、この方法ではhttp接続を継続的に確立する必要があるため、サーバー側とクライアント側のリソースが大幅に浪費されることです。ユーザー数が増えるとサーバー側へのプレッシャーが増し、非常に無理です。
ロングポーリングの基本的な考え方：最初に、クライアントはサーバーへのリクエストを開始します。サーバーがクライアントからリクエストを受信すると、サーバーは直接応答しませんが、最初にリクエストを一時停止してから、サーバー。アップデートはありますか。更新がある場合は応答し、データがない場合は一定の制限時間後に戻ります。サーバーから返された情報を処理した後、クライアント側のJavaScript応答処理関数は要求を再度送信し、接続を再確立します。短いポーリングと比較して、長いポーリングには、不要なhttp要求の数を大幅に減らすという利点があり、比較するとリソースを節約できます。長いポーリングの欠点は、接続がハングするとリソースが無駄になる可能性があることです。
SSEの基本的な考え方：サーバーはストリーミング情報を使用して情報をサーバーにプッシュします。厳密に言えば、httpプロトコルでは、サーバーが積極的に情報をプッシュすることはできません。ただし、サーバーがクライアントに次に送信するのはストリーム情報であると宣言する回避策があります。つまり、送信されるのは1回限りのパケットではなく、継続的に送信されるデータのストリームです。このとき、クライアントは接続を閉じず、サーバーから送信される新しいデータストリームを常に待機します。ビデオの再生はそのような例です。SSEはこのメカニズムを使用して、ストリーミング情報を使用して情報をブラウザーにプッシュします。これはhttpプロトコルに基づいており、現在IE/Edgeを除く他のブラウザーでサポートされています。前の2つの方法と比較すると、あまり多くのhttpリクエストを作成する必要がないため、リソースを節約できます。
WebSocketは、HTML5で定義された新しいプロトコルです。従来のhttpプロトコルとは異なり、このプロトコルを使用すると、サーバーはクライアントに情報を積極的にプッシュできます。WebSocketプロトコルを使用することの欠点は、サーバー側の構成がより複雑になることです。WebSocketは全二重プロトコルです。つまり、通信の両側が等しく、相互にメッセージを送信できますが、SSE方式は一方向通信であり、サーバーのみがクライアントに情報をプッシュできます。クライアントの場合情報を送信する必要があります、それは次のhttpリクエストに属します。
上記の4つの通信プロトコル、最初の3つはHTTPプロトコルに基づいています。
これらの4つの通信プロトコルの場合、パフォーマンスの観点から：WebSocket>長い接続（SEE）>長いポーリング>短いポーリングただし、ブラウザーの互換性を考慮すると、順序は正反対です。短いポーリング>長いポーリング> Long Connection（SEE）> WebSocketしたがって、特定の使用シナリオに従って、使用する方法を判断する必要があります。