136 lines
3.3 KiB
Markdown
136 lines
3.3 KiB
Markdown
|
||
# Node WebSocket-Server (HTTP + WS) mit Docker
|
||
|
||
Dieses Projekt bietet einen einfachen HTTP- und WebSocket-Server in Node.js, der über Docker betrieben wird. Ziel ist es, eine lauffähige, leicht erweiterbare Entwicklungsumgebung bereitzustellen –
|
||
z.B. für WebSocket-basierte Anwendungen.
|
||
|
||
Der Docker-Container ist so konfiguriert, dass er statische Dateien ausliefert und WebSocket-Verbindungen unterstützt.
|
||
Es wird ein Reverse-Proxy (Apache) verwendet, um den Container über HTTPS erreichbar zu machen.
|
||
Dabei wird der Pfad `/node` verwendet, um den Container zu erreichen.
|
||
|
||
|
||
## 🔧 Projektstruktur
|
||
|
||
```
|
||
.
|
||
├── Dockerfile
|
||
├── package.json
|
||
├── volume/
|
||
│ ├── server.js # Hauptserver
|
||
│ ├── public/ # Statische Dateien
|
||
│ │ ├── index.html
|
||
│ │ └── script.js
|
||
```
|
||
|
||
## 🚀 Starten der Anwendung
|
||
|
||
### 1. Build des Docker-Images
|
||
|
||
Erfordert Admin-Rechte auf dem Host-System.
|
||
|
||
```bash
|
||
docker build -t node-ws-server .
|
||
```
|
||
|
||
### 2. Starten des Containers mit Volume-Bindung
|
||
|
||
Erfordert Admin-Rechte auf dem Host-System.
|
||
|
||
```bash
|
||
docker run -v "$PWD/volume":/app/volume node-ws-server
|
||
```
|
||
|
||
Über den Apache-Reverse-Proxy ist der Server unter
|
||
|
||
```
|
||
https://medinf.efi.th-nuernberg.de/node
|
||
```
|
||
|
||
erreichbar gemacht.
|
||
|
||
---
|
||
|
||
## 🧠 Hinweise zum Reverse Proxy
|
||
|
||
Der Apache-Webserver leitet Anfragen über `/node` an den internen Node.js-Server weiter. Damit der Reverse-Proxy funktioniert:
|
||
|
||
- Statische Dateien wie `script.js` müssen in `index.html` mit relativem Pfad eingebunden werden (z.B. `./script.js`), **nicht** mit `/node/script.js`.
|
||
- WebSocket-Verbindungen müssen den vollen Proxy-Pfad verwenden, z.B.:
|
||
|
||
```js
|
||
const ws = new WebSocket('wss://medinf.efi.th-nuernberg.de/node/ws');
|
||
```
|
||
|
||
Apache kümmert sich darum, `/node` zu entfernen und an den Container weiterzuleiten.
|
||
|
||
---
|
||
|
||
## 🧠 Funktionsweise von `server.js`
|
||
|
||
### 1. Statische Datei-Auslieferung
|
||
|
||
```js
|
||
const server = http.createServer((req, res) => { ... });
|
||
```
|
||
|
||
- Liefert Dateien aus dem Verzeichnis `volume/public/`.
|
||
- Wenn eine Anfrage ein Verzeichnis ist, wird automatisch `index.html` geladen.
|
||
- HTTP 404 wird zurückgegeben, wenn eine Datei nicht existiert.
|
||
|
||
---
|
||
|
||
### 🔌 2. WebSocket-Unterstützung
|
||
|
||
```js
|
||
const wss = new WebSocketServer({ noServer: true });
|
||
```
|
||
|
||
- WebSocket wird auf `/ws` unterstützt.
|
||
- Die `upgrade`-Verbindung wird manuell gehandhabt.
|
||
- Nur WebSocket-Verbindungen auf `/ws` werden akzeptiert; alles andere wird verworfen.
|
||
|
||
---
|
||
|
||
|
||
## 📁 Beispiel: `index.html` und `script.js`
|
||
|
||
### `volume/public/index.html`
|
||
|
||
```html
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>WebSocket Client</title>
|
||
</head>
|
||
<body>
|
||
<h1>WebSocket Client</h1>
|
||
<input id="message" placeholder="Type a message">
|
||
<button id="send">Send</button>
|
||
<div id="messages"></div>
|
||
|
||
<script src="./script.js"></script>
|
||
</body>
|
||
</html>
|
||
```
|
||
|
||
### `volume/public/script.js`
|
||
|
||
```js
|
||
const ws = new WebSocket('wss://medinf.efi.th-nuernberg.de/node/ws');
|
||
|
||
ws.onmessage = (e) => {
|
||
const div = document.createElement('div');
|
||
div.textContent = `Server: ${e.data}`;
|
||
document.getElementById('messages').appendChild(div);
|
||
};
|
||
|
||
document.getElementById('send').onclick = () => {
|
||
const input = document.getElementById('message');
|
||
ws.send(input.value);
|
||
input.value = '';
|
||
};
|
||
```
|
||
|
||
---
|
||
|