How can I integrate a chat application hosted in Heroku to my PHP project on another server? The application is simple and does not use bank, the idea would be that in PHP when doing login automatically in Heroku the user enters the chat ... showing a window style "widget "on the PHP site.
Integrate application nodejs to php site on different servers?
3
asked by anonymous 09.09.2014 / 08:34
1 answer
4
Edited 12/09/2014
Well it was a fight to find this answer so I share it here! Example tested on localhost! Requirements vide package.json!
I used xampp as a local server, I do not think it makes a difference using wamp! The index.php and home.php page are in C: \ xampp \ htdocs \ site ie the "site" folder that is being served by Apache from xampp. Now the folder where the app.js file (NodeJS server) and the "express" and "socket-io" modules are on the desktop running on port "3000".
Note that from version 1.1.0 socket.io.js happens to be called via CDN! It's very simple now just increment.
DEMO demo with site server (Apache) on Hostinger and NodeJS server on Heroku
p>Page index.php
<!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>
Home.php page
<?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><scriptsrc="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>
Page app.js (NodeJS server)
// 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');
});
Package.json file
{
"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"
}
12.09.2014 / 16:42