創建彈出式聊天 window 的聊天腳本問題
[英]Chatscript problem with creating pop-up chat window
問題描述
我使用聊天腳本創建了一個機器人。 目標是將它作為網站的助手（用戶將提出有關網站的問題，機器人將回答/可能將他重定向到網站的適當部分）。
機器人使用二進制文件夾中提供的.exe 響應良好，甚至在使用 WEBINTERFACE\BETTER 文件夾中的.php 文件時也能正常響應。嘗試在彈出式聊天 window 中使用它時會出現問題，所說的 Z05B44 是基於 ADC74CBD2702FBF24 的在這里（ https://www.w3schools.com/howto/howto_js_popup_chat.asp ）。
當我嘗試運行該頁面時，機器人要么無響應，要么產生以下錯誤：
Fatal error: Uncaught TypeError: extract(): Argument #1 ($array) must be of type array, null given in C:\xampp\htdocs\chatscript\WEBINTERFACE\htmltest\ui2.php:38 Stack trace: #0 C:\xampp\htdocs\chatscript\WEBINTERFACE\htmltest\ui2.php(38): extract(NULL) #1 {main} thrown in C:\xampp\htdocs\chatscript\WEBINTERFACE\htmltest\ui2.php on line 38
ui2.php的代碼（與聊天腳本的原始ui.php文件相同）：
$host = "localhost";// <<<<<<<<<<<<<<<<< YOUR CHATSCRIPT SERVER IP ADDRESS OR HOST-NAME GOES HERE
$port = 1024; // <<<<<<< your port number if different from 1024
$bot = ""; // <<<<<<< desired botname, or "" for default bot
//=========================
// Please do not change anything below this line.
$null = "\x00";
$postVars = filter_input_array(INPUT_POST, FILTER_SANITIZE_STRING);
extract($postVars);
if (isset($send))
{
// open client connection to TCP server
$userip = $_SERVER['REMOTE_ADDR']; // get actual ip address of user as his id.
// To check for proxies you can replace the line above with the code below, but it is easily faked so it's insecure:
// $userip = isset($_SERVER['X_FORWARDED_FOR']) ? $_SERVER['X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
$msg = $userip.$null.$bot.$null.$message.$null;
// fifth parameter in fsockopen is timeout in seconds
if(!$fp=fsockopen($host,$port,$errstr,$errno,300))
{
trigger_error('Error opening socket',E_USER_ERROR);
}
// write message to socket server
$ret = '';
fputs($fp,$msg);
while (!feof($fp))
{
$ret .= fgets($fp, 512);
}
// close socket connection
fclose($fp);
exit($ret);}
還有我的 index2.php （聊天 window 所在的位置）：
<!DOCTYPE HTML>
<html>
<head>
<title>
CHATSCRIPT SERVER
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
/* Button used to open the chat form - fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
/* The popup chat - hidden by default */
.chat-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Full-width textarea */
.form-container textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
resize: none;
min-height: 30px;
}
#responseHolder {
min-width: 10%;
min-height: 10%;
width: 80%;
height: 300px;
overflow: auto;
margin: 10px auto;
background-color: #f1f1f1;
}
/* When the textarea gets focus, do something */
.form-container textarea:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/send button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
</style>
</head>
<body>
<button class="open-button" onclick="openForm()">Chat</button>
<!--<div class="chat-popup" id="myForm" action="#">-->
<input type="hidden" id="txtUser" name="user" size="20" value="You" />
<div class="chat-popup" id="myForm2" action="#">
<div id="responseHolder"></div>
<form id="myForm" class="form-container" action="#">
<label for="message"><b>Message</b></label>
<textarea type="text" placeholder="Type message.." name="message" id="txtMessage" required></textarea>
<button type="submit" class="btn" name="send">Send</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var botName = 'Testy McTesty'; // change this to your bot name
// declare timer variables
var alarm = null;
var callback = null;
var loopback = null;
$(function(){
$('#myForm').submit(function(e){
// this function overrides the form's submit() method, allowing us to use AJAX calls to communicate with the ChatScript server
e.preventDefault(); // Prevent the default submit() method
var name = $('#txtUser').val();
if (name == '') {
alert('Please provide your name.');
document.getElementById('txtUser').focus();
}
var chatLog = $('#responseHolder').html();
var youSaid = '<strong>' + name + ':</strong> ' + $('#txtMessage').val() + "<br>\n";
update(youSaid);
var data = $(this).serialize();
sendMessage(data);
$('#txtMessage').val('').focus();
});
// any user typing cancels loopback or callback for this round
$('#txtMessage').keypress(function(){
window.clearInterval(loopback);
window.clearTimeout(callback);
});
});
function sendMessage(data){ //Sends inputs to the ChatScript server, and returns the response- data - a JSON string of input information
$.ajax({
url: 'ui2.php',
dataType: 'text',
data: data,
type: 'post',
success: function(response){
processResponse(parseCommands(response));
},
error: function(xhr, status, error){
alert('oops? Status = ' + status + ', error message = ' + error + "\nResponse = " + xhr.responseText);
}
});
}
function parseCommands(response){ // Response is data from CS server. This processes OOB commands sent from the CS server returning the remaining response w/o oob commands
var len = response.length;
var i = -1;
while (++i < len )
{
if (response.charAt(i) == ' ' || response.charAt(i) == '\t') continue; // starting whitespace
if (response.charAt(i) == '[') break; // we have an oob starter
return response; // there is no oob data
}
if ( i == len) return response; // no starter found
var user = $('#txtUser').val();
// walk string to find oob data and when ended return rest of string
var start = 0;
while (++i < len )
{
if (response.charAt(i) == ' ' || response.charAt(i) == ']') // separation
{
if (start != 0) // new oob chunk
{
var blob = response.slice(start,i);
start = 0;
var commandArr = blob.split('=');
if (commandArr.length == 1) continue; // failed to split left=right
var command = commandArr[0]; // left side is command
var interval = (commandArr.length > 1) ? commandArr[1].trim() : -1; // right side is millisecond count
if (interval == 0) /* abort timeout item */
{
switch (command){
case 'alarm':
window.clearTimeout(alarm);
alarm = null;
break;
case 'callback':
window.clearTimeout(callback);
callback = null;
break;
case 'loopback':
window.clearInterval(loopback);
loopback = null;
break;
}
}
else if (interval == -1) interval = -1; // do nothing
else
{
var timeoutmsg = {user: user, send: true, message: '[' + command + ' ]'}; // send naked command if timer goes off
switch (command) {
case 'alarm':
alarm = setTimeout(function(){sendMessage(timeoutmsg );}, interval);
break;
case 'callback':
callback = setTimeout(function(){sendMessage(timeoutmsg );}, interval);
break;
case 'loopback':
loopback = setInterval(function(){sendMessage(timeoutmsg );}, interval);
break;
}
}
} // end new oob chunk
if (response.charAt(i) == ']') return response.slice(i + 2); // return rest of string, skipping over space after ]
} // end if
else if (start == 0) start = i; // begin new text blob
} // end while
return response; // should never get here
}
function update(text){ // text is HTML code to append to the 'chat log' div. This appends the input text to the response div
var chatLog = $('#responseHolder').html();
$('#responseHolder').html(chatLog + text);
var rhd = $('#responseHolder');
var h = rhd.get(0).scrollHeight;
rhd.scrollTop(h);
}
function processResponse(response) { // given the final CS text, converts the parsed response from the CS server into HTML code for adding to the response holder div
var botSaid = '<strong>' + botName + ':</strong> ' + response + "<br>\n";
update(botSaid);
}
</script>
<script>
function openForm() {
document.getElementById("myForm2").style.display = "block";
}
function closeForm() {
document.getElementById("myForm2").style.display = "none";
}
</script>
</body>
</html>
和聊天腳本原始索引。php：
<!DOCTYPE HTML>
<html>
<head>
<title>
CHATSCRIPT SERVER
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#responseHolder {
min-width: 600px;
min-height: 300px;
width: 80%;
height: 300px;
overflow: auto;
margin: 10px auto;
background-color: pink;
}
</style>
</head>
<body>
<div id="responseHolder"></div>
<form id="frmChat" action="#">
<p>
Enter your message below:
</p>
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" id="txtUser" name="user" size="20" value="" />
<input type="hidden" name="send" />
</td>
</tr>
<tr>
<td>Message:</td>
<td><input type="text" name="message" id="txtMessage" size="70" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="send" value="Send Value" /></td>
</tr>
</table>
</form>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
var botName = 'Testy McTesty'; // change this to your bot name
// declare timer variables
var alarm = null;
var callback = null;
var loopback = null;
$(function(){
$('#frmChat').submit(function(e){
// this function overrides the form's submit() method, allowing us to use AJAX calls to communicate with the ChatScript server
e.preventDefault(); // Prevent the default submit() method
var name = $('#txtUser').val();
if (name == '') {
alert('Please provide your name.');
document.getElementById('txtUser').focus();
}
var chatLog = $('#responseHolder').html();
var youSaid = '<strong>' + name + ':</strong> ' + $('#txtMessage').val() + "<br>\n";
update(youSaid);
var data = $(this).serialize();
sendMessage(data);
$('#txtMessage').val('').focus();
});
// any user typing cancels loopback or callback for this round
$('#txtMessage').keypress(function(){
window.clearInterval(loopback);
window.clearTimeout(callback);
});
});
function sendMessage(data){ //Sends inputs to the ChatScript server, and returns the response- data - a JSON string of input information
$.ajax({
url: 'ui.php',
dataType: 'text',
data: data,
type: 'post',
success: function(response){
processResponse(parseCommands(response));
},
error: function(xhr, status, error){
alert('oops? Status = ' + status + ', error message = ' + error + "\nResponse = " + xhr.responseText);
}
});
}
function parseCommands(response){ // Response is data from CS server. This processes OOB commands sent from the CS server returning the remaining response w/o oob commands
var len = response.length;
var i = -1;
while (++i < len )
{
if (response.charAt(i) == ' ' || response.charAt(i) == '\t') continue; // starting whitespace
if (response.charAt(i) == '[') break; // we have an oob starter
return response; // there is no oob data
}
if ( i == len) return response; // no starter found
var user = $('#txtUser').val();
// walk string to find oob data and when ended return rest of string
var start = 0;
while (++i < len )
{
if (response.charAt(i) == ' ' || response.charAt(i) == ']') // separation
{
if (start != 0) // new oob chunk
{
var blob = response.slice(start,i);
start = 0;
var commandArr = blob.split('=');
if (commandArr.length == 1) continue; // failed to split left=right
var command = commandArr[0]; // left side is command
var interval = (commandArr.length > 1) ? commandArr[1].trim() : -1; // right side is millisecond count
if (interval == 0) /* abort timeout item */
{
switch (command){
case 'alarm':
window.clearTimeout(alarm);
alarm = null;
break;
case 'callback':
window.clearTimeout(callback);
callback = null;
break;
case 'loopback':
window.clearInterval(loopback);
loopback = null;
break;
}
}
else if (interval == -1) interval = -1; // do nothing
else
{
var timeoutmsg = {user: user, send: true, message: '[' + command + ' ]'}; // send naked command if timer goes off
switch (command) {
case 'alarm':
alarm = setTimeout(function(){sendMessage(timeoutmsg );}, interval);
break;
case 'callback':
callback = setTimeout(function(){sendMessage(timeoutmsg );}, interval);
break;
case 'loopback':
loopback = setInterval(function(){sendMessage(timeoutmsg );}, interval);
break;
}
}
} // end new oob chunk
if (response.charAt(i) == ']') return response.slice(i + 2); // return rest of string, skipping over space after ]
} // end if
else if (start == 0) start = i; // begin new text blob
} // end while
return response; // should never get here
}
function update(text){ // text is HTML code to append to the 'chat log' div. This appends the input text to the response div
var chatLog = $('#responseHolder').html();
$('#responseHolder').html(chatLog + text);
var rhd = $('#responseHolder');
var h = rhd.get(0).scrollHeight;
rhd.scrollTop(h);
}
function processResponse(response) { // given the final CS text, converts the parsed response from the CS server into HTML code for adding to the response holder div
var botSaid = '<strong>' + botName + ':</strong> ' + response + "<br>\n";
update(botSaid);
}
</script>
</body>
</html>
是的，除了聊天窗口之外，web 頁面是空的（它本身沒有太多編輯），因為我想讓機器人在 web 頁面中工作，然后再進行其他任何操作（我使用 ZF8756D88C7D3B98E2ECB33F551616D 進行連接）。
1 個解決方案
解決方案1
0 已采納 2021-01-24 08:50:26
如果機器人使用 BETTER ui 正確對應，則首先嘗試分析發送到ui.php的 $postVars（帶有 vardump）。 然后按照相同的步驟在彈出窗口中使用它。
該錯誤告訴您，這是 ui.php 期望您的 index2.php 中的數組，但它沒有任何可提取的內容。
因為數據是通過AJAX發送的，可能和原來的 JS 代碼和你彈出的 JS 代碼有沖突。
鼠標懸停功能未創建彈出窗口
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.