我有一個簡單的聊天應用程式的問題，當我在其他客戶端發送訊息時看不到更新，這是后端
const express = require('express')
const cors = require('cors')
const http = require('http')
const {Server} = require('socket.io')
const app = express()
app.use(cors())
const server = http.createServer(app)
const io = new Server(server,{cors:'http://localhost:3000'})
let mensaje
io.on('connection',socket =>{
socket.on('new',data =>{
mensaje = data
socket.emit('mensaje',mensaje)
})
})
server.listen(3001,() =>{
console.log('Server online')
})
和前端
import {io} from 'socket.io-client'
import {useState, useEffect} from 'react'
const socket = io('http://localhost:3001')
function App() {
const [user,set_user] = useState('')
const [mensaje,set_mensaje] = useState('')
const [mensajes,set_mensajes] = useState('')
const handle_input = ({target}) =>{
set_user(target.value)
}
const handle_message = ({target}) =>{
set_mensaje(target.value)
}
const handle_click = () => {
socket.emit('new',{user,mensaje})
}
useEffect(() => {
socket.on('mensaje',data =>{
set_mensajes(data)
})
}, [socket])
return (
<main>
<div>
<h1>Hi {user}</h1>
<input type="text" onChange={handle_input}/>
<h2>what do u want to say today</h2>
<input type="text" onChange={handle_message}/>
<button onClick={handle_click}>Send</button>
</div>
<div>
<h1>{mensajes.user}</h1>
<p>{mensajes.mensaje}</p>
<br/>
</div>
</main>
)
}
export default App;
他們是所有人的版本
“快遞”：“^4.17.3”，“socket.io”：“^4.4.1”，“反應”：“^18.0.0”，“socket.io-client”：“^4.4.1”，
我發現如果添加
...
socket.emit('mensaje',mensaje)
socket.broadcast.emit('mensaje',mensaje)
在后端運行良好，但我知道這不是正確的方法
uj5u.com熱心網友回復：
您應該io.emit('mensaje',mensaje)在后端使用，而不是socket.emit('mensaje',mensaje). 見這里。
uj5u.com熱心網友回復：
你不需要在這里使用 useEffect 。只用
socket.on('mensaje',data =>{
set_mensajes(data)
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/464835.html
標籤：javascript 节点.js 反应 表示 插座