2016-09-27 182 views
1

我聽說Socket.io在React Native中不能正常工作,所以我決定改用普通的WebSocket。React Native與WebSocket不起作用

我使用node.js來實現WebSocket服務器,並不難。有了瀏覽器,我嘗試過所有的工作,但是使用React native,沒有任何成功。

這些是我試圖實現的WebSocket服務器:

  • 快遞-WS
  • WS

快遞-WS只是沒有沒有任何錯誤信息的工作。只是它說未能連接一些東西。

因此,我將模塊更改爲ws,並且此模塊應該是客戶端和服務器都需要的,所以我做了。服務器在工作,但是當與AVD的Android應用程序,它甾體抗炎藥:

需要未知模塊「URL」。如果您確信該模塊是存在的, 嘗試重新啓動打包或運行「故宮安裝」 。

因此,我完全刪除了node_modules目錄並重新安裝它們,但又出現了同樣的錯誤。

我正在使用節點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); 
     }); 
    } 
    ... 

爲了避免命名衝突,我使用WebSock代替的WebSocket時需要ws模塊,但這不是問題。

有沒有我錯過的東西? React Native doc沒有太多解釋,很難找到工作示例。感謝您閱讀,任何建議將非常感謝。

+0

我也堅持了這個問題,首先嚐試刪除 '常量的WebSocket =要求( 'WS')' WebSicket默認情況下,在RN提供。 讓我知道它是否有效 – MTo

+0

我有一個類似的問題,我也在RN代碼中使用'localhost:3000',直到我想我的後端沒有運行在我的設備的'localhost'上,而是在我的計算機的'localhost'上。一旦我用我的本地IP地址替換它,它就起作用了。 – user132169

回答

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