Socket.io和Node.js不能在Heroku上工作

Question

所以我使用socket.io構建了一個簡單的聊天室應用程序，它在我的本地主機上工作正常。

問題出現在我將其部署到Heroku時：那麼sockets.io不再有效。

我在論壇上看到類似的問題，並嘗試了不同的解決方案，但我無法解決問題。你可以幫幫我嗎？

這些是我最新版本的heroku日誌，他們甚至沒有顯示console.log（）是我在程序中爲消息發送時設置的（我不知道它是否正常或沒有）：

2017-02-13T18:09:43.330870+00:00 app[web.1]: > node server.js 
2017-02-13T18:09:43.330870+00:00 app[web.1]: 
2017-02-13T18:09:43.996962+00:00 heroku[web.1]: State changed from starting to up 
2017-02-13T18:09:43.959778+00:00 app[web.1]: Option match origin protocol is not valid. Please refer to the README. 
2017-02-13T18:09:43.967627+00:00 app[web.1]: Server running on port 17411 
2017-02-13T18:09:59.643406+00:00 heroku[router]: at=info method=GET path="/chat/" host=gagliachat.herokuapp.com request_id=e2c5a 
44f-0e95-4bbb-b3be-77140713a355 fwd="93.65.75.16" dyno=web.1 connect=1ms service=104ms status=200 bytes=1413 
2017-02-13T18:09:59.771747+00:00 heroku[router]: at=info method=GET path="/chat/index.js" host=gagliachat.herokuapp.com request_ 
id=e11067f0-b3b6-42f6-8ba4-aea436281a5d fwd="93.65.75.16" dyno=web.1 connect=0ms service=30ms status=200 bytes=1350 
2017-02-13T18:10:02.096025+00:00 heroku[router]: at=info method=GET path="/chat/" host=gagliachat.herokuapp.com request_id=974bc 
589-2fd7-4d12-af3f-c9c79b6a5d19 fwd="93.65.75.16" dyno=web.1 connect=3ms service=8ms status=304 bytes=237 
2017-02-13T18:10:02.175145+00:00 heroku[router]: at=info method=GET path="/chat/index.js" host=gagliachat.herokuapp.com request_ 
id=8c2c4e30-6e25-4d73-b183-ae3e0a4eee33 fwd="93.65.75.16" dyno=web.1 connect=5ms service=6ms status=200 bytes=1350 
2017-02-13T18:10:18.112287+00:00 heroku[router]: at=info method=GET path="/" host=gagliachat.herokuapp.com request_id=cb99f6b6-e 
297-4147-b0c2-2aa5ef54b233 fwd="93.65.75.16" dyno=web.1 connect=1ms service=35ms status=302 bytes=246 
2017-02-13T18:10:18.269114+00:00 heroku[router]: at=info method=GET path="/chat/index.js" host=gagliachat.herokuapp.com request_ 
id=6162d1c7-927f-4de5-b42a-80200b420ee7 fwd="93.65.75.16" dyno=web.1 connect=3ms service=6ms status=304 bytes=237 
2017-02-13T18:10:18.176571+00:00 heroku[router]: at=info method=GET path="/chat/" host=gagliachat.herokuapp.com request_id=c6321 
4a0-14a8-4c50-8a9a-b6963866c289 fwd="93.65.75.16" dyno=web.1 connect=3ms service=5ms status=304 bytes=237 
2017-02-13T18:10:24.214602+00:00 heroku[router]: at=info method=GET path="/" host=gagliachat.herokuapp.com request_id=affe8338-1 
3db-4842-b24f-d5e3b0f72b5d fwd="93.65.75.16" dyno=web.1 connect=0ms service=8ms status=302 bytes=246 
2017-02-13T18:10:24.275116+00:00 heroku[router]: at=info method=GET path="/chat/" host=gagliachat.herokuapp.com request_id=b26ac 
7b5-2fc3-4c50-80d8-3fde7afaa8fe fwd="93.65.75.16" dyno=web.1 connect=0ms service=2ms status=304 bytes=237 
2017-02-13T18:10:24.342061+00:00 heroku[router]: at=info method=GET path="/chat/index.js" host=gagliachat.herokuapp.com request_ 
id=87535708-9e96-493e-968e-594b94e3fdf6 fwd="93.65.75.16" dyno=web.1 connect=0ms service=5ms status=304 bytes=237 

這是我的服務器端代碼的Node.js：

var express = require('express'), 
    app = express(), 
    port = process.env.PORT || 3000, 
    path = require('path'), 
    server = app.listen(port, function() { 
    console.log('Server running on port ' + port) 
    }), 
    socket = require('socket.io'), 
    io = socket.listen(server) 

io.set('origins', '*:*') 
io.set('match origin protocol', true) 

app.use(express.static(path.join(__dirname, 'public'))) 

app.get('/', function (req, res) { 
    res.redirect('/chat') 
}) 

io.sockets.on('connection', function (socket) { 
    console.log('New connection on: ' + socket.id) 

    socket.on('msg', function (msg) { 
    console.log(JSON.stringify(msg)) 
    socket.broadcast.emit('msg', msg) 
    }) 

}) 

，這是我的客戶端代碼：

window.addEventListener('load', function() { 
    var msgs = [] 
    var socket = io.connect('localhost:3000') 
    socket.on('msg', function (msg) { 
    msgs.push(document.getElementById('msgs').innerHTML += '<div><span style="color: red"> ' + msg.user + '</span>: ' + msg.msg + '</div>') 
    }) 


    document.getElementById('send').addEventListener('click', function() { 
    var userName = document.getElementById('yourId').value 
    var msg = document.getElementById('message').value 
    if (!userName || !msg) { 
     alert('Please Insert a User name') 
     return false 
    } else { 

     var msg = { 
     user: userName, 
     msg: msg 
     } 
     console.log('Sending msg: ' + JSON.stringify(msg)) 
     msgs.push('<div><span style="color: blue"> ' + msg.user + '</span>: ' + msg.msg + '</div>') 
     updateMsgs(msgs) 
     socket.emit('msg', msg) 
    } 
    }) 

    function updateMsgs(msgs) { 
    document.getElementById('msgs').innerHTML = '' 
    for (var i = 0; i < msgs.length; i++) { 
     document.getElementById('msgs').innerHTML += msgs[i] 
    } 
    } 
}) 

我希望你能幫助我。 在此先感謝！

Answer 1

本教程介紹了什麼你到底需要：https://devcenter.heroku.com/articles/node-websockets

的問題是，在客戶端您正在收聽的「本地主機：3000」，而你要聽，你的應用程序部署服務器。

下一個代碼是連接到WebSocket的常見的方法：

var HOST = location.origin.replace(/^http/, 'ws') 
var ws = new WebSocket(HOST); 
var el = document.getElementById('server-time'); 
ws.onmessage = function (event) { 
    el.innerHTML = 'Server time: ' + event.data; 
}; 

如果您的網站下是從你的服務器端應用程序的不同（在創建WebSocket的地方），你必須通過你的服務器的地址，地址託管到WS構造函數。

例如，如果你的網站可以通過地址http://mywebsite.com而由mywebsite.com:3000你必須改變串

var HOST = location.origin.replace(/^http/, 'ws'); 

到

var HOST = 'ws://mywebsite.com:3000';