I am fairly new to all of these technologies (including somewhat JavaScript) so you might have to bear with me here.
I followed the ChatApp tutorial over at Socket.IO docs fairly closely and modified the application to my likings somewhat; however, I don't think I changed much on the side of server interaction and stuff. My problem is no matter what I do, I can't seem to be able to get my application to successfully run on Heroku. I get this error message when trying to load the app:
Application Error An error occurred in the application and your page could not be served. Please try again in a few moments. If you are the application owner, check your logs for details.
I am not sure if I am missing something obvious or what.
Here is my main index.js file:
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendfile('index.html');
});
app.use("/css", express.static(__dirname + '/css'));
//array of users currently in chat
var people = {};
io.on('connection', function(socket){
console.log('user connected!');
socket.on('join', function(name){
people[socket.id] = name; //create entry in 'people' with new user
socket.emit("update", "You have connected to the server.");
io.sockets.emit("update", name + " has joined the server.");
io.sockets.emit("update_people_list", people);
});
socket.on('disconnect', function(){
console.log('user disconnected!');
if(people[socket.id] != ""){
io.sockets.emit("update", people[socket.id] + " has left the server.");
delete people[socket.id];
io.sockets.emit("update_people_list", people);
}
});
socket.on('chat message', function(msg){
console.log('message: ' + msg);
io.sockets.emit('chat message', people[socket.id], msg);
});
});
// http.listen(3000, function(){
// console.log('listening on *:3000');
// });
index.html
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(document).ready(function(){
var ready = false;
var socket = io.connect();
$("#chat").hide();
$(".canvasDiv").hide();
$("#name").focus();
//prevent form from being submitted without name
$("form").submit(function(event){
event.preventDefault();
});
//allows entering by hitting 'Enter' for name
$("#name").keypress(function(e){
if(e.which == 13) { //if ENTER key
var name = $("#name").val();
if(name != ""){
socket.emit("join", name);
$("#login").detach();
$("#chat").show();
$("#msg").focus();
ready = true;
}
}
});
$('#chatform').submit(function(){ //when submit chat message
socket.emit('chat message', $('#msg').val()); //emit message + value of input
$('#msg').val(''); //empty field?
return false; //so that the page doesn't refresh
});
//SOCKET LISTENING
socket.on('chat message', function(user, msg){
if(ready){
$('#messages').append("<p><strong><span class='chat-user'>" + htmlEntities(user) + " </span></strong>: " + htmlEntities(msg) + "</p>");
//adjust height and scroll as need be:
var $container = $('#messages');
var height = $container.get(0).scrollHeight;
$container.scrollTop(height);
}
});
socket.on("update", function(io_message){
if(ready){
$('#messages').append("<p class='notification'>" + htmlEntities(io_message) + "</p>")
}
});
socket.on("update_people_list", function(people){
if(ready){
$("#people").empty(); //clear to refresh it
$.each(people, function(client_id, name){
$('#people').append("<p class='notification'>" + htmlEntities(name) + "</p>");
});
var $container = $("#messages");
var height = $container.get(0).scrollHeight;
$container.scrollTop(height);
}
});
});
</script>
Additionally, my package.json file
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"express": "^4.6.1",
"socket.io": "^1.0.6"
}
}
Procfile:
web: node index.js
.gitignore:
node_modules/
It gives you the flexibility of a TCP connection with the additional security model and meta data built into the HTTP protocol. For more details on the WebSocket protocol refer to RFC 6455, which is the version supported on Heroku.
Initially, it supported only Ruby sites but now supports various languages, including JavaScript with Node. js. Heroku also has Docker support so that you can deploy just about anything to it. This tutorial will teach you how to build a small application using the Express framework for Node.
I encountered the same error, but including "start":"node app.js"
in package.json file tends to fix the problem. Hope this helps anyone that encounters the same error.
Note: app.js should be your own main server file.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With