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

Posted 2023-03-07

【中文标题】Socket.emit 不发送或 socket.on 不接收？

【英文标题】：Socket.emit not sending or socket.on not receiving?

【发布时间】：2019-02-07 08:09:29

【问题描述】：

我正在使用 Node.js、mysql、Sequelize、Socket、React Native 和 Redux 构建一个移动聊天应用程序。

我正在尝试 socket.emit 用户的凭据： 1) 查找或创建用户，并且； 2）通过reducer移动到下一个屏幕。

我相信：

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;

【问题讨论】：

兄弟，我不知道 redux 和 socket，我必须使用它们开发一个聊天应用程序。我从你的问题中得到了我的解决方案谢谢:)

【参考方案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