Question

我的反应原生语一直在说[错误：websocket错误]。我已经在网上关注了一些教程，但仍然无法使其正常运行。任何人都知道是否存在语法错误或者从此代码中更改一些内容？

中提到的完整反应代码

ReactNative代码：

import React, {Component} from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    AsyncStorage,
    StyleSheet
} from 'react-native';
const io = require('socket.io-client');

export default class App extends Component{
    constructor(props){
        super(props);

        this.componentDidMount = this.componentDidMount.bind(this);
        this.onPress = this.onPress.bind(this);
    }

    componentDidMount () {
        const socket = io('http://localhost:3000', {
            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!")
        })
    }

    onPress(){
        // socket.emit('message', {data: 'data'});
    }

    render() {
        return (
            <View style={{alignItems: 'center', padding: 20}}>
                <Text>SOCKET IO</Text>
                <TouchableOpacity
                    style={{backgroundColor: '#EEE',  height: 50,  width: 200,  borderColor: 'black',  alignItems: 'center',  padding: 15}}
                    onPress={()=>this.onPress()}
                >
                <Text>CLICK</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

在我的案例中使用此const io = require('socket.io-client/socket.io');无法正常工作

这是我对package.json

的依赖

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0",
    "socket.io-client": "^2.0.1"
  },
  "devDependencies": {
    "babel-jest": "20.0.1",
    "babel-preset-react-native": "1.9.2",
    "jest": "20.0.1",
    "react-test-renderer": "16.0.0-alpha.6"
  },

Answer 1

我不知道为什么，但在我的情况下使用localhost：3000不起作用，但使用IP地址完美地工作192.168.3.110:3000

Answer 2

我正在使用带有React Native的Socket IO来设置Laravel Echo，并且我还观察到，如果我使用'http://localhost'，我的RN客户端将无法从Laravel服务器（在Vagrant上使用Homestead）接收事件。或在我的情况下为'http://app.test'。我必须使用在Homestead.yaml文件中设置的IP地址192.168.10.10。

所以在我的RN App.js文件中是这样：

componentDidMount() {
    window.io = require('socket.io-client');

    window.Echo = new Echo({
        broadcaster: 'socket.io',
        host: 'http://192.168.10.10:6001'
    });

    window.Echo.channel('parking_session')
        .listen('TimeAlmostUp', (e) => {
            console.warn('Got event...');
            console.warn(e);
        });
}

Answer 3

Localhost运作良好，但请记住一件事，每次您运行react-native run-android时，请不要忘记运行，同时还要反转机制adb reverse tcp:3000 tcp:3000。

React Native socket.io一直在说

3 个答案: