reactjs - 在socketio上设置Firebase的端口号
问题描述
我正在使用 express、socketio、firebase 创建一个反应聊天应用程序。
网址:https
:
//react-chat-b0e8a.firebaseapp.com/ Github:https ://github.com/kaibara/React-chat
创建组件后,我们运行node chatServer.js
并确认消息可以在 localhost 上发送。
但是,当检查时firebase serve
,我无法发送消息。我发现通过设置process.env.PORT || 3000
和实现来调查就足够了,但是并没有解决它。
如何配置 PORT 以执行与 firebase 服务器上的本地主机相同的行为?
我用以下三个文件设置了 PORT。
聊天服务器.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
请配合回答。
解决方案
推荐阅读
- python - 用于拆分数据的数据框中的 Python 两个循环
- python - 使用外部类或字典创建 pydantic.BaseModel 定义
- reactjs - 在使用状态中更新对象并立即查看更改的最佳方法是什么
- css - 如何将这些单独的文本与左侧的两个元素和右侧的元素对齐?
- flutter - Flutter - 模糊除所选小部件以外的屏幕
- python - 未在 Jupyter 上上传的 CSV 文件出现错误
- python - 如何使用 Leafset js 和 odoo 在地图中显示记录?
- node.js - 如何从nodejs中的多个目录导入所有快速路由器文件?
- android - 使用 DateTime 的 SQL 查询不尊重 ISO 时间戳中的时区
- python - ValueError:在昏暗 2 处预期长度为 0 的序列(得到 1)