Socket.ioとNode.jsがHeroku上で動作しない

Question

私はsocket.ioを使って簡単なチャットルームアプリケーションを構築しています。ローカルホストでうまく動作します。

私はHerokuに展開すると問題が発生します。それから、sockets.ioは動作しなくなります。

フォーラムで同様の質問を見て、さまざまな解決方法を試しましたが、問題を解決できませんでした。私たちを手伝ってくれますか？

これは私の最近のビルドのヒロクログです。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

このチュートリアルでは、正確に必要なものを説明します。あなたは、アプリケーションデプロイされているサーバーに耳を傾ける必要があり、一方、「3000 localhost」をhttps://devcenter.heroku.com/articles/node-websockets

問題は、クライアント側にあなたが聞いているということです。

次のコードは、の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コンストラクタに渡します。例えば

あなたは

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