magdo
351 lines
8.9 KiB
TeX
351 lines
8.9 KiB
TeX
\section{Node.js Alapok}
|
|
\subsection{}
|
|
|
|
\begin{frame}{Mi a Node.js?}
|
|
\begin{itemize}
|
|
\item \kiemel{JavaScript futtatókörnyezet} a V8 motoron alapulva
|
|
\item \kiemelZ{Szerveroldali JavaScript} fejlesztés lehetősége
|
|
\item Eseményvezérelt, nem-blokkoló I/O modell
|
|
\item Kiváló nagy számú egyidejű kapcsolat kezelésére
|
|
\item Létrehozta: Ryan Dahl (2009)
|
|
\end{itemize}
|
|
\vspace{0.5cm}
|
|
\begin{block}{Miért Node.js?}
|
|
\begin{itemize}
|
|
\item Ugyanaz a nyelv frontend és backend oldalon
|
|
\item Hatalmas ökoszisztéma (npm)
|
|
\item Gyors fejlesztés és prototípuskészítés
|
|
\item Skálázható, nagy teljesítményű alkalmazások
|
|
\end{itemize}
|
|
\end{block}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Node.js architektúra}
|
|
\begin{columns}
|
|
\begin{column}{0.5\textwidth}
|
|
\begin{block}{V8 JavaScript Engine}
|
|
\begin{itemize}
|
|
\item Google Chrome motorja
|
|
\item JIT (Just-In-Time) fordítás
|
|
\item C++ nyelven íródott
|
|
\item Rendkívül gyors végrehajtás
|
|
\end{itemize}
|
|
\end{block}
|
|
\begin{block}{libuv}
|
|
\begin{itemize}
|
|
\item Event loop implementáció
|
|
\item Aszinkron I/O műveletek
|
|
\item Cross-platform támogatás
|
|
\end{itemize}
|
|
\end{block}
|
|
\end{column}
|
|
\begin{column}{0.5\textwidth}
|
|
\begin{block}{Event Loop}
|
|
\begin{enumerate}
|
|
\item Timers (setTimeout, setInterval)
|
|
\item Pending callbacks
|
|
\item Poll (I/O műveletek)
|
|
\item Check (setImmediate)
|
|
\item Close callbacks
|
|
\end{enumerate}
|
|
\end{block}
|
|
\vspace{0.2cm}
|
|
\centering
|
|
\kiemel{Single-threaded}, de \kiemelZ{aszinkron}!
|
|
\end{column}
|
|
\end{columns}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile,shrink=10]{Első Node.js program}
|
|
\begin{block}{hello.js}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
console.log('Hello, Node.js!');
|
|
console.log('Node verzio:', process.version);
|
|
console.log('Platform:', process.platform);
|
|
console.log('Aktualis konyvtar:', __dirname);
|
|
console.log('Fajl neve:', __filename);
|
|
\end{lstlisting}
|
|
\end{block}
|
|
|
|
\begin{block}{Futtatás}
|
|
\begin{lstlisting}[language=bash]
|
|
node hello.js
|
|
\end{lstlisting}
|
|
\end{block}
|
|
|
|
\vspace{0.3cm}
|
|
\begin{alertblock}{Fontos}
|
|
A Node.js \kiemel{nem böngésző}! Nincs \texttt{window}, nincs \texttt{document}, de van \texttt{global} és \texttt{process}.
|
|
\end{alertblock}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile,shrink=10]{Modulrendszer - CommonJS}
|
|
\begin{columns}
|
|
\begin{column}{0.5\textwidth}
|
|
\begin{block}{math.js - Modul exportálás}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
function add(a, b) {
|
|
return a + b;
|
|
}
|
|
|
|
function multiply(a, b) {
|
|
return a * b;
|
|
}
|
|
|
|
module.exports = {
|
|
add,
|
|
multiply
|
|
};
|
|
\end{lstlisting}
|
|
\end{block}
|
|
\end{column}
|
|
\begin{column}{0.5\textwidth}
|
|
\begin{block}{app.js - Modul importálás}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
const math = require('./math');
|
|
|
|
console.log(math.add(2, 3));
|
|
// 5
|
|
|
|
console.log(math.multiply(4, 5));
|
|
// 20
|
|
\end{lstlisting}
|
|
\end{block}
|
|
\end{column}
|
|
\end{columns}
|
|
\vspace{0.3cm}
|
|
\begin{block}{Beépített modulok}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
const fs = require('fs'); // File system
|
|
const path = require('path'); // Path mukodtatas
|
|
const http = require('http'); // HTTP szerver
|
|
\end{lstlisting}
|
|
\end{block}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile,shrink=10]{ES Modules (ESM)}
|
|
\begin{columns}
|
|
\begin{column}{0.5\textwidth}
|
|
\begin{block}{math.mjs - Export}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
export function add(a, b) {
|
|
return a + b;
|
|
}
|
|
|
|
export function multiply(a, b) {
|
|
return a * b;
|
|
}
|
|
|
|
// Default export
|
|
export default {
|
|
add,
|
|
multiply
|
|
};
|
|
\end{lstlisting}
|
|
\end{block}
|
|
\end{column}
|
|
\begin{column}{0.5\textwidth}
|
|
\begin{block}{app.mjs - Import}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
// Named import
|
|
import { add, multiply } from './math.mjs';
|
|
|
|
console.log(add(2, 3));
|
|
|
|
// Default import
|
|
import math from './math.mjs';
|
|
|
|
console.log(math.multiply(4, 5));
|
|
\end{lstlisting}
|
|
\end{block}
|
|
\end{column}
|
|
\end{columns}
|
|
\vspace{0.3cm}
|
|
\begin{alertblock}{package.json}
|
|
ESM használatához: \texttt{\{"type": "module"\}} a package.json-ben
|
|
\end{alertblock}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile,shrink=10]{File System műveletek}
|
|
\begin{block}{Fájl olvasás - Szinkron}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
const fs = require('fs');
|
|
|
|
const data = fs.readFileSync('input.txt', 'utf8');
|
|
console.log(data);
|
|
// Blokkolja a vegrehajtast!
|
|
\end{lstlisting}
|
|
\end{block}
|
|
|
|
\begin{block}{Fájl olvasás - Aszinkron (Callback)}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
fs.readFile('input.txt', 'utf8', (err, data) => {
|
|
if (err) {
|
|
console.error('Hiba:', err);
|
|
return;
|
|
}
|
|
console.log(data);
|
|
});
|
|
// Nem blokkolja a vegrehajtast!
|
|
\end{lstlisting}
|
|
\end{block}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile,shrink=10]{File System - Promises API}
|
|
\begin{block}{Fájl olvasás - Promise}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
const fs = require('fs').promises;
|
|
|
|
async function readData() {
|
|
try {
|
|
const data = await fs.readFile('input.txt', 'utf8');
|
|
console.log(data);
|
|
} catch (error) {
|
|
console.error('Hiba:', error);
|
|
}
|
|
}
|
|
|
|
readData();
|
|
\end{lstlisting}
|
|
\end{block}
|
|
|
|
\begin{block}{Fájl írás}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
await fs.writeFile('output.txt', 'Hello Node.js!', 'utf8');
|
|
\end{lstlisting}
|
|
\end{block}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile,shrink=10]{HTTP szerver létrehozása}
|
|
\begin{block}{Egyszerű HTTP szerver}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
const http = require('http');
|
|
|
|
const server = http.createServer((req, res) => {
|
|
res.statusCode = 200;
|
|
res.setHeader('Content-Type', 'text/plain; charset=utf-8');
|
|
res.end('Hello, Node.js szerver!\n');
|
|
});
|
|
|
|
const PORT = 3000;
|
|
server.listen(PORT, () => {
|
|
console.log(`Szerver fut: http://localhost:${PORT}`);
|
|
});
|
|
\end{lstlisting}
|
|
\end{block}
|
|
|
|
\vspace{0.3cm}
|
|
\centering
|
|
\kiemel{Böngészőben:} \texttt{http://localhost:3000}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile,shrink=10]{Process objektum}
|
|
\begin{block}{Process információk és műveletek}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
// Kornyezeti valtozok
|
|
console.log(process.env.NODE_ENV);
|
|
|
|
// Parancssori argumentumok
|
|
console.log(process.argv);
|
|
|
|
// Kilepes
|
|
process.exit(0); // Sikeres kilepes
|
|
process.exit(1); // Hiba
|
|
|
|
// Esemenyek
|
|
process.on('exit', (code) => {
|
|
console.log(`Kilepes kod: ${code}`);
|
|
});
|
|
\end{lstlisting}
|
|
\end{block}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile,shrink=10]{Path modul}
|
|
\begin{block}{Útvonal műveletek}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
const path = require('path');
|
|
|
|
// Utvonalak osszefuzese
|
|
const filePath = path.join(__dirname, 'data', 'users.json');
|
|
|
|
// Kiterjesztes lekerese
|
|
const ext = path.extname('file.txt'); // .txt
|
|
|
|
// Fajlnev bazisresz
|
|
const base = path.basename('/user/local/file.txt'); // file.txt
|
|
|
|
// Konyvtar resz
|
|
const dir = path.dirname('/user/local/file.txt'); // /user/local
|
|
|
|
// Abszolut utvonal
|
|
const abs = path.resolve('data', 'users.json');
|
|
\end{lstlisting}
|
|
\end{block}
|
|
\end{frame}
|
|
|
|
\begin{frame}[fragile,shrink=10]{Events - Eseménykezelés}
|
|
\begin{block}{EventEmitter használata}
|
|
\begin{lstlisting}[style=NodeJS]
|
|
const EventEmitter = require('events');
|
|
|
|
class MyEmitter extends EventEmitter {}
|
|
|
|
const myEmitter = new MyEmitter();
|
|
|
|
// Esemeny figyelese
|
|
myEmitter.on('event', (data) => {
|
|
console.log('Esemeny tortent:', data);
|
|
});
|
|
|
|
// Esemeny kivaltas
|
|
myEmitter.emit('event', {message: 'Hello Events!'});
|
|
\end{lstlisting}
|
|
\end{block}
|
|
|
|
\vspace{0.3cm}
|
|
\centering
|
|
Node.js \kiemel{eseményvezérelt} architektúrája alapja!
|
|
\end{frame}
|
|
|
|
\begin{frame}{Node.js vs. Böngésző}
|
|
\begin{table}
|
|
\centering
|
|
\begin{tabular}{|l|l|l|}
|
|
\hline
|
|
\textbf{Jellemző} & \textbf{Node.js} & \textbf{Böngésző} \\
|
|
\hline
|
|
JavaScript engine & V8, SpiderMonkey & V8, SpiderMonkey, stb. \\
|
|
\hline
|
|
DOM API & \kiemel{Nincs} & Van \\
|
|
\hline
|
|
window objektum & \kiemel{Nincs} & Van \\
|
|
\hline
|
|
global objektum & \kiemelZ{global} & window \\
|
|
\hline
|
|
File system & \kiemelZ{Van (fs)} & Nincs (limitált) \\
|
|
\hline
|
|
Modulrendszer & CommonJS, ESM & ESM \\
|
|
\hline
|
|
HTTP szerver & \kiemelZ{Készíthető} & Nem \\
|
|
\hline
|
|
Használat & Backend, CLI & Frontend \\
|
|
\hline
|
|
\end{tabular}
|
|
\end{table}
|
|
\end{frame}
|
|
|
|
\begin{frame}{Összefoglalás}
|
|
\begin{block}{Node.js alapok}
|
|
\begin{itemize}
|
|
\item V8 engine alapú JavaScript futtatókörnyezet
|
|
\item Event-driven, non-blocking I/O modell
|
|
\item Modulrendszer: CommonJS és ES Modules
|
|
\item Beépített modulok: fs, path, http, events
|
|
\item Process objektum: környezeti változók, argumentumok
|
|
\item File system műveletek: szinkron, aszinkron, Promise
|
|
\item HTTP szerver készítése
|
|
\item EventEmitter: saját események létrehozása
|
|
\end{itemize}
|
|
\end{block}
|
|
\end{frame}
|