Установка номера порта Firebase на socketio - PullRequest
0 голосов
/ 18 февраля 2019

Я создаю приложение реагирования в чате, используя express, socketio, firebase.
URL: 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

Пожалуйста, помогите ответить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...