Я создаю мобильное приложение чата с использованием Node.js, MySql, Sequelize, Socket, React Native и Redux.
Я пытаюсь в socket.emit полномочия пользователя:
1) найти или создать пользователя и;
2) перейти к следующему экрану через редуктор.
Я считаю, что либо:
socket.emit('newUser', credentials) in ./store/index.js
не работает и / или оба
socket.on('newUser', credentials => {...} in ./index.jssocket.on('newUser', user => {...} in ./store/index.js
не работают, потому что в базу данных ничего не добавлено и я не перехожу на следующий экран. Просто ничего не происходит, когда я ввожу некоторые учетные данные и нажимаю кнопку.
Я довольно новичок в разработке и попытался понять, в чем проблема, используя несколько console.log (удалено из кода ниже), так как я не знаю, как еще его протестировать.
Я также проверил все другие потоки в файле socket.emit и о том, как проверить, работает ли сокет в течение последних нескольких дней, но я все еще застрял.
Ниже мой код.
1) почему socket.emit не отправляет (или socket.on не слушает)?
2) Как я могу проверить, работает ли сокет (как на стороне клиента, так и на стороне сервера).
Спасибо !!
. / Index.js
const server = require('http');
server.createServer(function (req, res) {}).listen(3000);
const io = require('socket.io')(server);
const { User, Conversation, Message } = require('./db').models;
const mobileSockets = {};
io.on('connection', socket => {
socket.on('newUser', credentials => {
const { name, password } = credentials;
Promise.all([
User.findOrCreate({
where: {
name,
password
}
}),
User.findAll()
])
.then(([user, users]) => {
mobileSockets[user[0].id] = socket.id;
socket.emit('userCreated', { user: user[0], users });
socket.broadcast.emit('newUser', user[0]);
});
});
});
. / App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import { createStackNavigator } from 'react-navigation';
export default class App extends React.Component {
render() {
return (
<Provider store={ store }>
<RootStack />
</Provider>
);
}
}
import LoginScreen from './components/Login';
import Users from './components/Users';
import Chat from './components/Chat';
const RootStack = createStackNavigator({
Login: LoginScreen,
Users: Users,
Chat: Chat,
}, {
initialRouteName: 'Login',
navigationOptions: {
headerTitle: 'login to Chat!'
}
});
. / Компоненты / Login.js
import React from 'react';
import { View, Text, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
import { login } from '../store';
export default class LoginScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
password: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(type, value) {
this.setState({ [type]: value });
}
handleSubmit() {
login(this.state, this.props.navigation);
}
render() {
return (
<View style={ styles.container }>
<Text style={ styles.text }>Enter your name and password:</Text>
<TextInput
onChangeText={ value => this.handleChange('name', value) }
returnKeyType='next'
autoCapitalize='none'
autoCorrect={ false }
onSubmitEditing={ () => this.passwordInput.focus() }
style={ styles.input }
/>
<TextInput
onChangeText={ value => this.handleChange('password', value)}
secureTextEntry
returnKeyType='go'
autoCapitalize='none'
style={ styles.input }
ref={ input => this.passwordInput = input }
/>
<TouchableOpacity
onPress={ this.handleSubmit }
style={ styles.button }
>
<Text style={ styles.buttonText }>Login</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'powderblue',
height: '100%',
width: '100%'
},
text: {
fontSize: 20,
fontWeight: 'bold'
},
input: {
height: 40,
width: '90%',
borderWidth: 0.5,
borderColor: 'black',
backgroundColor: '#fff',
color: '#000',
textAlign: 'center',
marginTop: 10
},
button: {
width: '75%',
backgroundColor: 'blue',
borderRadius: 50,
alignItems: 'center',
justifyContent: 'center',
marginTop: 20,
paddingVertical: 15
},
buttonText: {
color: '#fff',
textAlign: 'center',
fontSize: 15,
fontWeight: 'bold',
}
});
. / Магазин / index.js
import { createStore, combineReducers } from 'redux';
import users, { gotUsers, gotNewUser } from './users';
import messages, { gotMessages, gotMessage } from './messages';
import user, { gotUser } from './user';
let navigate;
const reducers = combineReducers({ users, messages, user });
const store = createStore(reducers);
export default store;
export * from './users';
export * from './messages';
import socket from './socket';
});
socket.on('userCreated', response => {
const { user, users } = response;
store.dispatch(gotUser(user));
store.dispatch(gotUsers(users));
navigate('Users');
});
socket.on('newUser', user => {
console.log('store/index.js has received a "newUser"');
store.dispatch(gotNewUser(user));
});
export const login = (credentials, navigation) => {
socket.emit('newUser', credentials);
navigation = navigation.navigate;
};
. / Магазин / socket.js
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.connect();
export default socket;