Native Websocket-JSON-Kommunikation reaktivieren

Question

Ich versuche, einen Websocket-Client einzurichten, der über JSON mit einem Websever kommuniziert. Ich finde keine guten Beispiele online.

Ich fand nur den Code online:

var ws = new WebSocket('ws://host.com/path'); 

ws.onopen =() => { 
    // connection opened 
    ws.send('something'); // send a message 
}; 

ws.onmessage = (e) => { 
    // a message was received 
    console.log(e.data); 
}; 

ws.onerror = (e) => { 
    // an error occurred 
    console.log(e.message); 
}; 

ws.onclose = (e) => { 
    // connection closed 
    console.log(e.code, e.reason); 
}; 

Ich weiß nicht, wie Sie diesen Code in meinen app-Code zu integrieren, zu funktionieren. Muss ich einige Pakete dafür installieren? Ich mache ein Projekt für mein Studium, und am Ende sollte ich eine Quiz-App haben, die sich mit einem Server verbindet, um die Fragen und Antworten für das Spiel zu bekommen.

Danke für Anny Hilfe!

Answer 1

Sie benötigen nichts anderes, um mit einem WebSocket in reaktionsnativen (oder einer relativ neuen JS-Umgebung for that matter) zu arbeiten. Das Beispiel, das Sie gefunden haben, deckt so ziemlich alles ab, was Sie benötigen, um loszulegen. Im nächsten Schritt binden Sie das an Ihre React-Logik. Zum Beispiel können Sie eine WebSocketController Komponente erstellen, die (Details weggelassen) wie dieses

class WebSocketController extends React.Component { 
    componentDidMount(){ 
    this.ws = new WebSocket('ws://host.com/path'); 
    this.ws.onmessage = this.handleMessage.bind(this); 
    this.ws.onerror = //... 
    } 
    handleMessage(e){ 
    // dispatch event (á la redux, flux), or do something else 
    } 
    componentWillUnmount(){ 
    // close WS 
    } 
} 

Render diese in Ihrer React Hierarchie aussehen würde, und es wird entlang der Rest der Komponenten gestartet werden. Wenn Sie etwas Spezifischeres brauchen, lassen Sie es uns wissen.