[英]How To Implement React hook Socketio in Next.js
I have tried to find a way from Google but the results can remain the same我试图从谷歌找到一种方法,但结果可以保持不变
http://localhost:8000/socket.io/?EIO=3&transport=polling&t=MnHYrvR
i try this wan medium try other ways, the results remain the same我尝试这个 wan medium尝试其他方法,结果保持不变
and for the front end I have tried, socket io inside the hook component and outside the scope, the results remain the same对于我尝试过的前端,钩子组件内和范围外的socket io,结果保持不变
http://localhost:8000/socket.io/?EIO=3&transport=polling&t=MnHYrvR
this is my code from server:这是我来自服务器的代码:
app.prepare().then(() => {
const server = express();
const setServer = require('http').Server(server);
const io = require('socket.io')(setServer)
server.use(bodyParser.json());
server.use(cookieParser());
io.on('connection', socket => {
console.log('socket', socket);
socket.emit('now', {
message: 'zeit'
})
})
server.use(routers)
server.get('*', (req, res) => {
return handle(req, res);
});
server.use( (err, req, res, next) => {
console.log(err)
if(err.name === 'Error'){
res.status(401).send({
title: 'error',
detail: 'Unauthorized Access!'
})
}
})
server.listen(port, err => {
if (err) throw err;
console.log(`> Ready on http://heroku:${port}`)
})
})
.catch(ex => {
console.error(ex.stack);
process.exit(1);
});
from front end:从前端:
//at the top of function
const io = require('socket.io-client');
const socket = io.connect('http://localhost:8000');
console.log('socket', socket);
//in use effect
useEffect(() =>{
socket.on('now', message => {
console.log('message', meesage);
})
})
Please help请帮忙
Although I am not using Next.js
, I have a similar setup with Express.js
that might help you with your problem...虽然我没有使用Next.js
,但我有一个与Express.js
类似的设置,可以帮助你解决你的问题......
On my Node.js
side I have the following setup:在我的Node.js
端,我有以下设置:
const app = require('express')()
const server = require('http').createServer(app)
const io = require('socket.io')(server)
// ...
io.sockets.on('connection', () => {
console.log(`Client with ID of ${socket.id} connected!`)
io.sockets.emit('SOME_EVENT', 'HelloWorld')
})
Then, my frontend with React
looks like this:然后,我的React
前端看起来像这样:
import React from 'react'
import io from 'socket.io-client'
function useSocket(url) {
const [socket, setSocket] = useState(null)
useEffect(() => {
const socketIo = io(url)
setSocket(socketIo)
function cleanup() {
socketIo.disconnect()
}
return cleanup
// should only run once and not on every re-render,
// so pass an empty array
}, [])
return socket
}
function App() {
const socket = useSocket('http://127.0.0.1:9080')
useEffect(() => {
function handleEvent(payload) {
console.log(payload)
// HelloWorld
}
if (socket) {
socket.on('SOME_EVENT', handleEvent)
}
}, [socket])
return (...)
}
Also, one common error that I am seeing when working with socket.io
is the following:此外,我在使用socket.io
时看到的一个常见错误如下:
Cross-Origin Request Blocked: The Same Origin Policy disallows
reading the remote resource at
http://127.0.0.1:9080/socket.io/?EIO=3&transport=polling&t=MnH-W4S.
(Reason: CORS request did not succeed).
This is due an incorrect URL that's provided as a parameter in the socket manager creation process:这是由于在套接字管理器创建过程中作为参数提供的 URL 不正确:
const socket = io('http://localhost');
So just double check that the address you're providing is correct.因此,只需仔细检查您提供的地址是否正确。 If you're serving your application on now
and accessing it through a now.sh
URL, but providing http://localhost
as your URL parameter, then it won't work.如果你在服务你的应用程序now
并通过访问它now.sh
URL,但提供http://localhost
作为您的URL参数,那么就不会工作。
(I realise that this is an old/stale question, but in the spirit of " The Wisdom of the Ancients ".) (我意识到这是一个古老/陈旧的问题,但本着“古人的智慧”的精神。)
I came across this question because I had the exact same problem.我遇到了这个问题,因为我遇到了完全相同的问题。 I realised that I was using the wrong server to listen with.我意识到我使用了错误的服务器来收听。 Instead of Express, you should use the HTTP module.您应该使用 HTTP 模块而不是 Express。
const setServer = require('http').Server(server);
const io = require('socket.io')(setServer)
So, this part...那么,这部分...
server.listen(port, err => {
if (err) throw err;
console.log(`> Ready on http://heroku:${port}`)
})
...should become: ...应该变成:
setServer.listen(port, err => {
if (err) throw err;
console.log(`> Ready on http://heroku:${port}`)
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.