uWebSockets.js의 웹 서버·WebSocket 서버를 사용한 시도 [Node.js]

다음 기사를 쓸 때 본'uWebSockets'가 신경 쓰여서 메시지를 살짝 보고 시도해봤어요.
●Socket.입출력(I/O)의 최신 버전 4.x 정보 보기(2022년 3월) - Qita
  https://qiita.com/youtoy/items/c57158f4a08e478dff57
Socket.입출력 문서의 레코드
Socket.입출력 문서에는 다음 섹션이 표시됩니다.


uWebSockets.시험 js
우선, uWebSockets.제이스의 GiitHub 창고 좀 볼게요.
●uNetworking/uWebSockets.js: μWebSockets for Node.js back-ends
  https://github.com/uNetworking/uWebSockets.js

다음은 문장을 집필할 때의 공식 문서의 최신판이다.
●uWebSockets.js v20.4.0 documentation
  https://unetworking.github.io/uWebSockets.js/generated/
활용 준비
사용하기 위해서는 다음yarn 명령을 사용할 준비가 필요합니다.

구체적으로 다음과 같다.
$ yarn add uWebSockets.js@uNetworking/uWebSockets.js#v20.3.0
시도 시 참조 대상
실제로는 uWebSockets입니다.js를 시도할 때 참조원으로서의 정보로'examples의 몇 가지 내용을 보십시오.
  • HelloWorld.js
  • https://github.com/uNetworking/uWebSockets.js/blob/master/examples/HelloWorld.js
  • WebSockets.js
  • https://github.com/uNetworking/uWebSockets.js/blob/master/examples/WebSockets.js
  • 이거 Hello Worldjs 및 WebSockets나는 js를 시험해 보기로 결정했다.
    HelloWorld.js 기반의 시도
    HelloWorld.js를 바탕으로 시험을 진행하다.require 부분과 uWS.App 부분 등을 조금 변경해 다음과 같은 내용으로 변경했다.
    const uWS = require('uWebSockets.js');
    const port = 9001;
    
    const app = uWS.App().get('/*', (res, req) => {
      res.end('Hello World!');
    }).listen(port, (token) => {
      if (token) {
        console.log('Listening to port ' + port);
      } else {
        console.log('Failed to listen to port ' + port);
      }
    });
    
    node 명령을 사용하여 상기 프로그램을 실행하고 서버를 시작한 다음 브라우저에 접근합니다 http://127.0.0.1:9001/.
    서버의 반응이 순조롭게 회복되었는지 확인했다.

    WebSockets.js 기반의 시도
    다음은 WebSockets입니다.js를 바탕으로 시험을 진행하다.
    아까와 마찬가지로 이것도 좀 고쳐 쓰세요.
    const uWS = require('uWebSockets.js');
    const port = 9001;
    
    const app = uWS.App().get('/*', (res, req) => {
      res.end('Hello World!');
    }).ws('/*', {
      compression: uWS.SHARED_COMPRESSOR,
      maxPayloadLength: 16 * 1024 * 1024,
      idleTimeout: 12,
      open: (ws) => {
        console.log('A WebSocket connected!');
      },
      message: (ws, message, isBinary) => {
        let ok = ws.send(message, isBinary);
      },
      drain: (ws) => {
        console.log('WebSocket backpressure: ' + ws.getBufferedAmount());
      },
      close: (ws, code, message) => {
        console.log('WebSocket closed');
      }
    }).any('/*', (res, req) => {
      res.end('Nothing to see here!');
    }).listen(port, (token) => {
      if (token) {
        console.log('Listening to port ' + port);
      } else {
        console.log('Failed to listen to port ' + port);
      }
    });
    
    또한 앞으로도 node 명령을 사용하여 이 프로그램을 실행하고 서버를 시작한 후 브라우저에 접근http://127.0.0.1:9001/할 것이다.
    이번에도 무사히 서버의 회답을 확인했다.

    그리고 이번에 웹소켓 서버도 일어섰기 때문에 아래 기사를 쓸 때와 같은 방법으로 웹소켓 클라이언트를 만들어 웹소켓을 통해 통신을 시도했다.
    ●Node.js 프레임워크의Fastify와WebSocket을 쉽게 이용할 수 있는fastify-websocket-Qiita
      https://qiita.com/youtoy/items/7c5a318278e397602b76
    위의 기사에서 HTML 파일에는 WebSocket 클라이언트가 준비되어 있습니다.
    그 포트 번호의 일부가 이번 서버에 적합하도록 하기 위해 나는 잠시 다시 쓰고 아래의 파일을 준비했다.
    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>WebSocketクライアント</title>
    </head>
    
    <body>
      <input type="button" id="button" value="データの送信">
    
      <script>
        const socket = new WebSocket('ws://127.0.0.1:9001');
    
        socket.addEventListener('open', function (event) {
          console.log('サーバーへの接続成功');
        });
    
        socket.addEventListener('message', function (event) {
          console.log('Message from server ', event.data);
        });
    
        const button = document.getElementById('button');
        button.addEventListener('click', function () {
          socket.send('hello from client');
        });
      </script>
    </body>
    
    </html>
    
    브라우저에서 위의 HTML 파일을 열고 개발자 도구의 콘솔을 연 후 브라우저에 표시된 버튼을 누릅니다.
    결과는 다음과 같이 컨트롤러에 서버로부터 받은 데이터(클라이언트에서 보낸 데이터가 앵무새에 의해 되돌아오는 데이터)를 표시할 수 있다.

    끝말
    이번에는 uWebSockets입니다.js의 웹 서버·WebSocket 서버를 사용해 보았습니다. 의도대로 동작할 수 있습니다.
    이번에는 일단 동작을 해봤어요, 노드.다른 js용 웹 응용 프레임워크와 웹소켓 서버를 구축하는 구조도 있기 때문에 그것들과 차이점을 확인하고 싶습니다.

    좋은 웹페이지 즐겨찾기