it-swarm.com.de

Socket.io mit ReactJS ES6 implementieren

Ich habe Probleme beim Einbinden des SocketIO-Clients in mein Projekt, da ich mein Projekt isomorphisch einrichten lässt. Nachdem ich die Socket-Datei in meine Basis-HTML aufgenommen habe, versuche ich, let socket = io(); im Componentdidmount einer meiner Komponenten aufzurufen, aber nachdem ich sie in meiner Konsole protokolliert habe, ist sie undefiniert. Wenn ich mit dieser Socketvariablen zu einer anderen Komponente route und zu dieser Komponente zurückkomme, wird sie mit einigen Daten gefüllt. Ich denke, mein Punkt hier ist, dass in meiner Komponente nicht der Sockel initialisiert wird. Es scheint, als müsste er warten, wie kann ich das umgehen?

Component.jsx

componentDidMount() {
    let socket = io();
    console.log(socket);
  }

Base.html

<!doctype html>
<html lang="">

<head>
    <title>TITLE</title>

    META

    LINK

</head>

<div class="app">CONTENT</div>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).Push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXX-X', 'auto');
    ga('send', 'pageview');
</script>
<script type="text/javascript" charset="utf-8" src="/assets/app.js"></script>

<script src="/socket.io/socket.io.js"></script>
<script>
        var socket = io();
</script>

</body>
</html>

Das funktioniert gut, ich für Sachen wie beim Verbinden vom Server, es emittiert, dass ein Benutzer sich verbindet und den Server abbricht, nur die Client-Manipulation hat mich verwirrt.

22
Karan

Es gibt wahrscheinlich andere Lösungen, aber die folgenden funktionieren für mich:

1) npm das socket-clientseitige Paket installieren

2) Importieren Sie Socket in die Root-Komponente aller Komponenten, die Socket-Funktionalität benötigen

3) Anschließen serverseitiger Socket-Ereignis-Listener in einem der Lebenszyklusereignisse (constructor/componentWillMount, componentDidMount)

4) Socket-Objekt durch Requisiten weiterleiten, wenn es sinnvoll ist, bestimmte Serverereignisse in untergeordneten Komponenten zu behandeln

beispiel:

import io from 'socket.io-client'
let socket = io(`http://localhost:8000`)

class App extends Component {
  state = { data: {} }

  componentDidMount() {    
    socket.on(`server:event`, data => {
      this.setState({ data })
    })
  }

  sendMessage = message => {
    socket.emit(`client:sendMessage`, message)
  }

  render () {
    return (
      <Child 
        socket = { socket } 
        sendMessage = { this.sendMessage }
      />
    )
  }
}
60
azium

Sie können einen Socket außerhalb der Komponente instanziieren und innerhalb der Komponente verwenden. So was: 

import React, { Component } from 'react'  
import io from 'socket.io-client'

var socket = io()

class MyComponent extends Component {
    componentDidMount() {
        // You can use the socket inside the componet
        socket.on('message', msg => console.log(msg))
    }
}
0
gedhean

Ich hatte das selbe seltsame Problem mit socket.io und React. Ich wollte eine klare Linie der Abhängigkeitsinjektion mit Requisiten zu anderen Komponenten aus meiner main.jsx-Datei ermitteln. Es stellte sich heraus, dass ich nur so initialisieren musste ...

const socket = window.io();

Und das war es. Es funktionierte. 

0
Mario Legenda