Socket.io 및 Node.js가 Heroku에서 작동하지 않습니다.

Question

그래서 socket.io를 사용하여 간단한 대화방 응용 프로그램을 만들고 있는데, 내 localhost에서 제대로 작동합니다.

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

,536,913,632 10

도와 주시면 감사하겠습니다. 미리 감사드립니다.

Answer 1

이 튜토리얼은 정확히 필요한 설명 : 당신은 당신이 응용 프로그램 배포 서버에 들어야 반면, "3000 localhost"를 https://devcenter.heroku.com/articles/node-websockets

문제는 클라이언트 측에 당신이 듣고있는 것입니다.

다음 코드는 웹 소켓에 연결하는 일반적인 방법입니다 :

당신의 웹 사이트는 (웹 소켓이 생성되는 경우)은 서버의 주소를 통과해야 서버 측 응용 프로그램과 다를입니다 주소에서 호스팅되는

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

경우 WS 생성자. 예를 들어

주소 http://mywebsite.com하여 사용할 수 귀하의 웹 사이트는

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

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