web-dev-qa-db-fra.com

Implémentation de Socket.io avec ReactJS ES6

Je ne parviens pas à intégrer le client SocketIO à mon projet car le projet est configuré de manière isomorphe. Après avoir inclus le fichier de socket dans mon html de base, j'essaie d'appeler let socket = io(); dans le composant didmount de l'un de mes composants, mais initialement après l'avoir enregistré dans ma console, il n'est pas défini. Lorsque je route vers un autre composant et que je reviens sur ce composant avec cette variable de socket, il se remplit de données. Je suppose que ce que je veux dire par là, c'est qu'il n'initialise pas dans mon composant ce qu'est le socket, il semble qu'il faut attendre comment puis-je contourner cela?

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>

Cela fonctionne très bien, entre autres, lors de la connexion au serveur, cela signifie qu'un utilisateur se connecte et se déconnecte du serveur, mais la manipulation du client m'a laissé perplexe.

node.jsreactjssocket.io
22
Karan

Il existe probablement d'autres solutions, mais les solutions suivantes fonctionnent pour moi:

1) npm installe le paquetage côté client socket

2) importer un socket dans le composant le plus racine de tous les composants nécessitant une fonctionnalité de socket

3) des écouteurs d’événements de socket côté serveur de raccordement dans l’un des événements de cycle de vie (constructor/componentWillMount, componentDidMount)

4) transmettre un objet socket via des accessoires s'il est judicieux de gérer certains événements de serveur dans des composants enfants

exemple:

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

Vous pouvez instancier une socket en dehors du composant et l'utiliser à l'intérieur du composant. Comme ça: 

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

J'ai eu le même problème étrange avec socket.io et React. Je voulais déterminer une ligne claire d'injection de dépendance avec des accessoires aux autres composants de mon fichier main.jsx Il s'est avéré que je n'avais qu'à initialiser io comme ça ...

const socket = window.io();

Et c'était ça. Ça a marché. 

0
Mario Legenda