Clever Geek Handbook

単純なExpressAPIでWebsocketを使用するにはどうすればよいですか？

テクノロジーの簡単な説明



Websocketは、TCP接続を介した通信プロトコルであり、ブラウザーとWebサーバー間でリアルタイムにメッセージを交換するように設計されています。



クライアントとサーバーは、HTTPと同様のプロトコルを使用してWebSocket接続を確立します。クライアントは、サーバーが特定の方法で応答する特別なHTTP要求を行います。



備考



新しい要求と応答はHTTPの要求と応答に「類似」していますが、そうではありません。たとえば、リクエストには本文がありますが、ヘッダーに「Content-Length」フィールドがありません（これはHTTP規則に違反します）。これについて詳しくは、Wikipediaをご覧ください。



このテクノロジーの主な利点の1つは、そのシンプルさです。クライアントとサーバーで処理するイベントは4つだけです。



  1. 接続
  2. エラー
  3. メッセージ
  4. 閉じる


なぜWebsocketなのか？



wsに加えて、継続的なデータ送信には、サーバー送信イベント（SSE）とロングポーリングの2つの方法があります。



サーバーとクライアント間の継続的な通信のメカニズムを比較し、Webソケットを使用する価値がある（または使用しない）理由について結論を導きましょう。



Webソケット sse 長いプーリング
プロトコル websocket（ws、またはwss） HTTP（S） HTTP（S）
速度 高い 低 低
データストリームの方向性 双方向 一方向 双方向
さらに バイナリデータの転送、

一部の古いブラウザはサポートされていません		 接続が切断された場合の自動再接続


wsテクノロジーの主な利点の1つは、データ転送速度です。SSEとLPはHTTP（S）プロトコルを使用し、次のように機能します。



  1. 変更をリクエストする。
  2. サーバーに変更が表示された場合、サーバーはそれらを送信します。
  3. , .


:



  1. .
  2. , HTTP(S).
  3. , .


api.



const http = require("http");
const express = require( "express");
const WebSocket = require( "ws");

const app = express();

const server = http.createServer(app);

const webSocketServer = new WebSocket.Server({ server });

webSocketServer.on('connection', ws => {
   ws.on('message', m => {
webSocketServer.clients.forEach(client => client.send(m));
   });

   ws.on("error", e => ws.send(e));

   ws.send('Hi there, I am a WebSocket server');
});

server.listen(8999, () => console.log("Server started"))


何が起きてる？



wsをサポートするサーバーを作成するには、通常のhttpサーバーを作成し、Webソケットを作成するときにサーバーをそれにバインドします。



「オン」機能は、Webソケットイベントの管理に役立ちます。最も注目すべきイベントはメッセージイベントなので、詳しく見ていきましょう。



ここで、関数はパラメーターm（メッセージ、つまりユーザーが送信したもの）を受け取ります。したがって、クライアントから文字列を送信して、サーバーで処理できます。この場合、サーバーはこのメッセージをWebソケットサーバーに接続しているすべての人に転送するだけです。 webSocketServerオブジェクトのclients配列には、サーバーへのすべての接続が含まれています。 wsオブジェクトは、一度に1つの接続のみを格納します。



コメント



実際のアプリケーションでは、このアプローチを使用しないでください。このようにapiを説明すると、サーバーは1つの要求を別の要求と区別できません。WebソケットベースのAPIを構築する方法については、後で説明します。



クライアント上のサーバーとの対話は次のようになります。 



export const wsConnection = new WebSocket("ws://localhost:8999");
wsConnection.onopen = function() {
    alert(" .");
};

wsConnection.onclose = function(event) {
    if (event.wasClean) {
        alert('  ');
    } else {
        alert(' '); // , ""  
    }
    alert(': ' + event.code + ' : ' + event.reason);
};

wsConnection.onerror = function(error) {
    alert(" " + error.message);
};

export const wsSend = function(data) {
// readyState - true,   
    if(!wsConnection.readyState){
        setTimeout(function (){
            wsSend(data);
        },100);
    } else {
        wsConnection.send(data);
    }
};


WebソケットベースのAPI



リクエストが異なるURLに分散されるRESTAPIとは異なり、WebsocketAPIには1つのURLしかありません。Webソケットに基づいて本格的なAPIを構築するには、ある要求を別の要求と区別するようにシステムに教える必要があります。これは次のように実装できます



。1）クライアントから、json文字列の形式で要求を送信し、サーバー上で解析します。 



const sendMessage = (message) => conn.send(JSON.stringify({ event: "chat-message", payload: { userName, message }}));


2）サーバー上で、文字列を解析し、イベントフィールド（リクエストのタイプ）を選択します。タイプごとに対応する答えを書き留めましょう。 



const dispatchEvent = (message, ws) => {
   const json = JSON.parse(message);
   switch (json.event) {
       case "chat-message": webSocketServer.clients.forEach(client => client.send(message));
       default: ws.send((new Error("Wrong query")).message);
   }
}


したがって、サーバーにさまざまな要求を送信し、要求に応じて応答を処理できます。



結論



APIを作成するタスクが与えられ、顧客が古いブラウザのサポートに興味がないことがわかった場合は、WebSocketベースのAPIが最適です。便宜上、リンクにクライアントとサーバーの部分のコードを用意しました。


More articles:


All Articles