Typescript Integratie van WebSocket Communicatie
description
Met deze prompt kan de gebruiker leren hoe hij realtime communicatie via WebSockets in Typescript kan opzetten met een sterke focus op type-veiligheid en foutafhandeling. Dit helpt bij het bouwen van interactieve en responsieve applicaties en vermijdt veelvoorkomende problemen bij netwerkcommunicatie. Het is uniek omdat het een praktijkgerichte aanpak biedt die niet overlapt met bestaande prompts over API-integratie of asynchrone functies.
prompt
Leg uit hoe ik WebSocket-communicatie kan implementeren in een Typescript-applicatie voor <beschrijving van het doel van de communicatie of het type data>. Geef voor ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Om WebSocket-communicatie te implementeren in een TypeScript-applicatie voor realtime updates van een multiplayer spel, volg je de onderstaande stappen. Ik geef je een overzicht voor zowel de server- als de client-side, inclusief voorbeelden en type-veiligheid.
---
### 1. WebSocket-server opzetten (bijvoorbeeld met Node.js en ws)
**Stap 1: Installeer benodigde pakketten**
```bash
npm install ws
```
**Stap 2: Maak een WebSocket-server in TypeScript**
```typescript
import WebSocket, { Server } from 'ws';
interface Message {
type: string;
payload: any;
}
const wss = new Server({ port: 8080 });
wss.on('connection', (ws: WebSocket) => {
console.log('Nieuwe verbinding');
ws.on('message', (message: string) => {
// Parseer het bericht en zorg voor type-veiligheid
const msg: Message = JSON.parse(message);
handleMessage(msg, ws);
});
ws.on('close', () => {
console.log('Verbinding gesloten');
});
});
function handleMessage(msg: Message, ws: WebSocket) {
switch (msg.type) {
case 'statusUpdate':
console.log('Status update ontvangen:', msg.payload);
// Broadcast naar alle clients
broadcast(msg);
break;
// Voeg andere cases toe
default:
console.warn('Onbekend berichttype:', msg.type);
}
}
function broadcast(msg: Message) {
const data = JSON.stringify(msg);
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
}
```
---
### 2. WebSocket-client in TypeScript
**Stap 1: Installeer de client afhankelijkheid (bijvoorbeeld geen extra pakket nodig, browser WebSocket API)**
**Stap 2: Client codevoorbeeld**
```typescript
// Defineer types voor berichten
interface StatusUpdate {
playerId: string;
status: string; // bv. 'ready', 'playing', 'waiting'
}
interface Message {
type: string;
payload: any;
}
const socket = new WebSocket('ws://localhost:8080');
// Verbinding maken
socket.onopen = () => {
console.log('Verbonden met server');
// Voorbeeld van het versturen van een statusupdate
const update: Message = {
type: 'statusUpdate',
payload: {
playerId: 'player1',
status: 'ready'
} as StatusUpdate
};
socket.send(JSON.stringify(update));
};
// Ontvangen van berichten
socket.onmessage = (event) => {
const msg: Message = JSON.parse(event.data);
switch (msg.type) {
case 'statusUpdate':
const status: StatusUpdate = msg.payload;
console.log(`Player ${status.playerId} is nu ${status.status}`);
break;
// Voeg andere cases toe
default:
console.warn('Onbekend berichttype:', msg.type);
}
};
// Foutafhandeling
socket.onerror = (error) => {
console.error('WebSocket fout:', error);
};
socket.onclose = () => {
console.log('Verbinding verbroken');
};
```
---
### 3. Samenvatting van belangrijke punten
- **Type-veiligheid**: Gebruik TypeScript interfaces voor berichten en payloads om type-veiligheid te garanderen.
- **Berichtenstructuur**: Gebruik JSON-serialisatie voor communicatie.
- **Verbinding beheren**: Controleer `readyState` bij het sturen van berichten en handel `onopen`, `onmessage`, `onclose`, en `onerror` af.
- **Broadcasten**: De server stuurt updates naar alle verbonden clients, bijvoorbeeld voor real-time multiplayer updates.
Met deze aanpak heb je een solide basis voor WebSocket-communicatie in je multiplayer game, volledig type-veilig en schaalbaar.
provider: deepseek
model: deepseek-chat
Zeker, ik leg uit hoe je WebSocket-communicatie kunt implementeren in een TypeScript-applicatie voor realtime multiplayer spelstatus.
## 1. Server Implementatie (Node.js + Express + ws)
```typescript
// server/types.ts
export interface Player {
id: string;
name: string;
position: { x: number; y: number };
health: number;
}
export interface GameState {
players: Map<string, Player>;
gameTime: number;
status: 'waiting' | 'playing' | 'ended';
}
export interface WebSocketMessage {
type: 'join' | 'move' | 'attack' | 'state_update' | 'error';
payload: any;
timestamp: number;
}
export interface JoinMessage {
type: 'join';
payload: { playerId: string; playerName: string };
}
export interface MoveMessage {
type: 'move';
payload: { playerId: string; position: { x: number; y: number } };
}
```
```typescript
// server/server.ts
import WebSocket, { WebSocketServer } from 'ws';
import { GameState, Player, WebSocketMessage } from './types';
const wss = new WebSocketServer({ port: 8080 });
const gameState: GameState = {
players: new Map(),
gameTime: 0,
status: 'waiting'
};
wss.on('connection', (ws: WebSocket) => {
console.log('Nieuwe speler verbonden');
// Stuur initiële game state naar nieuwe client
const initialMessage: WebSocketMessage = {
type: 'state_update',
payload: {
players: Array.from(gameState.players.values()),
gameTime: gameState.gameTime,
status: gameState.status
},
timestamp: Date.now()
};
ws.send(JSON.stringify(initialMessage));
ws.on('message', (data: WebSocket.Data) => {
try {
const message: WebSocketMessage = JSON.parse(data.toString());
handleMessage(ws, message);
} catch (error) {
const errorMessage: WebSocketMessage = {
type: 'error',
payload: { message: 'Ongeldig berichtformaat' },
timestamp: Date.now()
};
ws.send(JSON.stringify(errorMessage));
}
});
ws.on('close', () => {
console.log('Speler verbinding verbroken');
// Verwijder speler uit game state
// ... cleanup logic
});
});
function handleMessage(ws: WebSocket, message: WebSocketMessage) {
switch (message.type) {
case 'join':
const player: Player = {
id: message.payload.playerId,
name: message.payload.playerName,
position: { x: 0, y: 0 },
health: 100
};
gameState.players.set(player.id, player);
broadcastGameState();
break;
case 'move':
const playerToUpdate = gameState.players.get(message.payload.playerId);
if (playerToUpdate) {
playerToUpdate.position = message.payload.position;
broadcastGameState();
}
break;
default:
console.warn('Onbekend berichttype:', message.type);
}
}
function broadcastGameState() {
const updateMessage: WebSocketMessage = {
type: 'state_update',
payload: {
players: Array.from(gameState.players.values()),
gameTime: gameState.gameTime,
status: gameState.status
},
timestamp: Date.now()
};
wss.clients.forEach(client => {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify(updateMessage));
}
});
}
```
## 2. Client Implementatie
```typescript
// client/types.ts
export interface Player {
id: string;
name: string;
position: { x: number; y: number };
health: number;
}
export interface GameState {
players: Player[];
gameTime: number;
status: 'waiting' | 'playing' | 'ended';
}
export type MessageType = 'join' | 'move' | 'attack' | 'state_update' | 'error';
export interface WebSocketMessage {
type: MessageType;
payload: any;
timestamp: number;
}
```
```typescript
// client/websocket-client.ts
export class GameWebSocketClient {
private ws: WebSocket | null = null;
private reconnectAttempts = 0;
private maxReconnectAttempts = 5;
private reconnectInterval = 3000;
constructor(
private url: string,
private onMessage: (message: WebSocketMessage) => void,
private onStatusChange: (status: 'connecting' | 'connected' | 'disconnected' | 'error') => void
) {}
connect(): void {
this.onStatusChange('connecting');
try {
this.ws = new WebSocket(this.url);
this.ws.onopen = () => {
console.log('Verbonden met game server');
this.onStatusChange('connected');
this.reconnectAttempts = 0;
};
this.ws.onmessage = (event: MessageEvent) => {
try {
const message: WebSocketMessage = JSON.parse(event.data);
this.onMessage(message);
} catch (error) {
console.error('Fout bij verwerken bericht:', error);
}
};
this.ws.onclose = () => {
console.log('Verbinding verbroken');
this.onStatusChange('disconnected');
this.attemptReconnect();
};
this.ws.onerror = (error) => {
console.error('WebSocket fout:', error);
this.onStatusChange('error');
};
} catch (error) {
console.error('Verbindingsfout:', error);
this.attemptReconnect();
}
}
private attemptReconnect(): void {
if (this.reconnectAttempts < this.maxReconnectAttempts) {
this.reconnectAttempts++;
console.log(`Opnieuw verbinden... poging ${this.reconnectAttempts}`);
setTimeout(() => {
this.connect();
}, this.reconnectInterval);
}
}
sendMessage(message: WebSocketMessage): void {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
this.ws.send(JSON.stringify(message));
} else {
console.warn('WebSocket is niet verbonden');
}
}
joinGame(playerId: string, playerName: string): void {
const message: WebSocketMessage = {
type: 'join',
payload: { playerId, playerName },
timestamp: Date.now()
};
this.sendMessage(message);
}
movePlayer(playerId: string, position: { x: number; y: number }): void {
const message: WebSocketMessage = {
type: 'move',
payload: { playerId, position },
timestamp: Date.now()
};
this.sendMessage(message);
}
disconnect(): void {
if (this.ws) {
this.ws.close();
this.ws = null;
}
}
}
```
## 3. Gebruik in React Component (voorbeeld)
```typescript
// client/GameComponent.tsx
import React, { useEffect, useState } from 'react';
import { GameWebSocketClient } from './websocket-client';
import { GameState, WebSocketMessage } from './types';
const GameComponent: React.FC = () => {
const [gameState, setGameState] = useState<GameState | null>(null);
const [connectionStatus, setConnectionStatus] = useState<'connecting' | 'connected' | 'disconnected' | 'error'>('disconnected');
const [wsClient, setWsClient] = useState<GameWebSocketClient | null>(null);
useEffect(() => {
const client = new GameWebSocketClient(
'ws://localhost:8080',
handleMessage,
setConnectionStatus
);
setWsClient(client);
client.connect();
return () => {
client.disconnect();
};
}, []);
const handleMessage = (message: WebSocketMessage) => {
switch (message.type) {
case 'state_update':
setGameState(message.payload);
break;
case 'error':
console.error('Server error:', message.payload);
break;
default:
console.log('Onverwacht bericht:', message);
}
};
const handleJoinGame = () => {
if (wsClient) {
wsClient.joinGame('player-123', 'SpelerNaam');
}
};
const handleMove = (x: number, y: number) => {
if (wsClient) {
wsClient.movePlayer('player-123', { x, y });
}
};
return (
<div>
<div>Status: {connectionStatus}</div>
<button onClick={handleJoinGame} disabled={connectionStatus !== 'connected'}>
Join Game
</button>
{/* Game UI en controls */}
</div>
);
};
export default GameComponent;
```
## 4. Package.json Dependencies
```json
{
"dependencies": {
"ws": "^8.14.2",
"@types/ws": "^8.5.10",
"express": "^4.18.2",
"@types/express": "^4.17.21"
}
}
```
## Belangrijke Kenmerken:
1. **Type Safety**: Volledige TypeScript typen voor alle berichten en statussen
2. **Error Handling**: Robuuste foutafhandeling en reconnect logica
3. **Status Management**: Duidelijke verbindingsstatus monitoring
4. **Broadcast Functionaliteit**: Server stuurt updates naar alle connected clients
5. **Modulair Ontwerp**: Scheiding van concerns met duidelijke interfaces
Dit patroon zorgt voor realtime communicatie met type-veiligheid en betrouwbare verbindingsafhandeling voor je multiplayer spel.
error: Generation failed [deepseek] prompt_id=3534 locale=fr err=DeepSeek connection/timeout | Generation failed [deepseek] prompt_id=3534 locale=pt err=DeepSeek connection/timeout