Question

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

我正在使用node.js来实现WebSocket服务器，并不难。对于浏览器，我尝试了所有工作，但使用React本机，没有成功。

这些是我尝试实现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，因此我们不必依赖第三方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>
        );
    }
}

Answer 2

在您的本机文件夹中安装此软件包 npm install websocket。相关 Github 存储库的链接是 this

import React, { useEffect } from 'react';
import { w3cwebsocket as W3CWebSocket } from "websocket";
import { Text} from 'react-native';

var client = new W3CWebSocket('ws://localhost:8080/', 'echo-protocol');

function App() {

    client.onopen = function() {
    console.log('WebSocket Client Connected');

      function sendNumber() {
         if (client.readyState === client.OPEN) {
            var number = Math.round(Math.random() * 0xFFFFFF);
            client.send(number.toString());
            setTimeout(sendNumber, 1000);
         }
      }
      sendNumber();
     };

     client.onclose = function() {
       console.log('echo-protocol Client Closed');
     };

     client.onmessage = function(e) {
        if (typeof e.data === 'string') {
          console.log("Received: '" + e.data + "'");
        }
    };  
    return (
     
        <Text>Practical Intro To WebSockets.</Text>
     
    );
}

export default App;

使用WebSocket的React Native不起作用

2 个答案: