如何在Next.js中实现React hook Socketio

Question

我已经尝试从谷歌上找到解决方法，但结果保持不变。

http://localhost:8000/socket.io/?EIO=3&transport=polling&t=MnHYrvR

我试了这个medium里的方法以及其他方法，但结果仍然一样。

对于前端部分，我尝试将socket io放入hook组件内和外，但结果仍然一样。

http://localhost:8000/socket.io/?EIO=3&transport=polling&t=MnHYrvR

这是我从服务器那里得到的代码：

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);
});

来自前端：

//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);
        })
    })

请帮忙

- Heru Wijayanto

---

尝试使用空的依赖项[]来使用useEffect，因为您现在的代码会在每次渲染时建立连接。 - Dennis Vash

仍然得到相同的结果，我不知道为什么。 - Heru Wijayanto

你看到的是什么确切的错误和/或警告？ - goto

Answer 1

尽管我没有使用Next.js，但我有一个类似的设置与Express.js一起使用，这可能有助于解决你的问题...

在我的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')
})

然后，我的前端使用 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 (...)
}

此外，我在使用 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).

这是由于在套接字管理器创建过程中提供了错误的URL参数所致：

const socket = io('http://localhost');

因此，请仔细检查您提供的地址是否正确。如果您正在now上提供应用程序，并通过now.sh URL访问它，但是提供http://localhost作为您的URL参数，则它将无法正常工作。

- goto

---

最终我被告知只能使用Express，感谢您的帮助。 - Heru Wijayanto

Answer 2

我知道这是一个老旧的问题，但出于“古人的智慧”精神。

我遇到了这个问题，因为我也有同样的困扰。我意识到我使用了错误的服务器进行监听。你应该使用HTTP模块而不是Express。

    const setServer = require('http').Server(server);
    const io        = require('socket.io')(setServer)

所以，这部分...

    server.listen(port, err => {
        if (err) throw err;
        console.log(`> Ready on http://heroku:${port}`)
    })

...应该变成：

    setServer.listen(port, err => {
        if (err) throw err;
        console.log(`> Ready on http://heroku:${port}`)
    })

- jonspark