Введение

У каждого в карьере программиста есть момент, когда он понимает, что в целом программирование ему нравится. У всех нас есть собственный заветный опыт создания отличных анекдотов в супер крутой социальной обстановке. Для меня одним из таких опытов было связывание моего внутреннего сервера (Ruby on rails 🚂 💎 👍) с моим внешним javascript-клиентом (📜 🖊 😊). Это была одна из самых приятных и самоутверждающих вещей, которые я когда-либо делал. Этот «Доктор. Франкенштейновский опыт был подобен электричеству! Я был вдохновлен, чтобы создавать больше, оптимизировать больше и добавлять больше функций! 😈

Сегодня в этом блоге я расскажу, как настроить сервер с ванильным Node.js. Я пройдусь по каждому шагу и объясню, как все работает. Надеемся, что этот внутренний подход поможет вам понять еще более сложные концепции и абстракции с использованием Node.js. Настройка сервера — это фундаментальный строительный блок, поэтому уделите время концепции — это действительно ключ к пониманию того, почему все работает. Это окупится в будущем, когда вы погрузитесь в выбор веб-фреймворка, такого как Express.js (популярный).

Давайте копать! 🕳 🐇 🦡

Установка Node.js

Link to Super Cool Node.js Blog 😎 🐪 🧊:
https://ineedmoreplates.medium.com/learning-node-js-8288e0411957

Если вы не следите за всеми моими блогами. Я написал хороший блог + руководство по установке Node.js. Я настоятельно рекомендую вам прочитать его. Он более подробно объясняет Node.js. Вы получаете простое пошаговое руководство по установке Node.js (внизу).

Давайте поговорим о настройке:

In case you forget:
User/Client(Browser): Think of what's on your Device. Example: "Safari", "Chrome","Mozilla", etc.
URL: Think of this an encoded and human-readable address. Well all use it when typing in a web address on our browsers. 
Domain: an identification string that defines a realm of administrative autonomy, authority or control within the Internet.
Request: The Domain sends a request to the server with an IP address belonging to that Domain.
IP address: unique ID used to identify each device on a Domain(DNS).
Server: Hardware, We will be writing our code for it.

Прежде чем мы начнем писать какой-либо код, давайте быстро рассмотрим, как работает веб-страница. Представьте, что пользователь вводит URL-адрес. Допустим, это что-то довольно обычное, например, погуглить видео о кошках 🐈 , почитать технический блог 🤓 , купить чугунную кастрюлю на Амазоне 🥘 ! Что происходит?

Да, это Мета, но выслушай меня. Это принесет дополнительное понимание с каждым нажатием клавиши. Легко запомнить шаблоны в кодировании, но мастерство заключается в понимании и передаче того, что, черт возьми, мы только что сделали?

Пользователь вводит URL-адрес веб-страницы:

  1. Пользователь переходит в браузер
  2. Пользователь вводит URL
  3. URL передается в домен
  4. Домен отправляет запрос на сервер (HTTP)
  5. Сервер получает запрос
  6. Если все проходит успешно, Сервер получает данные из Базы данных.
  7. Сервер возвращает ответ (страница HTTP)

Вау, там несколько шагов, потом понимаешь, да? Есть даже больше, когда мы говорим о входе в систему, файлах cookie, безопасности и т. д. Идея в том, что мы хотим получить здесь базовое понимание.

Поскольку Node.js является серверной средой выполнения, для Javascript наш код будет записываться на сам сервер (бэк-энд). В этом списке это будет шаг 5.

Судя по этому списку, мы можем рассчитывать на входящие запросы, исходящие ответы и некоторую связь с базой данных. Мы также знаем, что пользователю будет отправляться HTTP-страница.

Just a friend reminder: HTTP and HTTPS
HTTP: Hyper Text Transfer Protocol, it's a Protocol or way of transfering Data which your Browser or Server can understand.
HTTPS: 🔒 Hyper Text Tranfer Protocol Secure, It's HTTP + Data Encrpytion during Transmission. Way more secure, great for online banks, E-trading, etc. ! (look at the 🔒 icon next to your URL, that's HTTPS 😉 )

Давайте строить 🔨 🧰 🛠 :

Today I’m building with :
1. OS operating system(if not, just keep reading) 🍎 🐛 🍏 
2. Vscode 🤓 🎹 🐭 
3. Node.js 👩‍🔬 👨‍🔬 🧑‍🔬
4. Basic Understanding of Javascript 📜 🪶 😊 

Предварительные шаги:

  1. Давайте начнем с создания новой папки в нашем файловом каталоге. Вы можете назвать это как угодно. Я предпочитаю что-то короткое и легко узнаваемое.

2. Давайте откроем наш редактор кода. Я наркоман Vscode. Не стесняйтесь использовать все, что вам нравится.

3. Давайте откроем терминал и перейдем к папке создания.

Шаг за шагом:

Теперь, когда мы все настроены. Давайте погрузимся в пошаговое кодирование в сочетании с некоторыми полезными пояснениями. Не бойтесь тестировать вещи самостоятельно. Это лучший способ понять, что все работает.

Шаг 1: давайте создадим файл с именем app.js. Здесь будет создан наш сервер.

Шаг 2: Мы будем импортировать встроенный модуль ядра, найденный в Node.js.

Looks like this:
const http = require('http'); <-- This is a global scope
 
*** require(), Node.js syntax for importing, it takes a string argument 

Шаг 3: Модуль HTTP имеет хороший выбор методов. Будет использоваться метод .createServer().

Looks like this: 
const http = require('http') <-- import
http.createServer(); <-- access method, JS style

Шаг 4: .createServer() — это специальная функция, которая принимает функцию в качестве аргумента. Эта функция должна принимать 2 аргумента в качестве ответа и запроса. Мы также можем назвать эту функцию и ее аргументы как угодно. Тем не менее, я большой поклонник синтаксиса стрелок + анонимных функций. Это стоит изучить, так как его легче читать и меньше писать код. Посмотрите мой пример ниже.

const http = require('http')
http.createServer((req,res) => {}); <-- clean & easy to read
res = response
req = request

Шаг 5: .createServer(), как следует из названия, выводит сервер. Сохранит это в константную переменную, и наша функция вернет ответ.

const http = require('http')
const server = http.createServer((req,res) => {
console.log(res) <-- let's just console.log for now 😊
}); <-- clean & easy to read

Шаг 6: Давайте найдем порт 🚢 . Мы будем прослушивать нашу переменную сервера. Этот метод будет прослушивать адрес порта. Подставим стандартные 3000 в качестве аргумента. Также вернет console.log аргумента res.

const http = require('http')
const server = http.createServer((req,res) => {
console.log(res) <-- let's just console.log for now 😊
});
server.listen(3000); 🧚‍♀️ "Hello, hey!!!"

Шаг 7: В нашем терминале запустится наш файл с именем app.js. Ваш сервер должен разогнаться. Обратите внимание на мигающий курсор. Если вам нужно завершить работу, сервер использует сочетание клавиш «Ctrl + c» для завершения работы сервера.

Looks like this:
node app.js <-- ctrl + c kills server! 

Шаг 8: Давайте запустим наш сервер и откроем браузер. После этого вернемся к нашему терминалу и взглянем. Вы должны увидеть новую активность в своем терминале.

localhost: 3000 <-- type in URL field of your browser!

Заключение

Поздравляю! 🎊 Вы развернули свой первый Сервер на Node.js. Вы чувствуете эту вдохновляющую энергию! А теперь иди строй что-нибудь крутое! Сила среды выполнения javascript находится в вашем распоряжении. Если вам понравился этот блог, не бойтесь хлопнуть меня в ладоши. Всем удачного кодирования 😆 🎹 🐭!

Ссылки:

Great Course on Node.js: https://www.udemy.com/course/nodejs-the-complete-guide/
My Node.js: https://ineedmoreplates.medium.com/learning-node-js-8288e0411957
Require function: https://nodejs.org/en/knowledge/getting-started/what-is-require/
Create server method: https://www.w3schools.com/nodejs/met_http_createserver.asp
Listen method: https://www.w3schools.com/nodejs/met_server_listen.asp