Question

我正在使用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.js
socket.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!'
  }
});

./ components / 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',
  }
});

./ store / 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;
};

./ store / socket.js

import io from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.connect();

export default socket;

Answer 1

这不是解决问题的真正方法，但是我设法通过使用express使它起作用。

./ index.js

// replaced the connection part of the code with this

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.get('/', function (req, res) {
    res.send('Hello World');
});

server.listen(3000);

// the rest of the code goes here

Socket.emit不发送或socket.on不接收？

1 个答案: