Server

39131 ワード
server テキストリンク
前述したように、クライアントリクエストの送信が実現された.では、サーバ上でjsを実装し、リクエストを受信し、応答を処理します.
.

Mini node server


リクエストを処理して応答する前に、サーバを構築する必要があります.次のコードは、サーバを生成する基礎式です.
const http = require('http');

const PORT = 5000;

const ip = 'localhost';

const server = http.creatServer((request, response) => {
  //여기에서 작업이 진행 된다.
})

// 위의 코드는 아래 코드의 축약형식 이다.
const server = http.createServer(); //server 객체는 EventEmitter이다.
server.on('request', (request, response) => { //리스너를 추가하는 문법
  // 여기서 작업이 진행 된다.
}); 

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
}
上記の作業により、小さなサーバを作成しました.次に、サーバにどのような機能を提供しますか?
要求されたテキストを受信し、大文字または小文字に戻すサーバを作成します.
このため,クライアントとhtmlは予め実装されている.
class App {
  init() {
    document
      .querySelector('#to-upper-case')
      .addEventListener('click', this.toUpperCase.bind(this));
    document
      .querySelector('#to-lower-case')
      .addEventListener('click', this.toLowerCase.bind(this));
  }
  post(path, body) {
    fetch(`http://localhost:5000/${path}`, {
      method: 'POST',
      body: JSON.stringify(body),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(res => res.json())
      .then(res => {
        this.render(res);
      });
  }
  toLowerCase() {
    const text = document.querySelector('.input-text').value;
    this.post('lower', text);
  }
  toUpperCase() {
    const text = document.querySelector('.input-text').value;
    this.post('upper', text);
  }
  render(response) {
    const resultWrapper = document.querySelector('#response-wrapper');
    document.querySelector('.input-text').value = '';
    resultWrapper.innerHTML = response;
  }
}

const app = new App();
app.init();
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .input-text {
        resize: none;
        font-size: 1.5rem;
        width: 80%;
        height: 10ch;
        border: 1px solid #000;
      }
      #response-wrapper {
        width: 80%;
        font-size: 2rem;
        border: 1px solid #000;
        height: 10ch;
      }
      button {
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <h2>요청</h2>
      <textarea
        placeholder="여기에 작성한 데이터를 서버로 보내면 응답으로 받을 수 있어야 합니다."
        class="input-text"
      ></textarea>
      <div>
        <button id="to-upper-case">toUpperCase</button>
        <button id="to-lower-case">toLowerCase</button>
      </div>
      <h2>응답</h2>
      <pre id="response-wrapper"></pre>
    </div>

    <script src="./App.js"></script>
  </body>
</html>
サーバに独自の機能を実現させるだけです.
まず、preflightを処理して、クライアントのアクセスを許可します.このためには、まず、発行された要求のmethodを比較し、分解方法は以下の通りである.
const { method, url} = request;
以上の表現により、アップロード要求に対するmethodおよびurlを抽出することができる.
この処理preflightを用いて,実際の要求を受け入れ,実際の要求をうまく処理できるようになった.ここで要求を処理するbodyの部分は、既存のmethodおよびurlを受信する方法とは異なる.
let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // 여기서 `body`에 전체 요청 바디가 문자열로 담긴다.
});
上記のコードを十分に利用し,要求に応じて応答を適切に返せばよい.app.jsのコードを見ると、後のurlが/upperなのか/lowerなのかによって、大文字と小文字の変更も変わります.もしそうであれば、ifゲートを介して各ケースに分割され、responseを介してそれぞれの値を返すことができる.
if (req.method === 'POST') {
    if (req.url === '/lower') {
      let data = '';
      req.on('data', chunk => {
        data = data + chunk;
      });
      req.on('end', () => {
        data = data.toLowerCase();
        res.writeHead(201, defaultCorsHeader);
        res.end(data);
      });
    } else if (req.url === '/upper') {
      let data = '';
      req.on('data', chunk => {
        data = data + chunk;
      });
      req.on('end', () => {
        data = data.toUpperCase();
        res.writeHead(201, defaultCorsHeader);
        res.end(data);
      });
    } else {
      res.writeHead(404, defaultCorsHeader);
      res.end();
    }
  }
  if (req.method === 'OPTIONS') {
    res.writeHead(200, defaultCorsHeader);
    res.end();
  }

Chatterbox Server


以前に作成したChatterboxクライアントのサーバ部分を直接実装してみましょう.
let results = {results:[]}

const requestHandler = function (request, response) {
  if(request.method === 'OPTIONS'){
    response.writeHead(200, headers)
    response.end();
  }else if(request.method === 'GET' && request.url === '/messages'){
    response.writeHead(200, headers)
    response.end(JSON.stringify(results));
  }else if (request.method === 'POST' && request.url === '/messages') {
    let body = [];
    request
    .on('error', (err) => console.log(err))
    .on('data', (chunk) => {body.push(chunk)})
    .on('end', () => {
      body = Buffer.concat(body).toString();
      results.results.push(JSON.parse(body));
      response.writeHead(201, headers);
      response.end(JSON.stringify(results));
    })
  }else{
    response.writeHead(404, headers)
    response.end();
  }
}
前に学んだ内容を利用して,要求に応じて区分する.各メソッドについて、処理プロセスは次のセクションに分けられます.
OPTION:CORS要求を処理する.
GET:クライアントから処理可能なデータを渡す.
POST:結果のデータを入れてデータを返します.
Kotlinベース#8 RecycleViewとAdapter
[ミニプロジェクト]Number Baseball