Я начинаю с веб-сокетов в React Native, следуя этой статье:
https://medium.com/dailyjs/combining-react-with-socket-io-for-real-time-goodness-d26168429a34
Это хорошо написано и должно дать мне хорошую основу для начала, если я смогу получить егоза работой.Я думаю, что код был создан для React, но, надеюсь, он должен работать с React Native.
Я скопировал код для 3 файлов, и он работает без ошибок (и на сервере, и на клиенте), но клиент App.jsне обновляется, просто отображается «Значение таймера с сервера: пока нет отметки времени»
Я создал приложение с помощью: сокета-таймера create-реакции-native-app
В новом каталоге я установил: npm i - сохранить socket.io , а затем npm i - сохранить socket.io-client
My 3файлы:
server.js https://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.js https://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.js https://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',
},
});
Я запускаю сервер в одном окне консоли с помощью: узел сервера Я запускаю клиентское приложение в другом окне консоли с помощью: npm start (а затем запускаю его с помощью Expo наAndroid-устройство)
Было бы здорово, если бы вы могли проверить это для меня, поскольку я не вижу никаких ошибок (я проверил, что порт 8000 открыт набрандмауэр ПК)