在socketio

Question

我正在使用express，socketio，firebase创建一个React聊天应用程序。
网址：https://react-chat-b0e8a.firebaseapp.com/
GitHub：https://github.com/kaibara/React-chat

创建组件后，我们运行node chatServer.js并确认可以在本地主机上发送消息。

但是，在使用firebase serve进行检查时，我无法发送消息。 我发现只需设置process.env.PORT || 3000并进行实施即可进行调查，但并不能解决问题。

如何将PORT配置为与Firebase服务器上的本地主机相同的行为？

我为PORT设置了以下三个文件。

chatServer.js

const express = require('express')
const app = express()
const server = require('http').createServer(app)
const portNumber = process.env.PORT || 3000

server.listen(portNumber, () => {
  console.log('起動しました', 'http://localhost:' + portNumber)
})

app.use('/public', express.static('./public'))
app.get('/',(req,res) => {
  res.redirect(302, '/public')
})

const socketio = require('socket.io')
const io = socketio.listen(server)

io.on('connection',(socket) => {
  console.log('Acces to User:', socket.client.id)
  socket.on('chatMessage',(msg) => {
    console.log('message',msg)
    io.emit('chatMessage',msg)
  })
})

src / components / chatApp.js

import React,{Component} from 'react'
import socketio from 'socket.io-client'
import ChatForm from './ChatForm'

const portNumber = process.env.PORT || 3005
const socket = socketio.connect('http://localhost:' + portNumber)

class ChatApp  extends Component {
  constructor(props){
    super(props)
    this.state = {
      logs: []
    }
  }
  componentDidMount(){
    socket.on('chatMessage',(obj) => {
      const logs2 = this.state.logs
      obj.key = 'key_' + (this.state.logs.length + 1)
      console.log(obj)
      logs2.unshift(obj)
      this.setState({logs: logs2})
    })
  }
  render(){
    const messages = this.state.logs.map(e => (
      <div key={e.key}>
        <span>{e.name}</span>
        <span>: {e.message}</span>
        <p />
      </div>
    ))
    return(
      <div>
        <h1 id='title'>Reactチャット</h1>
        <ChatForm />
        <div id='log'>{messages}</div>
      </div>
    )
  }
}

export default ChatApp

src / components / chatForm.js

import React,{Component} from 'react'
import socketio from 'socket.io-client'
import AuthContainer from '../container/AuthContainers'
import firebase from '../firebase/firebase'

const portNumber = process.env.PORT || 3005
const socket = socketio.connect('http://localhost:' + portNumber)

class ChatForm extends Component {
  constructor(props){
    super(props)
    this.state = {
      name: '',
      message: ''
    }
  }

  nameChanged(e){
    this.setState({name: e.target.value})
  }
  messageChanged(e){
    this.setState({message: e.target.value})
  }
  send(){
    socket.emit('chatMessage',{
      name: this.state.name,
      message: this.state.message
    })
    this.setState({message: ''})
  }

  render(){
    return(
      <div id='Form'>
        <div className='Name'>
          名前:
          <br />
          { this.props.uid ?
            <input value={this.props.displayName} />:
            <input value={this.state.name} onChange={e => this.nameChanged(e)} />
          }
        </div>
        <AuthContainer />
        <br />
        <div className='Message'>
          メッセージ:
          <br />
          <input value={this.state.message} onChange={e => this.messageChanged(e)} />
        </div>
        <button className='send'onClick={e => this.send()}>送信</button>
      </div>
    )
  }
}

export default ChatForm

请配合回答。