PHP + AJAX + Json (Problemas com servidor)
28/04/2018
0
Este é o código chat.PHP
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>IA Fatec Ourinhos</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=''http://fonts.googleapis.com/css?family=Open+Sans:400,300,700'' rel=''stylesheet'' type=''text/css''> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="main.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <div class="burger"> <div class="burger__patty"></div> <div class="burger__patty"></div> <div class="burger__patty"></div> </div> <nav class="menu"> <div class="menu__brand"> <a href=""> <img src="img/logo.png" align="left" height="100" width="100"></a><br> <h2>Você esta em: Chat ☑</h2> </div> <ul class="menu__list"> <li class="menu__item"><a href="home.html" class="menu__link">Incio</a></li> <li class="menu__item"><a href="chat.php" class="menu__link">Chat ☑</a></li> <li class="menu__item"><a href="index.html" class="menu__link">Sair ☓;</a></li> </ul> </nav> </header> <main> <div id="watson" class="watson" width = "100%" height = "100%"> <div class="mensagens"> <div class="area" id="chat"> </div> </div> <form id="mensagem" class="mensagem"> <input type="text" id="texto" name="texto" placeholder="Digite sua mensagem"/> <button type="submit">Enviar</button> </form> <script type="text/javascript"> $("#chat").append("<div class=\\\\"texto sistema\\\\"><center>Seja bem vindo ao IA Fatec Ourinhos <br>Uma inteligencia congnitiva que utiliza a Tecnologia IBM Watson ♥</center></div>"); //Submeter Formulário $("#mensagem").submit(function(){ //Caso o usuário envie uma mensagem vazia if($("#mensagem #texto").val() === ""){ //Adiciona na área de Chat a mensagem enviada pelo usuário $("#chat").append("<div class=\\\\"texto usuario\\\\">...</div>"); //Faz um scroll para a mensagem mais recente, caso necessário $(".mensagens").animate({scrollTop: $("#chat").height()}); setTimeout(function(){ //Adiciona uma resposta padrão afirmando que o usuário deixou o campo vazio $("#chat").append("<div class=\\\\"texto chatbot\\\\">Você precisa digitar alguma coisa para prosseguir.</div>"); //Faz um scroll para a mensagem mais recente, caso necessário $(".mensagens").animate({scrollTop: $("#chat").height()}); },1000); return false; } //Inicia método AJAX $.ajax({ //Substitua o caminho da URL pelo que você salvou o arquivo de backend url: "conversa.php?texto=" + $("#mensagem #texto").val(), dataType: ''json'', // Determina o tipo de retorno beforeSend: function(){ //Adiciona a mensagem de usuário à lista de mensagens. $("#chat").append("<div class=\\\\"texto usuario\\\\">" + $("#mensagem #texto").val() + "</div>"); }, success: function(resposta){ //Limpa o que o usuário digitou e foca no input para próxima interação. $("#mensagem #texto").val(""); $("#mensagem #texto").focus(); //Caso haja um erro, o Watson retornará a mensagem de erro ao usuário //Basta ler o objeto error para o usuário. if(resposta.error){ $("#chat").append("<div class=\\\\"texto chatbot\\\\">" + resposta.error + "</div>"); return false; } //Colocar a resposta do Watson para o usuário ler //A mensagem de texto pode ser lida a partir da lógica //do json de exemplo da imagem no post var mensagemChatbot = "<div class=\\\\"texto chatbot\\\\">"; mensagemChatbot += resposta.output.text[0]; mensagemChatbot += "</div>"; setTimeout(function(){ $("#chat").append(mensagemChatbot); $(".mensagens").animate({scrollTop: $("#chat").height()}); },1000); } }); return false; }); </script> </div> </main> <script src="js/index.js"></script> </body> </html>
E aqui o arquivo conversa.php
<?php //Garantir que seja lido sem problemas header("Content-Type: text/plain"); //Worskspace $workspace = "8be4d8e2-4d90-4694-869d-320145f86961"; //Dados de Login $username = "b467c7c5-af82-4507-9fb6-ea317bbb2784"; $password = "iTo8f4OYiCMh"; //Capturar Texto //Use $_POST em produção, por segurança $texto = $_REQUEST["texto"]; //Verifica se existe identificador //Caso não haja, crie um if (session_status() == PHP_SESSION_NONE) { session_start(); } if(isset($_SESSION["identificador"])){ $identificador = $_SESSION["identificador"]; }else{ //Você pode usar qualquer identificador //Você pode usar ID do usuário ou similar $identificador = md5(uniqid(rand(), true)); $_SESSION["identificador"] = $identificador; } //URL da API //(deve ser passado o método e a versão da API em GET) $url = "https://gateway.watsonplatform.net/assistant/api/v1/workspaces/" . $workspace; $urlMessage = $url . "/message?version=2017-05-26"; //Dados $dados = "{"; $dados .= "\\\\"input\\\\": "; $dados .= "{\\\\"text\\\\": \\\\"" . $texto . "\\\\"},"; $dados .= "\\\\"context\\\\": {\\\\"conversation_id\\\\": \\\\"" . $identificador . "\\\\","; $dados .= "\\\\"system\\\\": {\\\\"dialog_stack\\\\":[{\\\\"dialog_node\\\\":\\\\"root\\\\"}], \\\\"dialog_turn_counter\\\\": 1, \\\\"dialog_request_counter\\\\": 1}}"; $dados .= "}"; //Cabeçalho que leva tipo de Dados $headers = array(''Content-Type:application/json''); //Iniciando Comunicação cURL $ch = curl_init(); //Selecionando URL curl_setopt($ch, CURLOPT_URL, $urlMessage); //O cabeçalho é importante para definir tipo de arquivo enviado curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); //Habilitar método POST curl_setopt($ch, CURLOPT_POST, 1); //Enviar os dados curl_setopt($ch, CURLOPT_POSTFIELDS, $dados); //Capturar Retorno curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //Autenticação curl_setopt($ch, CURLOPT_USERPWD, "$username:$password"); curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); //Executar $retorno = curl_exec($ch); //Fechar Conexão curl_close($ch); //Imprimir com leitura fácil para humanos $retorno = json_decode($retorno); echo json_encode($retorno, JSON_PRETTY_PRINT); ?>
Se alguém puder me ajudar, ficarei muito feliz :)
Desde já, muito Obrigado!
Leonardo Silva
Posts
28/04/2018
Leonardo Silva
Uncaught TypeError: Cannot read property 'error' of null
at Object.success (chat.php:87)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)
22/05/2019
Jucelio
Uncaught TypeError: Cannot read property 'error' of null
at Object.success (chat.php:87)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
at XMLHttpRequest.<anonymous> (jquery-3.2.1.min.js:4)
Estou com um problema semelhante .. no meu caso o erro mostra a linha " Object.fireWith [as resolveWith]" .. alguém sabe resolver isso ?
22/05/2019
William Nascimento
Este é o código chat.PHP
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>IA Fatec Ourinhos</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href=''http://fonts.googleapis.com/css?family=Open+Sans:400,300,700'' rel=''stylesheet'' type=''text/css''> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="main.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header class="header"> <div class="burger"> <div class="burger__patty"></div> <div class="burger__patty"></div> <div class="burger__patty"></div> </div> <nav class="menu"> <div class="menu__brand"> <a href=""> <img src="img/logo.png" align="left" height="100" width="100"></a><br> <h2>Você esta em: Chat ☑</h2> </div> <ul class="menu__list"> <li class="menu__item"><a href="home.html" class="menu__link">Incio</a></li> <li class="menu__item"><a href="chat.php" class="menu__link">Chat ☑</a></li> <li class="menu__item"><a href="index.html" class="menu__link">Sair ☓;</a></li> </ul> </nav> </header> <main> <div id="watson" class="watson" width = "100%" height = "100%"> <div class="mensagens"> <div class="area" id="chat"> </div> </div> <form id="mensagem" class="mensagem"> <input type="text" id="texto" name="texto" placeholder="Digite sua mensagem"/> <button type="submit">Enviar</button> </form> <script type="text/javascript"> $("#chat").append("<div class=\\\\\\\\"texto sistema\\\\\\\\"><center>Seja bem vindo ao IA Fatec Ourinhos <br>Uma inteligencia congnitiva que utiliza a Tecnologia IBM Watson ♥</center></div>"); //Submeter Formulário $("#mensagem").submit(function(){ //Caso o usuário envie uma mensagem vazia if($("#mensagem #texto").val() === ""){ //Adiciona na área de Chat a mensagem enviada pelo usuário $("#chat").append("<div class=\\\\\\\\"texto usuario\\\\\\\\">...</div>"); //Faz um scroll para a mensagem mais recente, caso necessário $(".mensagens").animate({scrollTop: $("#chat").height()}); setTimeout(function(){ //Adiciona uma resposta padrão afirmando que o usuário deixou o campo vazio $("#chat").append("<div class=\\\\\\\\"texto chatbot\\\\\\\\">Você precisa digitar alguma coisa para prosseguir.</div>"); //Faz um scroll para a mensagem mais recente, caso necessário $(".mensagens").animate({scrollTop: $("#chat").height()}); },1000); return false; } //Inicia método AJAX $.ajax({ //Substitua o caminho da URL pelo que você salvou o arquivo de backend url: "conversa.php?texto=" + $("#mensagem #texto").val(), dataType: ''json'', // Determina o tipo de retorno beforeSend: function(){ //Adiciona a mensagem de usuário à lista de mensagens. $("#chat").append("<div class=\\\\\\\\"texto usuario\\\\\\\\">" + $("#mensagem #texto").val() + "</div>"); }, success: function(resposta){ //Limpa o que o usuário digitou e foca no input para próxima interação. $("#mensagem #texto").val(""); $("#mensagem #texto").focus(); //Caso haja um erro, o Watson retornará a mensagem de erro ao usuário //Basta ler o objeto error para o usuário. if(resposta.error){ $("#chat").append("<div class=\\\\\\\\"texto chatbot\\\\\\\\">" + resposta.error + "</div>"); return false; } //Colocar a resposta do Watson para o usuário ler //A mensagem de texto pode ser lida a partir da lógica //do json de exemplo da imagem no post var mensagemChatbot = "<div class=\\\\\\\\"texto chatbot\\\\\\\\">"; mensagemChatbot += resposta.output.text[0]; mensagemChatbot += "</div>"; setTimeout(function(){ $("#chat").append(mensagemChatbot); $(".mensagens").animate({scrollTop: $("#chat").height()}); },1000); } }); return false; }); </script> </div> </main> <script src="js/index.js"></script> </body> </html>
E aqui o arquivo conversa.php
<?php //Garantir que seja lido sem problemas header("Content-Type: text/plain"); //Worskspace $workspace = "8be4d8e2-4d90-4694-869d-320145f86961"; //Dados de Login $username = "b467c7c5-af82-4507-9fb6-ea317bbb2784"; $password = "iTo8f4OYiCMh"; //Capturar Texto //Use $_POST em produção, por segurança $texto = $_REQUEST["texto"]; //Verifica se existe identificador //Caso não haja, crie um if (session_status() == PHP_SESSION_NONE) { session_start(); } if(isset($_SESSION["identificador"])){ $identificador = $_SESSION["identificador"]; }else{ //Você pode usar qualquer identificador //Você pode usar ID do usuário ou similar $identificador = md5(uniqid(rand(), true)); $_SESSION["identificador"] = $identificador; } //URL da API //(deve ser passado o método e a versão da API em GET) $url = "https://gateway.watsonplatform.net/assistant/api/v1/workspaces/" . $workspace; $urlMessage = $url . "/message?version=2017-05-26"; //Dados $dados = "{"; $dados .= "\\\\\\\\"input\\\\\\\\": "; $dados .= "{\\\\\\\\"text\\\\\\\\": \\\\\\\\"" . $texto . "\\\\\\\\"},"; $dados .= "\\\\\\\\"context\\\\\\\\": {\\\\\\\\"conversation_id\\\\\\\\": \\\\\\\\"" . $identificador . "\\\\\\\\","; $dados .= "\\\\\\\\"system\\\\\\\\": {\\\\\\\\"dialog_stack\\\\\\\\":[{\\\\\\\\"dialog_node\\\\\\\\":\\\\\\\\"root\\\\\\\\"}], \\\\\\\\"dialog_turn_counter\\\\\\\\": 1, \\\\\\\\"dialog_request_counter\\\\\\\\": 1}}"; $dados .= "}"; //Cabeçalho que leva tipo de Dados $headers = array(''Content-Type:application/json''); //Iniciando Comunicação cURL $ch = curl_init(); //Selecionando URL curl_setopt($ch, CURLOPT_URL, $urlMessage); //O cabeçalho é importante para definir tipo de arquivo enviado curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); //Habilitar método POST curl_setopt($ch, CURLOPT_POST, 1); //Enviar os dados curl_setopt($ch, CURLOPT_POSTFIELDS, $dados); //Capturar Retorno curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //Autenticação curl_setopt($ch, CURLOPT_USERPWD, "$username:$password"); curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); //Executar $retorno = curl_exec($ch); //Fechar Conexão curl_close($ch); //Imprimir com leitura fácil para humanos $retorno = json_decode($retorno); echo json_encode($retorno, JSON_PRETTY_PRINT); ?>
Se alguém puder me ajudar, ficarei muito feliz :)
Desde já, muito Obrigado!
Olá Leonardo, acredito que se você mudar a url do seu ajax apara o caminho do seu servidor, volte a funcionar como o da sua máquina local. Substitua esse trecho :
$.ajax({ url: "conversa.php?texto=" + $("#mensagem #texto").val(),
Por esse:
[code=js] $.ajax({ url: window.location.origin"/conversa.php?texto=" + $("#mensagem #texto").val(),
Clique aqui para fazer login e interagir na Comunidade :)