[英]Socket.io and Node.js not working on Heroku
So I'm building a simple chat-room app using socket.io, and it works fine on my localhost. 因此,我正在使用socket.io构建一个简单的聊天室应用程序,它在我的本地主机上运行良好。
The problem comes when I deploy it to Heroku: then sockets.io no longer works. 当我将其部署到Heroku时,问题就来了:然后sockets.io不再起作用。
I looked at similar questions on the forum and tried different solutions, but I wasn't able to solve the problem. 我在论坛上查看了类似的问题,并尝试了不同的解决方案,但无法解决问题。 Could you help me?
你可以帮帮我吗?
These are my heroku logs from my latest build, and they don't even show the console.log()'s I set in the program for when a message is sent (I don't know whether it's normal or not): 这些是我最新版本中的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
This is my server-side Node.js code: 这是我的服务器端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)
})
})
And this is my client-side code: 这是我的客户端代码:
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]
}
}
})
I hope you can help me. 我希望你能帮助我。 Thanks in advance!
提前致谢!
This tutorial explains what you exactly need: https://devcenter.heroku.com/articles/node-websockets 本教程说明了您真正需要的: https : //devcenter.heroku.com/articles/node-websockets
The problem is that on client-side you are listening to the "localhost:3000", whereas you have to listen to server where you app is deployed. 问题是在客户端上您正在侦听“ localhost:3000”,而您必须侦听应用程序已部署到的服务器。
Next code is common approach to connect to websocket: 下一个代码是连接到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;
};
If your website is hosted under address that is differ from your server side application (where websocket is created) you have to pass address of your server to WS constructor. 如果您的网站托管在与服务器端应用程序(创建Websocket的地址)不同的地址下,则必须将服务器的地址传递给WS构造函数。
For example if your website available by address http://mywebsite.com whereas your websocket server available by address mywebsite.com:3000 you have to change string 例如,如果您的网站可通过地址http://mywebsite.com访问,而您的websocket服务器可通过地址mywebsite.com:3000访问,则必须更改字符串
var HOST = location.origin.replace(/^http/, 'ws');
to 至
var HOST = 'ws://mywebsite.com:3000';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.