2

Olá, devido alguns problemas para carregar as bibliotecas do Twitter bootstrap em meu projeto, fiz várias alterações nela, no qual com ajuda de outros usuarios, cheguei ao seguinte código do Node.js:

Node.js

var http = require("http").createServer(servidor);
var io = require("socket.io").listen(http);
var fs = require("fs");
var querystring = require('querystring');

var contentTypes = {
    js: 'text/javascript',
    css: 'text/css',
    json: 'application/json',
    png: 'image/png',
    jpg: 'image/png',
    wav: 'audio/wav'
};

var recebido;

function processPost(request, response, callback) {
    // Código boilerplate pra receber a querystring pedido HTTP,
    // convertê-la e formatá-la em uma coleção de pares chave-valor

    var queryData = "";
    if(typeof callback !== 'function') return null;

    request.on('data', function(data) {
        queryData += data;
    });

    request.on('end', function() {
        request.post = querystring.parse(queryData);
        callback();
    });
}

function servidor(req, res) {
    var contentType = 'text/html';
    var filePath = '.' + req.url;

    if(req.method == 'POST') {
        // Se o método do pedido for HTTP POST, processa a querystring

        processPost(req, res, function() {
            // Imprime a querystring convertida em chaves-valores
            console.log(req.post);
            // O request.post está disponível para ser usado aqui

            // Retorna a página para o cliente com o cód. HTTP 200 (OK)
            res.writeHead(200, "OK", {'Content-Type': 'text/plain'});
            res.end();
        });
    }
    else if (filePath == './' || filePath == './index.html') filePath = './index.html';
    else contentType = contentTypes[req.url.split('.').pop()];
    fs.readFile(filePath, function(error, content) {
        if (error) {
            if (error.code == 'ENOENT') {
                fs.readFile('./404.html', function(error, content) {
                    res.writeHead(200, {
                        'Content-Type': 'text/html'
                    });
                    res.end(content, 'utf-8');
                });
            } else {
                res.writeHead(500);
                res.end('Ooops... houve um erro: ' + error.code + ' ..\n');
                res.end();
            }
        } else {
            res.writeHead(200, {
                'Content-Type': contentType
            });
            res.end(content, 'utf-8');
        }
    });
}


http.get('/teste', function(req, res) {
    res.charset = 'UTF-8'
    res.send(recebido);
});


http.listen(5000, "192.168.0.108", function() {
    var host = http.address().address;
    var port = http.address().port;
    console.log('Exemplo na URL http://%s:%s', host, port);
});

Porém, quando coloco no meu Browser o IP http://192.168.0.108/teste, não volta nenhuma informação. Abaixo meu código HTML:

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>SmartHouse</title>

    <!-- Bootstrap Core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="/css/sb-admin.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="/css/plugins/morris.css" rel="stylesheet">

    <!-- Custom Fonts
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> -->
    <script src="/font-awesome/font.js"></script>

    <script src="/js/socket.io-1.4.5.js"></script> <!-- chamamos o socket.io que por padrão o socket.io cria a rota http sem precisarmos interferir -->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">Sistema Smart House - Automação Residencial</a>
            </div>
            <!-- Top Menu Items -->

            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav side-nav">
                    <li>
                        <a href="/index.html"><i class="fa fa-home"></i> Home</a>
                    </li>
                    <li>
                        <a href="sala.html"><i class="fa fa-television"></i> Sala</a>
                    </li>
                    <li>
                        <a href="cozinha.html"><i class="fa fa-birthday-cake"></i> Cozinha</a>
                    </li>
                    <li class="active">
                        <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-bed"></i> Quartos <i class="fa fa-fw fa-caret-down"></i></a>
                        <ul id="demo" class="collapse">
                            <li class="active">
                                <a href="quarto1.html"> Quarto 1</a>
                            </li>
                            <li>
                                <a href="quarto2.html"> Quarto 2</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#"><i class="fa fa-bell"></i> Alarme</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>

        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">
                            Quarto 1 <small>Geral</small>
                        </h1>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-bed"></i> Quarto 1
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->
                <div class="row">
                    <div class="col-lg-4">
                    </div>
                        <div class="col-lg-4">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h1><center>Quarto 1 - Lampada</center></h1>
                                </div>
                                <div class="panel-body">
                                    <a onclick="enviarComandoON()" class="btn btn-success btn-lg btn-block" id="QTD1LED, ON">ON</a>
                                    <a onclick="enviarComandoOFF()" class="btn btn-danger btn-lg btn-block" id="QTD1LED, OFF">OFF</a>
                                </div>
                            </div>
                        </div>
                    <div class="col-lg-4">
                    </div>
                </div>
                <!-- /.row -->

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="/js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="/js/bootstrap.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="/js/plugins/morris/raphael.min.js"></script>
    <script src="/js/plugins/morris/morris.min.js"></script>
    <script src="/js/plugins/morris/morris-data.js"></script>
    <script type="text/javascript">
        var socket = io.connect();
        //função que é disparada quando é pressionado o botão
        function enviarComandoON(){
            var status = document.getElementById("QTD1LED, ON").id;
            var msg = '{' + status + '}';
            socket.emit('mensagem', msg); //enviamos o valor do input
        }
        function enviarComandoOFF(){
            var status = document.getElementById("QTD1LED, OFF").id;
            var msg = '{' + status + '}';
            socket.emit('mensagem', msg); //enviamos o valor do input
        }
    </script>

</body>

</html>

Como posso alterar meu código, utilizando as bibliotecas informadas acima, para funcionar o comando GET, no qual vai receber informações da variavel "recebido", uma string, como por exemplo: {QTD1LED, ON}

6
  • Possível duplicata de Botões com Action de HTTP Request
    – rodorgas
    Commented 11/09/2016 às 17:53
  • na verdade esse é teste com o Socket i.o @rodorgas Commented 11/09/2016 às 17:57
  • Essa sua outra pergunta tbm é com socket.io pt.stackoverflow.com/questions/152121/html-bootstrap-node-js Tem algum motivo para usar socket.io?
    – rodorgas
    Commented 11/09/2016 às 18:00
  • @rodorgas não, mas eu preciso clicar em um botão e enviar informações para o Node Commented 11/09/2016 às 18:09
  • 1
    Como já comentei anteriormente, você está usando o módulo socket.io desnecessariamente...Agora ficou pior ainda, pois você incluiu o framework express desnecessariamente.... O express está roubando o tratamento do evento request, por isso sua função servidor não está sendo chamada...Minha sugestão é: primeiro retire socket.io e express. Depois teste e veja o que acontece. Provavelmente vai ter mais erros, mas do jeito que está não vai funcionar mesmo.
    – zentrunix
    Commented 11/09/2016 às 22:55

1 Resposta 1

0

Não vou entrar em detalhes sobre seu programa, teria que entendê-lo primeiro, mas vou mostrar um exemplo mínimo de uma aplicação node.js.

Importante: você não precisa fazer "get" para ler um request http, o node já faz isso automaticamente.

Exemplo 1

Esta é uma aplicação node.js que responde "Hello world" quando consultada pelo browser com a url http://127.0.0.1:8081/.

Note que o node faz automaticamente a recepção dos requests, você não precisa fazer "http.get", nem usar "express", nem "socket.io".

var http = require("http");

http.createServer(function (request, response) {

   // Send the HTTP header 
   // HTTP Status: 200 : OK
   // Content Type: text/plain
   response.writeHead(200, {'Content-Type': 'text/plain'});

   // Send the response body as "Hello World"
   response.end('Hello World\n');
}).listen(8081);

// Console will print the message
console.log('Server running at http://127.0.0.1:8081/');

Esta aplicação é escrita no estilo resumido dos programadores JavaScript, praticamente todo mundo escreve assim, mas eu como programador C++ tenho uma certa dificuldade com esse estilo.

Exemplo 2

Neste exemplo eu separei um pouco as funções, mas o funcionamento é igual ao do 1º exemplo, só que mostrando ip e porta do cliente que se conectou.

var http = require("http");

var server = http.createServer(function (request, response) {

   // Send the HTTP header 
   // HTTP Status: 200 : OK
   // Content Type: text/plain
   response.writeHead(200, {'Content-Type': 'text/plain'});

   // Send the response body as "Hello World"
   response.end('Hello World\n');
});

server.listen("8081", "0.0.0.0", function() {
   var host = this.address().address;
   var port = this.address().port;
   console.log("aguardando conexoes em " + host + ":" + port)
   });

server.on("connection", function(socket) {
   var host = socket.remoteAddress;
   var port = socket.remotePort;
   console.log("recebeu conexao de " + host + ":" + port);
});

Exemplo 3

Este exemplo funciona igual ao exemplo anterior, mas eu separei tudo que podia separar. Note que os programadores JavaScript não programam assim, mas eu acho que fica mais fácil de entender, menos sobrecarregado, especialmente para programas pequenos.

var http = require("http")

function onRequest(request, response)
{
   // Send the HTTP header 
   // HTTP Status: 200 : OK
   // Content Type: text/plain
   response.writeHead(200, {'Content-Type': 'text/plain'});

   // Send the response body as "Hello World"
   response.end('Hello World\n');
}

function onListening()
{
   var host = this.address().address;
   var port = this.address().port;
   console.log("aguardando conexoes em " + host + ":" + port);
}

function onConnection(socket)
{
   var host = socket.remoteAddress;
   var port = socket.remotePort;
   console.log("recebeu conexao de " + host + ":" + port);
}

var server = http.createServer(onRequest);

server.listen(8081, "127.1", onListening);

server.on("connection", onConnection);

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .