React Native 与 WebSocket 不兼容。

Question

我听说在React Native中Socket.io无法正常工作，因此我决定改用普通的WebSocket。

我正在使用node.js来实现WebSocket服务器，这并不难。在浏览器中，我尝试的所有方法都可以正常工作，但在React Native中，没有一种方法成功。

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

• express-ws
• ws

express-ws根本无法工作，没有任何错误消息。它只是说连接失败了。

所以我把模块改成了ws，这个模块需要在客户端和服务器端都引入，所以我这样做了。服务器可以正常工作，但是在使用安卓模拟器的应用程序中，它会显示：

需要未知模块“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文档没有太多的解释，而且很难找到可行的示例。感谢您的阅读，任何建议都将非常感激。

- modernator

---

我也遇到了这个问题，首先尝试删除const WebSocket = require('ws')，因为 WebSicket 在 RN 中是默认提供的。如果有效请让我知道。 - MTo

我之前遇到过一个类似的问题，我在 RN 代码中也使用了 localhost:3000，但后来发现我的后端并没有运行在设备的 localhost 上，而是在我的电脑的 localhost 上。当我将其替换为本地 IP 地址后，就解决了这个问题。 - Jessy

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

- derek.z

---

我已经成功地使用WebSockets实现了连接，但是它根本没有发送消息（React Native）。就像socket.send...在React Native上无法工作。 - ayman_rahmon

Answer 2

在您的React Native文件夹中安装此包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;

- Senuda Jayalath