感謝兩位協助幫忙，最後有參考這篇 StackOverflow
以及大大們的意見，把前端的 socket 改成 '/'，就順利連接上 socket 了

/*  前端部分  */
io.socket = io('/', {transports: ['websocket']});

/*  後端部分  */
const io = require("socket.io")(server, {
    cors: {
        origin: "*",
    },
    transports: [
        'websocket'
    ]
});

算是瞎貓到處試，終於試成功了，還有許多地方要了解。

–——— 問題已解決 –———

不好意思，之前問題爬文解決了，但發現新的問題...

新問題是我 Heroku PORT 好像是浮動的，要怎麼把他設定為 4000 PORT
應該是因為 PORT 的問題，導致 socket 無法連接上

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '4000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port, () => {
  console.log(`listening on port ${port}`)  // 有監聽到，但每次重開都不同 PORT
});

/**
 * Socket.io
 */

require('../socketIO')(server);

因為我前端負責連接 socket.io 的 PORT 是寫死 4000

io.socket = io("ws://localhost:4000");

抱歉問題有點多，後端有點不太懂～

–——— 舊問題已爬文檔解決 –———

查看了 文檔
在 Heroku 設置變數，就解決連接不上的問題

不好意思！我有一個麻煩的問題。
在本地端操作都是正常的，能夠註冊、登入與聊天。

但部署到 Heroku 的網站，無法註冊與登入，估計是沒有連接到後端資料庫。

status 返回的都是 503

看 log 好像是連接 MongoDB 的地方出問題，沒有連接到 MongoDB，所以也沒有 MongoDB 裡自動生成的 _id 導致錯誤。

                         /*  heroku logs --tail  */
2021... heroku[router]: at=error code=H13 desc="Connection closed without response" method=POST path="/api/register" host=f2e-chat-web.herokuapp.com request_id=03c69b2f-de08-4c82-914a-02ff7053db6a fwd="39.13.75.143" dyno=web.1 connect=0ms service=20059ms status=503 bytes=0 protocol=https
2021... app[web.1]: undefined
2021... app[web.1]: events.js:377
2021... app[web.1]: throw er; // Unhandled 'error' event
2021... app[web.1]: ^
2021... app[web.1]:
2021... app[web.1]: TypeError: Cannot read property '_id' of undefined
2021... app[web.1]: at /app/routes/index.js:26:56
2021... app[web.1]: at /app/node_modules/mongoose/lib/model.js:4912:18
2021... app[web.1]: at processTicksAndRejections (internal/process/task_queues.js:77:11)       
2021... app[web.1]: Emitted 'error' event on Function instance at:
2021... app[web.1]: at /app/node_modules/mongoose/lib/model.js:4914:15
2021... app[web.1]: at processTicksAndRejections (internal/process/task_queues.js:77:11)       
2021... app[web.1]: npm ERR! code ELIFECYCLE
2021... app[web.1]: npm ERR! errno 1
2021... app[web.1]: npm ERR! freelance-network-server@0.0.0 start: `node ./bin/www`
2021... app[web.1]: npm ERR! Exit status 1
2021... app[web.1]: npm ERR!
2021... app[web.1]: npm ERR! Failed at the freelance-network-server@0.0.0 start script.        
2021... app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021... app[web.1]:
2021... app[web.1]: npm ERR! A complete log of this run can be found in:
2021... app[web.1]: npm ERR!     /app/.npm/_logs/2021-10-24T14_48_13_227Z-debug.log
2021... heroku[web.1]: Process exited with status 1
2021... heroku[web.1]: State changed from up to crashed
2021... heroku[web.1]: State changed from crashed to starting
2021... heroku[web.1]: Starting process with command `npm start`
2021... app[web.1]:
2021... app[web.1]: > freelance-network-server@0.0.0 start /app
2021... app[web.1]: > node ./bin/www
2021... app[web.1]:
2021... app[web.1]: listening on port 25357
2021... app[web.1]: connected to db
2021... heroku[web.1]: State changed from starting to up

這是我負責連接 MongoDB 的文件

const mongoose = require('mongoose');
require('dotenv').config()

// 連接資料庫
mongoose.connect(
  String( process.env.DB_CONNECTION ),
  { useNewUrlParser: true, useUnifiedTopology: true },
  () => { console.log('connected to db') }
)
const connection = mongoose.connection
// 綁定監聽
connection.on('connected', () => {
  console.log('mongoDB connect success!');    // 這段沒有跳出來
})

我部署方法是參考了這篇 文章

整個專案是使用到 React、Express、MongoDB。

我有查了 StackOverflow 但都無法解決，小弟已經想破腦袋，在此詢問各位大神