Node を使用して WebSocket プロトコルを手書きする手順を段階的に説明します。-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Node を使用して WebSocket プロトコルを手書きする手順を段階的に説明します。

青灯夜游

Feb 16, 2023 pm 02:42 PM

javascriptフロントエンドnode.js

Node を使用して WebSocket プロトコルを手書きする手順を段階的に説明します。

http は質疑応答モードであることがわかっており、クライアントは http リクエストをサーバーに送信し、サーバーは http レスポンスを返します。

このモードはリソースとデータの読み込みには十分ですが、データのプッシュが必要なシナリオには適していません。

一部の学生は、http2 にはサーバープッシュがないのではないかと言いました。

これはリソースをプッシュするためだけです:

たとえば、ブラウザーが html をリクエストした場合、サーバーは CSS を一緒にブラウザーにプッシュできます。ブラウザはそれを受け入れるかどうかを決定できます。 [推奨される関連チュートリアル: nodejs ビデオチュートリアル、プログラミング教育 ]

インスタントメッセージングなどのリアルタイム要件が高いシナリオでは、WebSocket が必要です。

厳密に言えば、WebSocket は http とは関係なく、別のプロトコル形式です。ただし、http から websockt への切り替えプロセスが必要です。

切り替えプロセスの詳細は次のとおりです:

リクエストするときにこれらのヘッダーを持ってきてください:

Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Key: Ia3dQjfWrAug/6qm7mTZOg==

最初の 2 つは簡単ですWebSocket プロトコルにアップグレードすることの意味を理解します。

3 番目のヘッダーは、セキュリティを確保するために使用されるキーです。

サーバーは次のヘッダーを返します:

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: JkE58n3uIigYDMvC+KsBbGZsp1A=

リクエストヘッダーと同様に、Sec-WebSocket-Accept は、リクエストによってもたらされた Sec-WebSocket-Key を処理した結果です。

このヘッダーの検証は、相手が WebSocket 機能を持っている必要があることを確認するために追加されます。そうでない場合、接続は確立されても相手からのメッセージがない場合、待機は無駄になります。

Sec-WebSocket-Accept を取得するには、Sec-WebSocket-Key をどのように処理すればよいでしょうか?

node を使用して実装しました。次のようになります。

const crypto = require(&#39;crypto&#39;);

function hashKey(key) {
  const sha1 = crypto.createHash(&#39;sha1&#39;);
  sha1.update(key + &#39;258EAFA5-E914-47DA-95CA-C5AB0DC85B11&#39;);
  return sha1.digest(&#39;base64&#39;);
}

つまり、クライアントから渡されたキーを使用し、固定文字列を追加し、sha1 暗号化後に次のように変換します。 Base64 の結果。

この文字列 258EAFA5-E914-47DA-95CA-C5AB0DC85B11 は修正されています。信じられない場合は、検索してください:

Web サイトを見つけてください。たとえば、 websocket の場合、Zhihu は次のようになります。

ws タイプのリクエストをフィルタリングして、これらのヘッダーが前に述べたものであるかどうかを確認します。

この Sec-WebSocket-Key は wk60yiym2FEwCAMVZE3FgQ==

であり、応答 Sec-WebSocket-Accept は XRfPnS 8xl11QWZherej/dkHPHM=

計算して見てみましょう:

それらはまったく同じですか!

WebSocketのプロトコルアップグレード時のSec-WebSocket-Keyに対応するSec-WebSocket-Acceptの計算処理です。

このステップの後、新しいプロトコルである WebSocket プロトコルに切り替えます:

メッセージ列をチェックして、テキストまたはバイナリの送信メッセージを確認します。:

まったく新しい契約ですか?では、具体的にはどのような協定なのでしょうか？

次のように:

誰もが慣れ親しんでいる http プロトコルは、本文を持つ key:value ヘッダーです:

テキストプロトコルであり、各ヘッダーはわかりやすい文字です。

これはわかりやすいですが、送信にスペースがかかりすぎます。

そして、websocket はバイナリプロトコルであり、1 バイトを使用して多くの情報を保存できます。

たとえば、プロトコルの最初のバイトには次のような情報が保存されます。 FIN（エンドマーク）、オペコード（コンテンツタイプはバイナリまたはテキスト）などの情報。

2バイト目にはマスク(暗号化の有無)とペイロード(データ長)が格納されます。

たった 2 バイトで、どれほど多くの情報が保存されますか。

これは、バイナリプロトコルがテキストプロトコルよりも優れている点です。

Webosket でのメッセージの送受信は、実際には最下位レベルでこの形式で詳しく説明されています。

ブラウザは、この形式のプロトコルデータの解析に役立つだけです。

这就是 weboscket 的全部流程了。

其实还是挺清晰的，一个切换协议的过程，然后是二进制的 weboscket 协议的收发。

那我们就用 Node.js 自己实现一个 websocket 服务器吧！

定义个 MyWebsocket 的 class：

const { EventEmitter } = require(&#39;events&#39;);
const http = require(&#39;http&#39;);

class MyWebsocket extends EventEmitter {
  constructor(options) {
    super(options);

    const server = http.createServer();
    server.listen(options.port || 8080);

    server.on(&#39;upgrade&#39;, (req, socket) => {
      
    });
  }
}

继承 EventEmitter 是为了可以用 emit 发送一些事件，外界可以通过 on 监听这个事件来处理。

我们在构造函数里创建了一个 http 服务，当 ungrade 事件发生，也就是收到了 Connection: upgrade 的 header 的时候，返回切换协议的 header。

返回的 header 前面已经见过了，就是要对 sec-websocket-key 做下处理。

server.on(&#39;upgrade&#39;, (req, socket) => {
  this.socket = socket;
  socket.setKeepAlive(true);

  const resHeaders = [
    &#39;HTTP/1.1 101 Switching Protocols&#39;,
    &#39;Upgrade: websocket&#39;,
    &#39;Connection: Upgrade&#39;,
    &#39;Sec-WebSocket-Accept: &#39; + hashKey(req.headers[&#39;sec-websocket-key&#39;]),
    &#39;&#39;,
    &#39;&#39;
  ].join(&#39;\r\n&#39;);
  socket.write(resHeaders);

  socket.on(&#39;data&#39;, (data) => {
    console.log(data)
  });
  socket.on(&#39;close&#39;, (error) => {
      this.emit(&#39;close&#39;);
  });
});

我们拿到 socket，返回上面的 header，其中 key 做的处理就是前面聊过的算法：

function hashKey(key) {
  const sha1 = crypto.createHash(&#39;sha1&#39;);
  sha1.update(key + &#39;258EAFA5-E914-47DA-95CA-C5AB0DC85B11&#39;);
  return sha1.digest(&#39;base64&#39;);
}

就这么简单，就已经完成协议切换了。

不信我们试试看。

引入我们实现的 ws 服务器，跑起来：

const MyWebSocket = require(&#39;./ws&#39;);
const ws = new MyWebSocket({ port: 8080 });

ws.on(&#39;data&#39;, (data) => {
  console.log(&#39;receive data:&#39; + data);
});

ws.on(&#39;close&#39;, (code, reason) => {
  console.log(&#39;close:&#39;, code, reason);
});

然后新建这样一个 html：

<!DOCTYPE HTML>
<html>
<body>
    <script>
        const ws = new WebSocket("ws://localhost:8080");

        ws.onopen = function () {
            ws.send("发送数据");
            setTimeout(() => {
                ws.send("发送数据2");
            }, 3000)
        };

        ws.onmessage = function (evt) {
            console.log(evt)
        };

        ws.onclose = function () {
        };
    </script>
</body>

</html>

用浏览器的 WebSocket api 建立连接，发送消息。

用 npx http-server . 起个静态服务。

然后浏览器访问这个 html：

这时打开 devtools 你就会发现协议切换成功了：

这 3 个 header 还有 101 状态码都是我们返回的。

message 里也可以看到发送的消息：

再去服务端看看，也收到了这个消息：

只不过是 Buffer 的，也就是二进制的。

接下来只要按照协议格式解析这个 Buffer，并且生成响应格式的协议数据 Buffer 返回就可以收发 websocket 数据了。

这一部分还是比较麻烦的，我们一点点来看。

我们需要第一个字节的后四位，也就是 opcode。

这样写：

const byte1 = bufferData.readUInt8(0);
let opcode = byte1 & 0x0f;

读取 8 位无符号整数的内容，也就是一个字节的内容。参数是偏移的字节，这里是 0。

通过位运算取出后四位，这就是 opcode 了。

然后再处理第二个字节：

第一位是 mask 标志位，后 7 位是 payload 长度。

可以这样取：

const byte2 = bufferData.readUInt8(1);
const str2 = byte2.toString(2);
const MASK = str2[0];
let payloadLength = parseInt(str2.substring(1), 2);

还是用 buffer.readUInt8 读取一个字节的内容。

先转成二进制字符串，这时第一位就是 mask，然后再截取后 7 位的子串，parseInt 成数字，这就是 payload 长度了。

这样前两个字节的协议内容就解析完了。

有同学可能问了，后面咋还有俩 payload 长度呢？

这是因为数据不一定有多长，可能需要 16 位存长度，可能需要 32 位。

于是 websocket 协议就规定了如果那个 7 位的内容不超过 125，那它就是 payload 长度。

如果 7 位的内容是 126，那就不用它了，用后面的 16 位的内容作为 payload 长度。

如果 7 位的内容是 127，也不用它了，用后面那个 64 位的内容作为 payload 长度。

其实还是容易理解的，就是 3 个 if else。

用代码写出来就是这样的：

let payloadLength = parseInt(str2.substring(1), 2);

let curByteIndex = 2;

if (payloadLength === 126) {
  payloadLength = bufferData.readUInt16BE(2);
  curByteIndex += 2;
} else if (payloadLength === 127) {
  payloadLength = bufferData.readBigUInt64BE(2);
  curByteIndex += 8;
}

这里的 curByteIndex 是存储当前处理到第几个字节的。

如果是 126，那就从第 3 个字节开始，读取 2 个字节也就是 16 位的长度，用 buffer.readUInt16BE 方法。

如果是 127，那就从第 3 个字节开始，读取 8 个字节也就是 64 位的长度，用 buffer.readBigUInt64BE 方法。

这样就拿到了 payload 的长度，然后再用这个长度去截取内容就好了。

但在读取数据之前，还有个 mask 要处理，这个是用来给内容解密的：

读 4 个字节，就是 mask key。

再后面的就可以根据 payload 长度读出来。

let realData = null;

if (MASK) {
  const maskKey = bufferData.slice(curByteIndex, curByteIndex + 4);  
  curByteIndex += 4;
  const payloadData = bufferData.slice(curByteIndex, curByteIndex + payloadLength);
  realData = handleMask(maskKey, payloadData);
} else {
  realData = bufferData.slice(curByteIndex, curByteIndex + payloadLength);;
}

然后用 mask key 来解密数据。

这个算法也是固定的，用每个字节的 mask key 和数据的每一位做按位异或就好了：

function handleMask(maskBytes, data) {
  const payload = Buffer.alloc(data.length);
  for (let i = 0; i < data.length; i++) {
    payload[i] = maskBytes[i % 4] ^ data[i];
  }
  return payload;
}

这样，我们就拿到了最终的数据！

但是传给处理程序之前，还要根据类型来处理下，因为内容分几种类型，也就是 opcode 有几种值：

const OPCODES = {
  CONTINUE: 0,
  TEXT: 1, // 文本
  BINARY: 2, // 二进制
  CLOSE: 8,
  PING: 9,
  PONG: 10,
};

我们只处理文本和二进制就好了：

handleRealData(opcode, realDataBuffer) {
    switch (opcode) {
      case OPCODES.TEXT:
        this.emit(&#39;data&#39;, realDataBuffer.toString(&#39;utf8&#39;));
        break;
      case OPCODES.BINARY:
        this.emit(&#39;data&#39;, realDataBuffer);
        break;
      default:
        this.emit(&#39;close&#39;);
        break;
    }
}

文本就转成 utf-8 的字符串，二进制数据就直接用 buffer 的数据。

这样，处理程序里就能拿到解析后的数据。

我们来试一下：

之前我们已经能拿到 weboscket 协议内容的 buffer 了：

而现在我们能正确解析出其中的数据：

至此，我们 websocket 协议的解析成功了！

这样的协议格式的数据叫做 frame，也就是帧：

解析可以了，接下来我们再实现数据的发送。

发送也是构造一样的 frame 格式。

定义这样一个 send 方法：

send(data) {
    let opcode;
    let buffer;
    if (Buffer.isBuffer(data)) {
      opcode = OPCODES.BINARY;
      buffer = data;
    } else if (typeof data === &#39;string&#39;) {
      opcode = OPCODES.TEXT;
      buffer = Buffer.from(data, &#39;utf8&#39;);
    } else {
      console.error(&#39;暂不支持发送的数据类型&#39;)
    }
    this.doSend(opcode, buffer);
}

doSend(opcode, bufferDatafer) {
   this.socket.write(encodeMessage(opcode, bufferDatafer));
}

根据发送的是文本还是二进制数据来对内容作处理。

然后构造 websocket 的 frame：

function encodeMessage(opcode, payload) {
  //payload.length < 126
  let bufferData = Buffer.alloc(payload.length + 2 + 0);;
  
  let byte1 = parseInt(&#39;10000000&#39;, 2) | opcode; // 设置 FIN 为 1
  let byte2 = payload.length;

  bufferData.writeUInt8(byte1, 0);
  bufferData.writeUInt8(byte2, 1);

  payload.copy(bufferData, 2);
  
  return bufferData;
}

我们只处理数据长度小于 125 的情况。

第一个字节是 opcode，我们把第一位置 1 ，通过按位或的方式。

服务端给客户端回消息不需要 mask，所以第二个字节就是 payload 长度。

分别把这前两个字节的数据写到 buffer 里，指定不同的 offset：

bufferData.writeUInt8(byte1, 0);
bufferData.writeUInt8(byte2, 1);

之后把 payload 数据放在后面：

 payload.copy(bufferData, 2);

这样一个 websocket 的 frame 就构造完了。

我们试一下：

收到客户端消息后，每两秒回一个消息。

收发消息都成功了！

就这样，我们自己实现了一个 websocket 服务器，实现了 websocket 协议的解析和生成！

完整代码如下：

MyWebSocket:

//ws.js
const { EventEmitter } = require('events');
const http = require('http');
const crypto = require(&#39;crypto&#39;);

function hashKey(key) {
  const sha1 = crypto.createHash(&#39;sha1&#39;);
  sha1.update(key + &#39;258EAFA5-E914-47DA-95CA-C5AB0DC85B11&#39;);
  return sha1.digest(&#39;base64&#39;);
}

function handleMask(maskBytes, data) {
  const payload = Buffer.alloc(data.length);
  for (let i = 0; i < data.length; i++) {
    payload[i] = maskBytes[i % 4] ^ data[i];
  }
  return payload;
}

const OPCODES = {
  CONTINUE: 0,
  TEXT: 1,
  BINARY: 2,
  CLOSE: 8,
  PING: 9,
  PONG: 10,
};

function encodeMessage(opcode, payload) {
  //payload.length < 126
  let bufferData = Buffer.alloc(payload.length + 2 + 0);;
  
  let byte1 = parseInt(&#39;10000000&#39;, 2) | opcode; // 设置 FIN 为 1
  let byte2 = payload.length;

  bufferData.writeUInt8(byte1, 0);
  bufferData.writeUInt8(byte2, 1);

  payload.copy(bufferData, 2);
  
  return bufferData;
}

class MyWebsocket extends EventEmitter {
  constructor(options) {
    super(options);

    const server = http.createServer();
    server.listen(options.port || 8080);

    server.on('upgrade', (req, socket) => {
      this.socket = socket;
      socket.setKeepAlive(true);

      const resHeaders = [
        'HTTP/1.1 101 Switching Protocols',
        'Upgrade: websocket',
        'Connection: Upgrade',
        'Sec-WebSocket-Accept: ' + hashKey(req.headers['sec-websocket-key']),
        '',
        ''
      ].join('\r\n');
      socket.write(resHeaders);

      socket.on('data', (data) => {
        this.processData(data);
        // console.log(data);
      });
      socket.on('close', (error) => {
          this.emit('close');
      });
    });
  }

  handleRealData(opcode, realDataBuffer) {
    switch (opcode) {
      case OPCODES.TEXT:
        this.emit('data', realDataBuffer.toString('utf8'));
        break;
      case OPCODES.BINARY:
        this.emit('data', realDataBuffer);
        break;
      default:
        this.emit('close');
        break;
    }
  }

  processData(bufferData) {
    const byte1 = bufferData.readUInt8(0);
    let opcode = byte1 & 0x0f; 
    
    const byte2 = bufferData.readUInt8(1);
    const str2 = byte2.toString(2);
    const MASK = str2[0];

    let curByteIndex = 2;
    
    let payloadLength = parseInt(str2.substring(1), 2);
    if (payloadLength === 126) {
      payloadLength = bufferData.readUInt16BE(2);
      curByteIndex += 2;
    } else if (payloadLength === 127) {
      payloadLength = bufferData.readBigUInt64BE(2);
      curByteIndex += 8;
    }

    let realData = null;
    
    if (MASK) {
      const maskKey = bufferData.slice(curByteIndex, curByteIndex + 4);  
      curByteIndex += 4;
      const payloadData = bufferData.slice(curByteIndex, curByteIndex + payloadLength);
      realData = handleMask(maskKey, payloadData);
    } 
    
    this.handleRealData(opcode, realData);
  }

  send(data) {
    let opcode;
    let buffer;
    if (Buffer.isBuffer(data)) {
      opcode = OPCODES.BINARY;
      buffer = data;
    } else if (typeof data === 'string') {
      opcode = OPCODES.TEXT;
      buffer = Buffer.from(data, 'utf8');
    } else {
      console.error('暂不支持发送的数据类型')
    }
    this.doSend(opcode, buffer);
  }

  doSend(opcode, bufferDatafer) {
    this.socket.write(encodeMessage(opcode, bufferDatafer));
  }
}

module.exports = MyWebsocket;

Index：

const MyWebSocket = require(&#39;./ws&#39;);
const ws = new MyWebSocket({ port: 8080 });

ws.on(&#39;data&#39;, (data) => {
  console.log(&#39;receive data:&#39; + data);
  setInterval(() => {
    ws.send(data + &#39; &#39; + Date.now());
  }, 2000)
});

ws.on(&#39;close&#39;, (code, reason) => {
  console.log(&#39;close:&#39;, code, reason);
});

html:

<!DOCTYPE HTML>
<html>
<body>
    <script>
        const ws = new WebSocket("ws://localhost:8080");

        ws.onopen = function () {
            ws.send("发送数据");
            setTimeout(() => {
                ws.send("发送数据2");
            }, 3000)
        };

        ws.onmessage = function (evt) {
            console.log(evt)
        };

        ws.onclose = function () {
        };
    </script>
</body>

</html>

总结

实时性较高的需求，我们会用 websocket 实现，比如即时通讯、游戏等场景。

websocket 和 http 没什么关系，但从 http 到 websocket 需要一次切换的过程。

这个切换过程除了要带 upgrade 的 header 外，还要带 sec-websocket-key，服务端根据这个 key 算出结果，通过 sec-websocket-accept 返回。响应是 101 Switching Protocols 的状态码。

这个计算过程比较固定，就是 key + 固定的字符串通过 sha1 加密后再 base64 的结果。

加这个机制是为了确保对方一定是 websocket 服务器，而不是随意返回了个 101 状态码。

之后就是 websocket 协议了，这是个二进制协议，我们根据格式完成了 websocket 帧的解析和生成。

这样就是一个完整的 websocket 协议的实现了。

我们自己手写了一个 websocket 服务，有没有感觉对 websocket 的理解更深了呢？

更多node相关知识，请访问：nodejs 教程！

以上がNode を使用して WebSocket プロトコルを手書きする手順を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScript：Web言語の汎用性の調査Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

See all articles