I have a socket.io application in github and I need to run it on reroku but I'm not having success with the tests with other servers, but the index of the other was with the app so if you want to take a look in the code or even here is the link of the server:
line of the code that makes the connection:
the line of connection code is this here:
var socket = io.connect ('serverb.herokuapp.com:3000');
When you deploy the site, everything goes fine when I connect the client, it does not return anything, the client stays in my house, and the server in heroku notices that it is hidden on port 3000.
The connection line is configured with the address of the app and the port 3000 that it buff.
Obs. Another beauty server works both the socket.io and the socket ws. If you want to put client and server to test you maybe you can even take some code.
Try to deploy the server there to see if it works.
<html>
<head>
<style>
#main {
border:#333;
border-width:2px;
border-style:solid;
}
</style>
<script src="socket.io.js"></script>
<script src="jquery.min.js"></script>
<script src="map.js"></script>
<script src="eventos2.js"></script>
<script src="anima.js"></script>
var clickSound = new Audio("aBird1.wav");
var player = Array([0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]);
var objectDict = Array("casa1.png","arvore.png", "a.png", "b.png", "c.png", "d.png" , "e.png" , "f.png" , "blod2.png" , "h.png" , "i.png" , "j.png" , "k.png" , "l.png" , "m.png" , "n.png" , "ffas.png" );
var tileDict = Array( "land11.png","tttt.png","swamp.png" , "tt.png");
var charDict = Array("p1.png" , "lu.png" , "blod2.png" , "mt222.png");
var charImg = new Array();
var tileImg = new Array();
var objectImg = new Array();
var loaded = 0;
var loadTimer;
var tileH = 25;
var tileW = 50;
var ymouse;
var xmouse;
var mapX = 450;
var mapY = -150;
var playerX = 10;
var playerY = 10;
var newplayerX = 10;
var newplayerY = 10;
var jogadores;
var xpos;
var ypos;
var level = 10;
var pontos = 10;
monstro = 0;
morto = 1;
var movey = 10;
var movey1 = 10;
var objeto ;
var t = 1;
///var map = mapp;
var mtx = 30;
var mty = 25;
var mtx1 = 30;
var mty1 = 25;
var mtx2 = 15;
var mty2 = 5;
var mtx3 = 10;
var mty3 = 35;
var socket = io.connect('serverb.herokuapp.com:3000');
function loadImg(){
for(var i=0;i<tileDict.length;i++){
tileImg[i] = new Image();
tileImg[i].src = tileDict[i];
tileImg[i].onload = function(){
loaded++;
}
}
for(var i=0;i<charDict.length;i++){
charImg[i] = new Image();
charImg[i].src = charDict[i];
charImg[i].onload = function(){
loaded++;
}
}
for(var i=0;i<objectDict.length;i++){
objectImg[i] = new Image();
objectImg[i].src = objectDict[i];
objectImg[i].onload = function(){
loaded++;
}
}
}
function loadAll(){
if(loaded == tileDict.length + charDict.length + objectDict.length){
clearInterval(loadTimer);
loadTimer = setInterval(gameUpdate,200);
}
}
function gameUpdate(){
ctx.clearRect(0,0,350,230)
drawMap();
}
function mouseCheck(e){
var x = e.pageX;
var y = e.pageY;
ymouse=(2*(y-canvas.offsetTop-mapY)-x+canvas.offsetLeft+mapX)/2;
xmouse=x+ymouse-mapX-25-canvas.offsetLeft
ymouse=Math.round(ymouse/25);
xmouse=Math.round(xmouse/25);
document.title = "tileY:" + ymouse + " | tileX:" + xmouse;
}
function drawMap(){
for(i=0;i<map.length;i++){
for(j=0;j<map[i].length;j++){
var drawTile = map[i][j];
var drawObj = objectMap[i][j];
var jogadores = player[i][j];
var xpos = (i-j)*tileH + mapX;
var ypos = (i+j)*tileH/2+ mapY;
ctx.drawImage(tileImg[drawTile],xpos,ypos);
if(drawObj){
ctx.drawImage(objectImg[drawObj-1],xpos,ypos- (objectImg[drawObj-1].height));
}
if(jogadores){
///ctx.drawImage(charImg[2],xpos,ypos-(charImg[2].height));
ctx.drawImage(charImg[jogadores-1],currentFrame,movey,150,200,xpos,ypos -(charImg[jogadores-1].height/13),100,150);
}
if(i == mtx && j == mty){
ctx.drawImage(charImg[3],currentFrame1,movey1,100,150,xpos,ypos -(charImg[3].height/15) ,50,100);
}
if(i == xmouse && j == ymouse){
ctx.fillStyle = 'rgba(255, 255, 120, 0.7)';
ctx.beginPath();
ctx.moveTo(xpos, ypos+12.5);
ctx.lineTo(xpos+25, ypos);
ctx.lineTo(xpos+50, ypos+12.5);
ctx.lineTo(xpos+25, ypos+25);
ctx.fill();
}
}
}
};
//------------------------------------------------------------------------------
//------------------------------------------------------
function mostrarmensagem(){
var valor = document.getElementById("t").value;
t = valor;
///map[xmouse][ymouse]=2
}
function init(){
document.onkeydown = playAudioOnKeyDown;
/////document.onkeydown = checkKeycode;
canvas = document.getElementById('main')
ctx = canvas.getContext('2d');
loadImg();
/////////jogadores = (newplayer,100);
loadTimer = setInterval(loadAll,200);
var Timer = setInterval(mouseClick,200);
canvas.addEventListener("mousedown", mouseCheck, false);
canvas.addEventListener("mousedown", mouseClick, false);
};
$(document).ready(function(){
// no clique do botão (coisa jquery)
//as coisas dentro desta cláusula acontecer somente quando
// o botão é clicado.
$("button").click(function(){
// apenas registro algumas simples
// $("p#log").html('sent message: ' + $("input#msg").val());
// enviar mensagem para o servidor em inputbox
//socket.emit('chat', $("input#msg").val() );
// O servidor receberá a mensagem,
// Então talvez fazer algum processamento, então ele irá
// Transmiti-lo novamente. no entanto, não vai
// Envia para o remetente original. o remetente
// Será o navegador que envia a msg.
// Outros navegadores de escuta para o servidor irá
// Receber a mensagem emitida. Desta forma, pretendemos
// Necessário imprimir manualmente esta msg para o remetente.
// $("p#data_recieved").append("<br />\r\n" + name + ': ' + $("input#msg").val());
// então esvaziar o texto na caixa de entrada.
// $("input#msg").val('');
});
// pedir o nome do usuário, perguntar de novo se nenhum nome.
while (name == '') {
name = prompt("qual é o seu nome?","");
}
$("p#nickname").append(name)
// enviar o nome para o servidor, e do servidor
// Registra espera vai receber isso.
socket.emit('register', name );
});
// ouvir para o evento de bate-papo e dados recieve
socket.on('chat',
function (data)
{
console.log(data)
$("p#data_recieved").append("<br />\r\n" + data.msgr + ': ' +output);
//document.getElementById("vy").innerHTML = data.playerX;
//document.getElementById("vx").innerHTML = data.playerY;
// nós registramos este evento para se divertir: D
// $("p#log").html('got message: ' + data.msg + data.msgr + ': ' + data.playerX);
//newplayerX = data.playerX;
//newplayerY = data.playerY;
//document.getElementById("vy").innerHTML = newplayerX;
}
);
socket.on('position',
function (data)
{
console.log(data)
$("p#data_recieved").append("<br />\r\n [positions] {" + data.msgr + ": playerX = " + data.playerX + ", playerY = " + data.playerY + "}");
document.getElementById("vy").innerHTML = playerX;
document.getElementById("vx").innerHTML = playerY;
var playerx1 = data.playerX;
var playery1 = data.playerY;
var playerxx = data.playerX+1;
var playeryy = data.playerY+1;
var playerr = data.playerX-1;
var playerrr = data.playerY-1;
objectMap[playerx1][playery1] = 2;
if(playerx1 !== playerxx && playery1 !== playeryy){
delete player[playerxx][playeryy];
delete player[playerr][playerrr];
delete player[playerx1][playeryy];
delete player[playerx1][playerrr];
delete player[playerxx][playery1];
delete player[playerr][playery1];
delete player[playerxx][playerrr];
delete player[playerr][playeryy];
}
}
);
</script>
</head>
<body onLoad="init();">
<p id="nickname"></p>
<canvas id="main" width="750" height="550" style="margin-top:10px; margin-left:10px;"></canvas
onload="initPage();"
onunload="exitPage();"
>
<div id="l">level >> <span id="lvl"></span></div>
<div id="p">pontos >> <span id="pts"></span></div>
<div id="y">posicaox >> <span id="vy"></span></div>
<div id="y">posicaoy >> <span id="vx"></span></div>
<input id ="t"type="text"/>
<input type="boton" value="mostrar" onclick ="mostrarmensagem()"/;>
<p id="log"></p>
<p id="data_recieved"></p>
</body>
</html>