iT邦幫忙

1

【已解決】 Heroku 部署後,連接 socket.io PORT 的問題?

Mao 2021-10-24 23:35:541640 瀏覽

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

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

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

算是瞎貓到處試,終於試成功了,還有許多地方要了解。
/images/emoticon/emoticon06.gif

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

不好意思,之前問題爬文解決了,但發現新的問題...
socket
新問題是我 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");

抱歉問題有點多,後端有點不太懂~

/images/emoticon/emoticon02.gif

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

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

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

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

503
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 但都無法解決,小弟已經想破腦袋,在此詢問各位大神

/images/emoticon/emoticon41.gif

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
咖咖拉
iT邦好手 1 級 ‧ 2021-10-25 09:36:24
最佳解答

滿滿的503錯誤嗎

文中有提到

  1. LAST and MOST CRUCIAL STEP IMO: double check that you enabled a global 0.0.0.0 whitelist for your cluster PLS
    Go into mongo atlas and ensure you've enabled a global IP address whitelist for your mongoDB cluster (per step 3 in this tutorial). If you don't, your app will be running but your data won't ever get fetched. You'll have a network tab full of 503 network errors ?
看更多先前的回應...收起先前的回應...
Mao iT邦新手 1 級 ‧ 2021-10-25 14:35:49 檢舉

我有按照第三個步驟,設定 Allow Access from Anywhere,0.0.0.0/0,但還是出現了 503 訊息
IP
/images/emoticon/emoticon02.gif

咖咖拉 iT邦好手 1 級 ‧ 2021-10-25 15:17:46 檢舉

mongo atlas 有設定嗎?

Mao iT邦新手 1 級 ‧ 2021-10-25 15:38:46 檢舉

是的~我是設定 mongo atlas,不過這個問題目前解決了~參考了這篇 文檔,在 Heroku 那邊設置變數,來接收 MONGODB_URL,不過現在又冒出新問題~socket 貌似 port 接不上

socket
/images/emoticon/emoticon02.gif
部署好複雜喔!

咖咖拉 iT邦好手 1 級 ‧ 2021-10-25 15:44:54 檢舉

你的網路有被鎖PORT嗎?
有被AD管理通常socket 都是被鎖的

Mao iT邦新手 1 級 ‧ 2021-10-25 16:05:21 檢舉

什麼是網路有鎖 PORT?
/images/emoticon/emoticon13.gif
我部署到 Heroku 的 PORT 好像是浮動的,
但我前端連接的 PORT 是寫死 4000,
我還在思考要如何把後端 PORT 固定在 4000...

你沒辦法在前端用 process.env.PORT 去抓到 port 嗎?
你如果前端也是 host 在 express 的話也不需要去抓 port 只需要給 / 就好了

咖咖拉 iT邦好手 1 級 ‧ 2021-10-25 16:17:07 檢舉

一般都是用 Express 固定4000port

server.listen(4000, () => {
  console.log(`listening on port ${port}`)
});

直接寫死 可能會出問題

不然就是用Express 傳port 給前端

Mao iT邦新手 1 級 ‧ 2021-10-25 17:11:15 檢舉

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

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

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

算是瞎貓到處試,終於試成功了,還有許多地方要了解。
/images/emoticon/emoticon06.gif

我要發表回答

立即登入回答