React Native 与 WebSocket 不起作用

Question

我听说 Socket.io 在 React Native 中不能正常工作，所以我决定改用普通的 WebSocket。

我正在使用 node.js 来实现 WebSocket 服务器，这并不难。使用浏览器，我尝试的所有方法都有效，但是使用 React Native，没有成功。

这些是我尝试实现 websocket 服务器的方法：

• 快递-ws
• WS

express-ws 在没有任何错误消息的情况下无法正常工作。只是它说无法连接某些东西。

所以我把模块改成了ws，这个模块应该是客户端和服务器都需要的，所以我做了。服务器已工作，但是在 AVD 上使用 android 的应用程序中时，它说：

需要未知模块“url”。如果您确定该模块在那里，请尝试重新启动打包程序或运行“npm install”。

所以我完全删除了 node_modules 目录并重新安装它们，但再次出现相同的错误。

我正在使用 node v6.2.2，react-native-cli 1.0.0，react-native 0.33.0。

这是带有 ws 模块的服务器代码（与 ws 模块自述文件相同）：

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 3000 });

wss.on('connection', (socket) => {
    socket.on('message', (msg) => {
        console.log('Received: ' + msg);
    });

    socket.send('something');
});

这是客户端：

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

const WebSocket = require('ws');

class wschat extends Component {
    constructor() {
        super();
    }
    componentDidMount() {
        var socket = new WebSocket("ws://localhost:3000");

        socket.on('open', () => {
            socket.send('something');
        });
        socket.on('message', (data, flags) => {
            console.log(data);
            console.log(flags);
        });
    }
    ...

为了避免命名冲突，我在需要 ws 模块时使用了 WebSock 而不是 WebSocket，但这不是问题。

有什么我错过的吗？React Native doc 没有太多解释，很难找到工作示例。感谢您的阅读，任何建议将不胜感激。

Answer 1

最新的react native支持 websocket，所以我们不必依赖 3rd 方 websocket 客户端库。

以下示例基于react native 0.45，项目由 生成create-react-native-app。

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

export default class App extends React.Component {

    constructor() {
        super();

        this.state = {
            echo: ''
        };
    }

    componentDidMount() {
        var socket = new WebSocket('wss://echo.websocket.org/');

        socket.onopen = () => socket.send(new Date().toGMTString());

        socket.onmessage = ({data}) => {
            console.log(data);

            this.setState({echo: data});

            setTimeout(() => {
                socket.send(new Date().toGMTString());
            }, 3000);
        }
    }

    render() {
        return (
            <View>
                <Text>websocket echo: {this.state.echo}</Text>
            </View>
        );
    }
}