socket.io聊天示例heroku
我一直在尝试学习node.js和socket.io，并完成了http://socket.io/get-started/chat/的例子。 我添加了一些额外的function，它在本地主机上工作。 现在我正在尝试将这部署到heroku上的服务器，但我无法使其工作。
我没有足够的声望来展示我读过的主要内容。 我查看了Heroku上的“使用Node.js进行Heroku入门”，“在Heroku上部署Node.js应用程序”和“使用Node.js上的Heroku上的WebSockets”的文章，但我还是无法弄清楚该怎么做。
html页面显示在我的应用程序，但聊天不起作用： https ： //salty-ridge-74778.herokuapp.com/
这是我到目前为止：
的index.html
<!doctype html> <html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font: 13px Helvetica, Arial; } form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; } form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; } form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; } #messages { list-style-type: none; margin: 0; padding: 0; } #messages li { padding: 5px 10px; } #messages li:nth-child(odd) { background: #eee; } </style> </head> <body> <ul id="messages"></ul> <form action=""> <input id="m" autocomplete="off" /><button>Send</button> </form> <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script> <script src="http://code.jquery.com/jquery-1.11.1.js"></script> <script> var socket = io(); $('form').submit(function(){ socket.emit('chat message', $('#m').val()); $('#m').val(''); return false; }); socket.on('chat message', function(msg){ $('#messages').append($('<li>').text(msg)); }); socket.on('user connected', function(name){ $('#messages').append($('<li>').text(name + " connected")); }); </script> </body> </html> index.js
var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var nextUserId = 0; var users = []; app.set('port', (process.env.PORT || 5000)); app.get('/', function(req, res){ res.sendFile(__dirname + '/index.html'); }); io.on('connection', function (socket) { var socketId = socket.id; users.push({ 'id': socketId, 'name': "User" + nextUserId }); nextUserId++; console.log(users[users.length - 1].name + ' joined with id ' + users[users.length - 1].id); io.emit('user connected', users[users.length - 1].name); socket.on('disconnect', function () { console.log('user disconnected'); }); socket.on('chat message', function (msg) { var name; for (var x = 0; x < users.length; x++) { if (users[x].id == socket.id) { name = users[x].name; } } io.emit('chat message', name + ": " + msg); console.log('message: ' + name + ": " + msg); }); }); http.listen(app.get('port'), function(){ console.log('listening on port ' + app.get('port')); });
的package.json
{ "name": "socket-chat-example", "version": "0.0.1", "description": "my first socket.io app", "dependencies": { "express": "^4.10.2", "socket.io": "^1.4.6" }, "engines": { "node": "6.2.2" } }
Procfile
web: node index.js
的.gitignore
node_modules/
为了设置应用程序，我将这些命令input到命令行，一旦我在正确的文件夹中：
git init heroku create git add . git commit -m '1' heroku git:remote -a salty-ridge-74778 git push heroku master
如果有人能帮助，我会永远感激。
控制台显示导致您的应用程序失败的JavaScript错误。 在浏览器中打开debugging控制台：
混合内容：“ https://salty-ridge-74778.herokuapp.com/ ”上的页面是通过HTTPS加载的，但要求使用不安全的脚本“ http://code.jquery.com/jquery-1.11.1.js ”。 此请求已被阻止; 内容必须通过HTTPS提供。 salty-ridge-74778.herokuapp.com/:25未捕获的ReferenceError：$未定义
而不是像这样的脚本，你硬编码他们的协议安全或不安全：
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
像这样包含它们，所以它们inheritance了托pipe页面的协议：
<script src="//code.jquery.com/jquery-1.11.1.js"></script>