Создаём простой сервер и форму для выполнения запроса

Продолжаем работу с приложением по поиску игроков NHL.
В этой статье добавим простой сервер для отображения формы поиска
Одно поле ввода и кнопка поиска.

Добавляю простой сервер на нативном пакете node.js http
Файл server.js в папке src

'use strict';

const http = require('http');
const port = process.env.PORT || 8080;

const manage = require('./modules/manageRequest');

const requestHandler = async (request, response) => {
  let body = [];

  const {headers} = manage.prepareHeaders(request);

  if (request.method === 'POST') {
    request.on('data', chunk => {
      body.push(chunk);
    });

    request.on('end', async () => {
      body = Buffer.concat(body).toString('utf8');

      const {content} = await manage.prepareContent(request, body);

      Object.keys(headers).forEach(key => {
        response.setHeader(key, headers[key]);
      });

      response.end(content);
    });
  } else {
    Object.keys(headers).forEach(key => {
      response.setHeader(key, headers[key]);
    });

    const {content} = await manage.prepareContent(request, null);

    response.end(content);
  }
};

const server = http.createServer(requestHandler);

server.listen(port, (err) => {
  if (err) {
    return console.info('something bad happened', err);
  }

  console.info(`server is listening on ${port}`);
});

Для обработки запросов и ответов модуль — manageRequest

'use strict';

const {parse} = require('querystring');

const Connection = require('./connection');

const HEADERS = {};
let type = 'index';

const getHeader = () => {
  if (type === 'search') {
    HEADERS['Content-Type'] = 'text/html';
  } else {
    HEADERS['Content-Type'] = 'text/html';
  }
};

const getType = (request) => {
  if (request.url === '/search') {
    type = 'search';
  } else {
    type = 'index';
  }
};

const prepareHeaders = (request) => {
  getType(request);
  getHeader();
  return {headers: HEADERS};
};

const getPage = (source) => {
  let body = '';

  if (type === 'index') {
    body = `<!doctype html>
        <html>
        <body>
            <form action="/search" method="post">
                <label for="playerName">
                  <input type="text" name="playerName" id="playerName"/> 
                </label><br />
                <input type="submit" value="Search">
            </form>
        </body>
        </html>`;
  } else if (source && type === 'search') {
    body = `<!doctype html>
        <html>
        <body>
            <form action="/search" method="post">
                <label for="playerName">
                  <input type="text" name="playerName" id="playerName"/> 
                </label><br />
                <input type="submit" value="Search">
            </form>
            <div>
              <pre>${JSON.stringify(source)}</pre>
            </div>
        </body>
        </html>`;
  }

  return body;
};

const prepareContent = async (request, data) => {
  getType(request);

  if (data && request.method === 'POST') {
    const {playerName} = parse(data);
    const con = new Connection(playerName);

    return new Promise(resolve => {
      con.getWiki(false, () => {
        getType(request);

        resolve({content: getPage(con.handlerWiki.playerInfo)});
      });
    });
  } else if (request.method === 'GET') {
    getType(request);

    return {content: getPage()};
  } else {
    return {content: null};
  }
};

module.exports = {prepareHeaders, prepareContent};

Исправляем путь в package.json команду npm start — index на server

Запускаем npm run start и переходим в браузере по адресу http://localhost:8080

Видим что дату плохо обрабатывает

Код в ветке server

Добавить комментарий Отменить ответ