bugfix> react-native > 投稿

この記事に従って、React Nativeのwebsocketから始めています。

https://medium.com/dailyjs/combining-react-with-socket-io-for-real-time-goodness-d26168429a34

それはよく書かれており、私がそれを機能させることができるなら、私が最初から良い基礎を与えるべきです。コードはReact用に作成されたと思いますが、React Nativeで動作することを願っています。

3つのファイルのコードをコピーしましたが、エラーなしで実行されますが(サーバーとクライアントの両方)、App.jsクライアントは更新されず、「サーバーからのタイマー値:タイムスタンプがまだありません」と表示されます

私は次のアプリケーションを作成しました:create-react-native-appソケットタイマー

私がインストールした新しいディレクトリに:npm i-socket.ioを保存 その後npm i --save socket.io-client

私の3つのファイルは次のとおりです。

server.jshttps://pastebin.com/zgp6pdjq

const io = require('socket.io')();
io.on('connection', (client) => {
  client.on('subscribeToTimer', (interval) => {
  console.log('client is subscribing to timer with interval ', interval);
setInterval(() => {
  client.emit('timer', new Date());
}, interval);
});
});
const port = 8000;
io.listen(port);
console.log('listening on port ', port);

api.jshttps://pastebin.com/aLiiyMU1

import openSocket from 'socket.io-client';
const  socket = openSocket('http://localhost:8000');
function subscribeToTimer(cb) {
  socket.on('timer', timestamp => cb(null, timestamp));
  socket.emit('subscribeToTimer', 1000);
}
export { subscribeToTimer };

App.jshttps://pastebin.com/vxfWEaPz

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { subscribeToTimer } from './api';
export default class App extends React.Component {
constructor(props) {
  super(props);
  subscribeToTimer((err, timestamp) => this.setState({ 
    timestamp 
  }));
}
state = {
  timestamp: 'no timestamp yet'
};
  render() {
    return (
      <View style={styles.container}>
        <Text>Timer value from the server: {this.state.timestamp}</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

1つのコンソールウィンドウでサーバーを起動します。ノードサーバー 別のコンソールウィンドウでクライアントアプリを起動します。npm start (そして、AndroidデバイスでExpoで起動します)

エラーが表示されていないので、あなたが私のためにそれをチェックアウトできたら素晴らしいと思います(PCファイアウォールでポート8000​​が開いていることを確認しました)

回答 1 件
  • app.jsの次の行でした:

    const socket = openSocket( 'localhost:8000'); 

    ラップトップのIPアドレスに変更しました。

    const socket = openSocket( '192.168.1.94:8000'); 

    正直に言うと、なぜローカルホストに対応できなかったのか分かりません。 Expoと何か関係があるに違いないと思います。

あなたの答え