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
and for the front end I have tried, socket io inside the hook component and outside the scope, the results remain the same
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
Socket.io architectureSince we're using NextJS our server-side will be placed in the NextJS API folder, while the client-side will be coded into each page that will need it. So in total, we will have one server (it's possible to have more than one server if the traffic is heavy) and one connection per client.
Server API | Socket.IO.
Socket.io is unarguably the most popular Nodejs frameworks with 47000+ stars on Github. It facilitates the real-time applications development owing to its real-time bidirectional communication capabilities.
Although I am not using Next.js
, I have a similar setup with Express.js
that might help you with your problem...
On my Node.js
side I have the following setup:
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:
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:
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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With