3
How can I integrate an chat hosted in Heroku to my PHP project on another server? The application is simple and does not use database, the idea would be that in PHP when doing login automatically in Heroku the user enters the chat...displaying a "widget" style window in the website PHP.
4
Good was a fight to find this answer so I share here! Example tested on localhost! Requirements see package.json!
I used xampp as a local server, I don’t think it makes a difference to use wamp! The index.php and home.php page are in C: xampp htdocs site or in the "site" folder that is being served by Apache from xampp. Already the folder where the app.js file (Nodejs server) and the modules "express" and "socket-io" is in the desktop running on the port "3000".
Note that starting from version 1.1.0 socket.io.js is now called via CDN! It’s that simple now just add up.
DEMO demonstration with site server (Apache) in Hostinger and Nodejs server in Heroku
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<center>
<form action="home.php" method="post">
<input type="text" name="name" size="45" placeholder="Diga seu nome :)">
<input type="submit" value="Entrar">
</form>
</center>
</body>
</html>
<?php
header ('Content-type: text/html; charset=UTF-8');
if(!isset($_SESSION)) session_start();
$name = $_POST['name'];
$_SESSION['name'] = $name;
echo $name;
?>
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial;background:#9F9F9F; }
#chat{position:fixed;width:20%;height:100%;top:0px;right:0px;background:#181337;}
#message_space{position:absolute;width:100%;height:80%;top:3%;right:0px;background:#FF71B8;overflow-x:hidden;overflow-y:auto;}
form { background: #000; padding: 3px; bottom: 0px;right:0px; width: 100%;position:absolute; }
form textarea {border: 0; padding: 10px; width: 100%;overflow-x:hidden;overflow-y:auto; }
#messages { list-style-type:none;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;word-wrap:break-word; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
#visitas{position:absolute;width:100%;padding:1%;top:0px;right:0px;background:#80FFFF;}
</style>
</head>
<body>
<div id="chat">
<center><b><span id="visitas"></span></b></center>
<div id="message_space">
<ul id="messages"></ul>
</div>
<form action="">
<textarea id="m" autocomplete="off" placeholder="Seu texto aqui..." ></textarea>
<input id="name" type="hidden" value="<?php echo $name; ?>">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.1.0.js"></script>
<script>
// Aqui declaramos a conexão com o caminho e a porta a ser usada pelo socket.io!!!
var socket = io('http://localhost:3000');
// Capturando nome!!
var name = $('#name').val();
// Aqui iniciamos contador de usuários!!!
socket.on('visits', function(visitas){
document.getElementById('visitas').innerHTML = "Usuários Logados: " + visitas;
});
// Iniciamos a função de envio de mensagem com a tecla "enter" !!!
$(function(){
$("#m").keypress(function (e) {
if(e.which == 13) {
// se pressionada a tecla "enter" enviamos o conteúdo ao servidor !!!
socket.emit('chat message', name + ' disse: ' + $('#m').val());
// Aqui limpamos a área de texto !!!
$('#m').val('');
return false;
}
});
});
// Aqui declaramos o recebimento das mensagens de volta (call back) !!!
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
// Declaramos a variavel app e requisitamos o "express"
var app = require('express')();
// Declaramos a variavel e o servidor
var http = require('http').Server(app);
// Declaramos a variavel "io" e instanciamos com o servidor
var io = require('socket.io')(http);
// Declaramos de onde virão requisições e para onde responderemos!
app.get('http:/localhost/site', function(req, res){
// Indicamos a página para resposta!
res.sendfile('home.php');
});
// Criamos uma variavel e atribuimos um valor inicial de zero (PS: valor real!)
var visitas = 0;
// Declaramos conexão!
io.on('connection', function(socket){
// Incrementa o total de visitas no site (total de usuários!).
visitas++;
// Envia o total de visitas para todos os usuários.
io.emit('visits', visitas);
// Exibimos no console a rota da conexão!
console.log(socket.client.conn.remoteAddress);
// Imprime no console que houve uma conexão !!!
console.log('a user connected');
socket.on('disconnect', function(){
// Quando houver uma desconexão fazemos um decremento do número de usuário!
visitas--;
// Atualiza o total de usuários para os demais usuários.
io.emit('visits', visitas);
// Imprime no console que houve uma desconexão e quantos usuários estão online!!!
console.log('user disconnected...rest: ' + visitas + ' users online!');
});
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
// Startamos na porta "3000" e exibimos no console!
http.listen(3000, function(){
console.log('Start Server on Port: 3000');
});
{
"name": "Nome do aplicativo",
"version": "0.0.1",
"description": "Descrição do que é isso",
"main": "app.js",
"dependencies": {
"socket.io": "~1.1.0",
"express": "~4.9.1"
},
"devDependencies": {},
"author": "Seu Nome",
"url": "http://seusite.com",
"email": "[email protected]",
"license": "o tipo de licença",
"bugs": {
"url": "http://endercoparareportarbugs.com"
},
"homepage": "http://suapaginaprincipal.com"
}
Browser other questions tagged php javascript node.js
You are not signed in. Login or sign up in order to post.
Of course...I was anxious that I forgot I could answer my own question :P
– Lauro Moraes