258 lines
4.0 KiB
Markdown
258 lines
4.0 KiB
Markdown
---
|
||
marp: true
|
||
theme: gaia
|
||
paginate: true
|
||
backgroundColor: #fff
|
||
header: "Web Engineering – DHBW Stuttgart"
|
||
footer: "Michael Czechowski – SoSe 2026"
|
||
---
|
||
|
||
<style>
|
||
:root {
|
||
--color-foreground: #1a1a2e;
|
||
--color-highlight: #005f8a;
|
||
--color-dimmed: #4a6a7a;
|
||
}
|
||
section.invert {
|
||
--color-foreground: #fff;
|
||
}
|
||
section {
|
||
font-size: 1.7rem;
|
||
}
|
||
h1 {
|
||
color: #005f8a;
|
||
}
|
||
section.invert h1 {
|
||
color: #fff;
|
||
}
|
||
pre {
|
||
background: #0f1e2e;
|
||
color: #00b4d8;
|
||
border-radius: 8px;
|
||
border-left: 3px solid #005f8a;
|
||
}
|
||
pre code {
|
||
background: transparent;
|
||
color: inherit;
|
||
}
|
||
code {
|
||
background: #1a3a4a;
|
||
color: #00b4d8;
|
||
padding: 0.15em 0.4em;
|
||
border-radius: 4px;
|
||
}
|
||
a {
|
||
color: var(--color-highlight);
|
||
}
|
||
</style>
|
||
|
||
<!-- _class: invert -->
|
||
<!-- _header: '' -->
|
||
<!-- _backgroundColor: #001520 -->
|
||
|
||
# node.js – Advanced
|
||
|
||
---
|
||
|
||
# node.js – Fun Facts
|
||
|
||
- Entwickelt von Ryan Dahl in 2009
|
||
- Erste serverseitige Laufzeitumgebung in JavaScript (C++)
|
||
- Inspiriert von Nginx (Non-blocking I/O)
|
||
|
||
**Alternativen heute:**
|
||
- **Deno** (2020): Rust, Tokio
|
||
- **Bun** (2022): Zig
|
||
|
||
---
|
||
|
||
# process – Prozess-Steuerung
|
||
|
||
```javascript
|
||
process.on("SIGINT", () => {
|
||
console.log("Received SIGINT. Closing server...");
|
||
server.close(() => {
|
||
console.log("Server closed.");
|
||
process.exit(0);
|
||
});
|
||
});
|
||
|
||
// Signale
|
||
process.exit(0); // Erfolgreich
|
||
process.exit(1); // Fehler
|
||
```
|
||
|
||
---
|
||
|
||
# node.js Module System
|
||
|
||
```javascript
|
||
// ES Modules
|
||
import express from 'express';
|
||
import { port } from './src/config/constants.js';
|
||
|
||
// CommonJS
|
||
const fs = require('fs');
|
||
```
|
||
|
||
---
|
||
|
||
# HTTP Request mit node-fetch
|
||
|
||
```javascript
|
||
// Node.js 18+ hat fetch eingebaut
|
||
const res = await fetch('https://api.example.com/data');
|
||
const data = await res.json();
|
||
|
||
// Ältere Versionen: node-fetch
|
||
import fetch from 'node-fetch';
|
||
```
|
||
|
||
---
|
||
|
||
# Web Server, Builder, Bundler
|
||
|
||
```bash
|
||
# Boilerplates erstellen
|
||
npm create vite@latest my-app -- --template react
|
||
npm create svelte@latest
|
||
npm create astro@latest
|
||
|
||
# nuxt
|
||
npm install nuxt
|
||
npm run dev
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
# Express – Grundlagen
|
||
|
||
```javascript
|
||
import express from 'express';
|
||
const app = express();
|
||
|
||
app.listen(port, () => {
|
||
console.log(`Server läuft auf Port ${port}`);
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
# Express – Middleware
|
||
|
||
```javascript
|
||
app.use(express.json());
|
||
|
||
app.use('/api', (req, res, next) => {
|
||
console.log('Time:', Date.now());
|
||
next();
|
||
});
|
||
|
||
app.use((req, res, next) => {
|
||
console.log('Middleware 2');
|
||
next();
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
# Express – CRUD Routes
|
||
|
||
```javascript
|
||
app.get('/api/:key', async (req, res) => {
|
||
const context = cache.get(req.params.key);
|
||
res.json({ context });
|
||
});
|
||
|
||
app.post('/api/:key', async (req, res) => {
|
||
const payload = req.body;
|
||
res.json({ created: cache.set(req.params.key, payload) });
|
||
});
|
||
|
||
app.put('/api/:key', async (req, res) => {
|
||
const payload = req.body;
|
||
res.json({ updated: cache.update(req.params.key, payload) });
|
||
});
|
||
|
||
app.delete('/api/:key', async (req, res) => {
|
||
cache.remove(req.params.key);
|
||
res.json({ deleted: req.params.key });
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
# Express – server.listen
|
||
|
||
```javascript
|
||
const server = app.listen(port, () => {
|
||
console.log(`Server läuft auf Port ${port}`);
|
||
});
|
||
|
||
server.on('error', (err) => {
|
||
console.error('Server error:', err);
|
||
});
|
||
|
||
server.close(() => {
|
||
console.log('Server geschlossen');
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
# WebSockets
|
||
|
||
```javascript
|
||
import { WebSocketServer } from 'ws';
|
||
|
||
const wss = new WebSocketServer({ port: 8080 });
|
||
|
||
wss.on('connection', (ws) => {
|
||
console.log('Client verbunden');
|
||
|
||
ws.on('message', (data) => {
|
||
console.log('Empfangen:', data.toString());
|
||
ws.send('Pong');
|
||
});
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
<!-- _header: '' -->
|
||
<!-- _footer: '' -->
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
# Fragen?
|
||
|
||
1. Wozu dient `process.on('SIGINT')`?
|
||
2. Was macht `app.use(express.json())`?
|
||
3. Wie erstellst du einen GET-Endpoint mit Express? |