web-dev-qa-db-fra.com

React native et socket.io noeud ne fonctionne pas

Ci-dessous se trouve mon composant natif réactif et le code du serveur server.js que j'essaie de connecter à mon backend de nœud Web.

Mon code de réaction s'exécute sur le même ordinateur que le serveur. J'ai trouvé tellement de réponses variées ici, et github, dont je ne peux pas travailler.

J'ai également trouvé cette question qui n'a jamais été répondue, et cette question a une réponse, que je ne peux pas obtenir (a été posée il y a plus d'un an)

J'ai trouvé cet article et j'ai essayé de modifier mon code en fonction de ces directives, mais cela n'a pas fonctionné.

réagir code 

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);
});

J'utilise les versions de packages suivantes

"expo": "^16.0.0",
"react": "16.0.0-alpha.6",
"react-native": "^0.43.4",
"socket.io-client": "^1.7.3"
javascriptnode.jsreact-nativewebsocketsocket.io
18
peter flanagan

Je crois que ça devrait être

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

Ce qui fonctionne pour moi.

Je me souviens avoir rencontré ce genre de problèmes lors de l'utilisation de React Native. De nombreux didacticiels socket.io (y compris celui de leur page) supposent que vous utilisez un ancien style d'importation JS via des balises de script dans un document HTML. Il semble que socket.io ait changé l'espace de noms car je me souviens qu'il s'agissait de socket.io-client/socket.io il y a quelque temps si la mémoire est bonne ...

6
klvs

Le code de votre serveur semble correct. Bien que vous devriez vérifier si vous pouvez vous connecter à son socket via un autre client.

Quoi qu'il en soit, essayez ceci pour réagir au code natif.

Importer par:

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

Dans votre composant:

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!")
    })
  }
5
Kaiwen Huang