Простое клиент-серверное приложение на Nodejs.

Автор: chekiBreki / 18-04-2025 13:26

Простое клиент-серверное приложение на Nodejs.

Всем привет! Сегодня мы напишем простое клиент-серверное приложение.


Используя платформу nodejs напишем серверную часть нашего приложения. Клиентскую часть реализуем в браузере.


Как серверную, так и клиентскую части будем писать на языке программирования javascript, да-да не удивляйтесь, ведь nodejs и браузер являются хост-средами выполнения js-кода.


Для начала давайте разберемся что такое клиент-серверное приложение.


Клиент-серверные приложения представляют собой классическую модель распределенной системы, в которой две или более компьютерных программы общаются друг с другом для выполнения определенных задач. Этот тип архитектуры широко используется в современных технологиях и является основой для многих интернет-приложений, сервисов и сетевых решений.


Основные компоненты клиент-серверной модели:


Сервер: Это программное обеспечение или аппаратная платформа, которое предоставляет услуги другим компьютерам в сети. Сервер может обрабатывать запросы от клиентов, хранить данные и предоставлять доступ к этим данным. Клиент: Это программа, которая запрашивает у сервера определенные услуги или данные.


Клиент может быть установлен на любом устройстве (компьютер, смартфон, планшет) и может взаимодействовать с одним или несколькими серверами.


Начнем с написания серверной стороны


Установим nodejs


Windows


  1. Скачайте установщик:
    1. Перейдите на официальный сайт Node.js.
    2. Нажмите на кнопку "Download" и выберите версию для Windows (обычно LTS или Current).
  2. Запустите установщик:
    1. Откройте скачанный файл установщика.
    2. Примите условия лицензионного соглашения, нажав "Next".
    3. Выберите компоненты для установки (обычно все по умолчанию).
    4. Убедитесь, что опция "Add to PATH" отмечена.
    5. Нажмите "Install".

macOS


  1. Скачайте установщик:
    1. Перейдите на официальный сайт Node.js.
    2. Нажмите на кнопку "Download" и выберите версию для macOS (обычно LTS или Current).
  2. Запустите установщик:
    1. Откройте скачанный .pkg файл.
    2. Следуйте инструкциям установщика и нажимайте "Continue".
    3. Примите условия лицензионного соглашения, нажав "Agree"..
    4. Нажмите "Install" и введите ваш пароль для авторизации.

Linux based


  1. Ubuntu
    1. sudo apt update
    2. sudo apt install nodejs npm
  2. Fedora
    1. sudo dnf update
    2. sudo dnf install nodejs npm
  3. Arch
    1. sudo pacman -Syu
    2. sudo pacman -S nodejs npm

Вне зависимости от ОС проверьте установку компонентов.


В терминале или командной строке введите:


node -v

Если установка прошла успешно, вы увидите версию Node.js


npm -v

Если установка прошла успешно, вы увидите версию npm.


npm - это пакетный менеджер позволяющий управлять модулями.


Да я знаю про nvm, но в этой статье не об этом. Напишу пожалуй про nvm потом отдельно.


Ну наконец-то пишем сервер...


Почти. Создадим папку под названием myApp (я использую Linux и создал ее в своем домашнем каталоге, в macos справедливо сделать так-же, в windows предлагаю создать папку в корне диска С:\), внутри нее создадим еще две папки, одну назовем server - вторую client.


В терминале(командной строке) переходим к нашу папку server.


Windows


cd C:\myApp\server

Linux/Macos


cd ~/myApp/server

Проинициализируем наш проект и установим модули, необходимые нам для работы сервера(мы будем использовать самый популярный микрофреймворк express и так же нам потребуется установить модуль cors)


CORS не тема этой статьи. Примем пока факт того, что он нам нужен.


Отвлеклись. Продолжаем.


npm init -y
npm i express cors

Создадим файл app.js


Можно файл создать клацая мышкой, а можно как ниндзя.


Windows


type nul > app.js

Linux/Macos


touch > app.js

Откройте проект в вашем радакторе кода.


После введенных команд получаем такую структуру нашего проекта:


> node_modules
  package-lock.json
  package.json
  app.js

Немного настроим наш проект. В качестве системы модулей будем использовать esmodules, также, напишем скрипт для запуска нашего сервера.


Откроем файл package.json, добавим в него поле "type", со значением "module". Напишем скрипт запуска, "start": "node app.js"


Было


{
  "name": "client",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "cors": "^2.8.5",
    "espress": "^0.0.0"
  }
}

Стало


{
  "name": "server",
  "version": "1.0.0",
  "main": "app.js",
  "type": "module",
  "scripts": {
    "start": "node app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^5.1.0"
  }
}

Открываем файл app.js и наконец-то пишем сервер... Да, серьезно. 


'use strict'

// импортируем необходимые модули
import express from 'express'
import cors from 'cors'

// создаем объект приложения
const app = express()
// на порту 5000 будем запускать сервер
const PORT = 5000

/* промежуточный обработчик для
   настройки HTTP-заголовков */
app.use(cors())

/* данные которые мы будем
   передавать на клиент */
const turtles = ['Леонардо', 'Донателло', 'Микеланджело', 'Рафаэль']

/* обработчик get запроса по
   адресу '/' */
app.get('/', (req, res) => res.send(turtles))

/* вызываем метод listen у сервера
   он будет слушать порт 5000 */
app.listen(PORT, () => console.log(`Сервер запущен на порту ${PORT}`))

Это что весь код? Да, с сервером закончили. Осталось запустить.


npm start

В консоли увидим.


> server@1.0.0 start
> node app.js

Сервер запущен на порту 5000

Не закрывайте окно терминала, иначе сервер перестанет работать и клиентское приложение не сможет получить данные!


Кстати, черепашки это и есть те данные, которые мы будем передавать с сервера на клиент.


Пора создать клиентскую часть нашего приложения.


В качестве клиента будет выступать браузер, данные будем выводить на веб-страницу.


В директории myApp/client создадим файл index.html и откроем его в редакторе кода.


Напишем код клиентской части


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #000000;
    }
    #turtles {
      width: 200px;
    }
    .turtle {
      padding: 10px;
      color: #ffffff;
    }
    .turtle:nth-child(1) {
      background-color: #4966f6;
    }
    .turtle:nth-child(2) {
      background-color: #7149a5;
    }
    .turtle:nth-child(3) {
      background-color: #e84938;
    }
    .turtle:nth-child(4) {
      background-color: #ff6800;
    }
  </style>
  <body>
    <div id="turtles"></div>
    <script>
      // Используем fetch API для выполнения GET-запроса
      fetch('http://localhost:5000')
        .then((response) => {
          // Проверяем, если ответ успешный (код статуса 200-299)
          if (!response.ok) {
            throw new Error('Сетевой ответ не ok ' + response.statusText)
          }
          // Парсим JSON данные из ответа
          return response.json()
        })
        .then((data) => {
          // Обрабатываем распарсенные данные здесь
          // Data это и есть наш массив с черепашками
          // Добавляем наших черепашек в DOM-дерево
          const turtles = document.getElementById('turtles')
          data.forEach((element) => {
            const turtle = document.createElement('p')
            turtle.classList.add('turtle')
            turtle.innerText = element
            turtles.insertAdjacentElement('beforeEnd', turtle)
          })
        })
        .catch((error) => {
          // Обрабатываем возможные ошибки, возникающие во время выполнения fetch
          console.error('Произошла проблема:', error)
        })
    </script>
  </body>
</html>

Откроем файл index.html в браузере(например google chrome). Напоминаю, что сервер в этот момент запущен(помните, мы запустили его командой npm start?)


Если вы все сделали правильно то увидим наших черепашек в окне браузера!


К ленте статей