jQuery_jquery를 기반으로 간단한 인공지능 대화방 구현하기

본 글은 jQuery를 기반으로 한 간단한 인공지능 채팅방을 구현하기 위한 관련 정보를 위주로 자세하게 소개하고 있습니다. 관심 있는 친구들이 참고하면 좋을 것 같습니다.

던지는데 2시간이 걸렸습니다. 나오면 jQuery 인공지능 채팅방은 이렇게 생겼습니다.

주요 기능:

1. 당연히 채팅이죠~ 비행기 버튼을 누르거나 Enter를 누르면 메시지가 전송됩니다. 패널에 메시지를 보냅니다.
2. 특정 내용을 입력하면 시스템에서 해당 답변을 제공합니다. (여기에서는 안녕하세요, 잘 지내세요 및 시간 요청에 대한 자동 답변만 설정했습니다.)
3. 십자가를 클릭하면 패널의 모든 채팅 기록이 삭제됩니다.
4. 시간을 물으면 현재 시간에 따라 다른 응답이 제공됩니다. 예를 들어 22~23시라면 시스템에서 "잘 자"라고 답합니다.
5. 채팅이 진행됨에 따라 채팅창 오른쪽 스크롤바가 하단에 그대로 유지됩니다.

HTML:

<p class="chat-box"> 
</p> 
<form class="form-inline chat-form"> 
 <input type="text" class="form-control chat-message" placeholder="Say Something"> 
 <button type="button" class="btn btn-primary chat-send" title="Send Message"> 
 <i class="fa fa-paper-plane" aria-hidden="true"> 
 </i> 
 </button> 
 <button type="reset" class="btn btn-success chat-reset" title="Reset Message"> 
 <i class="fa fa-refresh" aria-hidden="true"> 
 </i> 
 </button> 
 <button type="button" class="btn btn-danger chat-clear" title="Clear the Chat Box"> 
 <i class="fa fa-times" aria-hidden="true"> 
 </i> 
 </button> 
</form> 
<hr> 
<footer> 
 Designed By 
 <a href="http://blog.csdn.net/alenhhy" rel="external nofollow" target="_blank"> 
 Alen Hu 
 </a> 
</footer>

*Bootstrap3 프레임워크를 사용합니다.

JQuery:

$(document).ready(function() { 
 
 //send the message by click 
 $(".chat-send").click(sendMsg); 
 
 //press enter to send 
 $("form").keypress(function(event) { 
  if (event.keyCode === 13) { 
   event.preventDefault(); 
   sendMsg(); 
  } 
 }); 
 
 //clear the chat box 
 $(".chat-clear").click(clearChatBox); 
}); 
 
//send message to chat box 
function sendMsg() { 
 var msg = $(".chat-message"); 
 var msgVal = msg.val(); 
 var chatBox = $(".chat-box"); 
 if (msgVal) { 
  var msgAppend = "<p><span id=&#39;you&#39;>You: </span>" + msgVal + "</p><hr class=&#39;you-hr&#39;>"; 
  chatBox.append(msgAppend); 
 } else {} 
 
 //dialog reply 
 dialog(msgVal); 
 
 //empty input 
 msg.val(""); 
 
 //keep the scroll in bottom 
 chatBox.scrollTop(chatBox[0].scrollHeight); 
} 
 
//set up the AI dialog 
function dialog(msg){ 
 var replyArr = ["Hi, how&#39;s it going :)","I&#39;m good, thx, U? :)"]; 
 msg = msg.toLowerCase(); 
 var time = new Date(); 
 var hour = time.getHours(); 
 var minute = time.getMinutes(); 
 var currentTime = plusZero(hour) + ":" + plusZero(minute); 
 
 var chatBox = $(".chat-box"); 
 
 if(msg.indexOf("hello") != -1){ 
  chatBox.append("<p><span id=&#39;ai&#39;>AI: </span>" + replyArr[0] + "</p><hr class=&#39;ai-hr&#39;>"); 
 } 
 else if(msg.indexOf("how are you") != -1 || msg.indexOf("how are u") != -1){ 
  chatBox.append("<p><span id=&#39;ai&#39;>AI: </span>" + replyArr[1] + "</p><hr class=&#39;ai-hr&#39;>"); 
 } 
 else if(msg.indexOf("time") != -1){ 
  chatBox.append("<p><span id=&#39;ai&#39;>AI: </span>Current Time: " + currentTime + ". " + timeGreeting(hour) + "~ :)</p><hr class=&#39;ai-hr&#39;>"); 
 } 
 else {} 
} 
 
//add 0 if time number is <10 
function plusZero(x){ 
 if(x < 10){ 
  x = "0" + x; 
 } 
 else { 
  x = x; 
 } 
 return x; 
} 
 
//greeting by hour 
function timeGreeting(h){ 
 var greeting = ["U need to sleep","Good morning","Lunch time now","Feel asleep? Have some coffee","Free time~Yeah","Good night"]; 
 
 if(h>=0&&h<=6){ 
  return greeting[0]; 
 } 
 else if(h>=7&&h<=10){ 
  return greeting[1]; 
 } 
 else if(h>=11&&h<=13){ 
  return greeting[2]; 
 } 
 else if(h>=14&&h<=18){ 
  return greeting[3]; 
 } 
 else if(h>=19&&h<=21){ 
  return greeting[4]; 
 } 
 else if(h>=22&&h<=23){ 
  return greeting[5]; 
 } 
 else { 
  return ""; 
 } 
} 
 
//clear the chat box 
function clearChatBox() { 
 $(".chat-box").html(""); 
}

DEMO가 출시되었습니다. FORK: AI Chat Box를 환영합니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다.