javascript - example - React nativo y el nodo socket.io no funciona

socket io tutorial

Question

A continuación se muestra mi componente nativo de reacción y el código server.js de nodo que estoy tratando de conectar a mi nodo websocket back-end.

Mi código de reacción se ejecuta en la misma computadora que el servidor. He encontrado tantas respuestas diferentes aquí, y github, ninguna de las cuales puedo trabajar.

También encontré esta pregunta que nunca fue respondida, y esta pregunta tiene una respuesta, que no puedo poner en práctica (me preguntaron hace más de un año)

Encontré este artículo e intenté modificar mi código de acuerdo con estas pautas, pero esto no funcionó.

código de reacción

import React from ''react'';
import { StyleSheet, Text, View, Image } from ''react-native'';

const io = require(''socket.io-client/socket.io'');
let socket = io(''http://localhost:3000'');

export default class App extends React.Component {

    constructor(props) {
        super(props);
        console.log(socket);
    }

    render() {
        return (
            <View>
                <Text>Websocket</Text>
            </View>
        );
    }
}

server.js

const express = require(''express'');
const http = require(''http'')
const socketio = require(''socket.io'');

const app = express();
const server = http.Server(app);
const websocket = socketio(server);
server.listen(3000, () => console.log(''listening on *:3000''));

console.log(websocket)

// The event will be called when a client is connected.
websocket.on(''connection'', (socket) => {
  console.log(''A client just joined on'', socket.id);
});

Estoy usando las siguientes versiones de paquetes

"expo": "^16.0.0",
"react": "16.0.0-alpha.6",
"react-native": "^0.43.4",
"socket.io-client": "^1.7.3"

Answer 1

Gracias, Peter. En mi opinión, el artículo que ha encontrado no es útil porque está tratando de conectarse al host que sirve la página. De acuerdo con el ejemplo en la página socket.io , intente asegurarse de que esta línea funcione: const io = require(''socket.io-client/socket.io''); y conectarse sin enlace: let socket = io();

Funcionó para mí, pero solo en el navegador en la misma computadora. Creo que cuando va a probar en el dispositivo, debe especificar su IP en lugar de localhost.

Buena suerte :)

Answer 2

Tu código de servidor parece estar bien. Aunque debe verificar si puede conectarse a su socket a través de otro cliente.

De todos modos intente esto para reaccionar el código nativo.

Importar por:

import io from ''socket.io-client/socket.io''

En tu componente haz:

componentDidMount () {
    const socket = io(YOURURL, {
      transports: [''websocket'']
    })

    socket.on(''connect'', () => {
      console.log("socket connected")
      socket.emit(''YOUR EVENT TO SERVER'', {})
      socket.on(''EVENT YOU WANNA LISTEN'', (r) => {
      })
    })

    socket.on(''connect_error'', (err) => {
      console.log(err)
    })

    socket.on(''disconnect'', () => {
      console.log("Disconnected Socket!")
    })
  }

Answer 3

Yo creo que debería ser

const io = require(''socket.io-client'');

Lo cual funciona para mi

Recuerdo que me encontré con este tipo de problemas cuando uso reaccionar nativo. Muchos tutoriales de socket.io (incluido el de su página) suponen que está utilizando un estilo anterior de importación de JS mediante etiquetas de script en un documento HTML. Parece que socket.io cambió el espacio de nombres, ya que recuerdo que era socket.io-client/socket.io algún tiempo si la memoria sirve ...