以下は、chatgpt4 による sse テクノロジーの説明です。
SSE (Server-Sent Events) テクノロジーは、HTTP ベースのプッシュ テクノロジーです。永続的な HTTP 接続を通じて、サーバーはリアルタイム データをクライアントにプッシュでき、クライアントはリクエストを送信したり、受信するためにページを更新したりする必要がありません。リアルタイムデータ データを受信します。
SSE テクノロジーを使用すると、株価、天気予報、インスタント メッセージング、その他のアプリケーション シナリオなどのデータをリアルタイムで更新できます。WebSocket テクノロジーと比較すると、SSE は軽量です。これは、SSE がプッシュ機能を実現するために必要な HTTP 接続が 1 つだけであるのに対し、WebSocket は全二重 TCP 接続を確立する必要があるためです。
SSE テクノロジーを使用する場合、クライアントは JavaScript API を使用して SSE 接続を確立する必要があり、サーバーは SSE プッシュ機能を実装する必要があります。SSE は、特別な MIME タイプ text/event-stream を通じてプッシュ データを渡します。サーバーはデータをテキストにカプセル化し、特定の形式でクライアントに送信します。クライアントは、onmessage イベントを通じてサーバーから送信されたデータを監視できます。
SSE テクノロジーは Web アプリケーションだけでなく、モバイル アプリケーションでも使用できます。たとえば、プッシュ メッセージ、インスタント メッセージング、オンライン ゲームなどの機能は、SSE テクノロジを使用して実装できます。
このテクノロジの主な操作はバックエンドによって行われます。フロントエンドは追加の構成を実行する必要はありません。接続を確立して閉じ、バックエンドによってプッシュされたメッセージを受信するようにバックエンドに通知するだけで済みます。フロントエンドに必要な操作やるべきことは主に以下の通り
// 页面加载时建立链接
onMounted(() => {
createEventSource();
});
const createEventSource = () => {
if (window.EventSource) {
state.source = new EventSource(`需要替换：这里是建立连接的通知`);
state.source.addEventListener(
'open',
function () {
console.log('建立连接。。。');
},
false
);
state.source.addEventListener('message', function (e) {
console.log('收到消息', e.data);
});
state.source.addEventListener(
'error',
function (e) {
if (e.readyState === EventSource.CLOSED) {
console.log('连接关闭');
} else {
console.log(e);
}
},
false
);
} else {
console.log('你的浏览器不支持SSE');
}
};
//离开页面关闭连接
onUnmounted(() => {
if (state.source) {
state.source.close();
// 通知后端关闭连接
// 这里写通知后端关闭的接口以及需要的参数
});