Question

陷入了一个问题，无法理解为什么它不起作用。一切似乎还好。请指教。

这是Server.js

var app = module.exports.ie=require('http').createServer()
var io =  require('socket.io')(app)

const PORT = process.env.PORT || 3231
const socketManager = require('./socketManager')

io.on('connection', socketManager) 

app.listen(PORT, () =>
console.log(`Connected to Port ${PORT}`)

)

下面是我的Layout文件，其中包含主渲染。

import React, {Component} from 'react';
import io from 'socket.io-client';
import { USER_CONNECTED, LOGOUT } from './ConstEvents';
import ChatNameForm  from './ChatNameForm';

const socketUrl = "http://localhost:3231"

export default class chatPane extends Component{
    constructor(props){
        super(props);

        this.state ={
            socket:null,
            user: null
        };
    }

    componentDidMount(){
        this.initSocket()
    }
    /*
    *
    *  Connect to 'socketUrl' and initialise the socket.
    * 
    */   
    initSocket =() =>{
        const socket = io(socketUrl)
        socket.on('connect', () =>{
            console.log("Connected");
        })
        this.setState({socket})
    }

    /*
    *   Sets the user property in state
    *   @Param user {id:number, name:string}
    */
    setUser = (user) =>{
        const { socket } = this.state
        socket.emit(USER_CONNECTED, user);
        this.setState({user})

    }

    /**
     * Sets the user property in state to Null.
     * 
     */
    logout = () => {
        const { socket } =  this.state
        socket.emit(LOGOUT);
        this.setState({user:null})
    }

    render(){
        const { socket } = this.state

        return(
            <div>
                <ChatNameForm socket={socket} setUser={this.setUser} />  

            </div>

        );
    }
}

下面是UserName表单。没有密码只能在此处设置用户名。

从'react'导入React，{Component}; 从“ ./ConstEvents”导入VERIFY_USER；

export default class ChatNameForm extends Component {
    constructor(props){
        super(props);
        this.state = {
            userChatName:"",
            error:""
        };
    }

    setUser = ({user, isUser}) => {
        console.log(user, isUser);
        if(isUser){
            this.setError("User name Taken")
        }
        else {
            this.props.setUser(user)
            this.setError("")
        }
    }

    handleSubmit = (e) => {
        e.preventDefault()
        const { socket } = this.props
        const {userChatName} = this.state
        socket.emit (VERIFY_USER, userChatName, this.setUser)

    }

    handleChange = (e) => {
        this.setState({userChatName:e.target.value})

    }

    setError = (error) => {
        this.setState({error})
    }

    render() {
        const {userChatName, error} = this.state
        return (
            <div className='login'>
                 <form onSubmit = {this.handleSubmit} > 
                 <label htmlFor= "userChatName">
                    <h2>Enter User Chat Name</h2>
                 </label>
                 <input 
                         ref = {(input) => { this.textinput = input}}
                         type = "text"
                         id ="userChatName"
                         value = {userChatName}
                         onChange={this.handleChange}
                         placeholder={'userChatName'}
                         />
                <input type="submit" value= "ok" />  
                         <div className= "error">
                             {error ? error:null}
                         </div>

                 </form>
             </div>
        )
    }
}

最后是我的SocketManager。

const io =  require('./Server.js').io

const { VERIFY_USER, USER_CONNECTED, LOGOUT } = require('../ConstEvents');
const { createUser, createMessage, createChat} = require('../ChatFunctions');

let connectedUsers = { }

module.exports = function(socket){
    console.log(`Socket Id = ${socket.id}`)

    // verify chatName  

    socket.on(VERIFY_USER, (userChatName, callback) => {

        if (isUser (connectedUsers, userChatName)) {
            callback ({ isUser:true, user:null })
        } else{
             callback ({ isUser:false, user:createUser({name:userChatName})})
            }
    })
    //User connects with userName
    socket.on(USER_CONNECTED, (user) => {
        connectedUsers= addUser(connectedUsers, user)
        socket.user = user
        io.emit(USER_CONNECTED, connectedUsers)  
    })
}
function addUser (userList, user){
    let newList = Object.assign({}, userList) 
    newList[user.name] = user
    return newList
}

function removeUser(userList, username){
    let newList = Object.assign({}, userList)
    delete newList[username]
    return newList
}

function isUser(userList, userChatName){

    return userChatName in userList
}

问题；我可以使插座正常工作。来自Form的值很好，但是我没有将此值推送到socketManager。我已经在Form Js中进行了一些测试，以查看handleSubmit是否正常工作。我可以看到socket，userChatName和socket.emit正常运行。但是，当我转到套接字管理器并在这种情况下查看触发的事件VERIFY_USER ...之后，我看不到任何结果。尝试测试它，但不确定如何在控制台上获得其价值以进行测试。如果可以，请帮帮我。谢谢。

React Socket NodeJs SocketManager无法通过

0 个答案: