聊天机器人调用API实现

这里写图片描述
后端调用API:

package com.mychat.servlet;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.PrintWriter;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/*
 * 机器人聊天
 */
public class CharServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request,response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
        String APIKEY = "7d14fa4bc295404a9fced576c37453e5"; //图灵机器人的apikey
        String question = request.getParameter("id");//用户输入的问题inputValue
        System.out.println(question);
        String INFO = URLEncoder.encode(question, "utf-8"); 
        String getURL = "http://www.tuling123.com/openapi/api?key=" + APIKEY + "&info=" + INFO; 
        URL getUrl = new URL(getURL); 
        HttpURLConnection connection = (HttpURLConnection) getUrl.openConnection(); 
        connection.connect(); 
        // 取得输入流,并使用Reader读取 
        BufferedReader reader = new BufferedReader(new InputStreamReader( connection.getInputStream(), "utf-8")); 
        StringBuffer sb = new StringBuffer(); 
        String line = ""; 
        while ((line = reader.readLine()) != null) { 
            sb.append(line); 
        } 
        reader.close(); 
        // 断开连接 
        connection.disconnect(); 

		PrintWriter out = response.getWriter();
		System.out.println(sb.toString());
		out.println(sb.toString());
		out.close();
	}
}

前端页面展示:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聊天助手</title>
<script src="js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="css/chat.css">
<link rel="alternate icon" href="assets/i/favicon.ico">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
<link rel="stylesheet" href="assets/css/app.css">
<link href="umeditor/themes/default/css/umeditor.css" rel="stylesheet">
<style>
* {
	margin: 0;
	padding: 0;
}
 .chat-content-container {
	height: 49rem;
	overflow-y: auto;
	border: 1px solid silver;
} 
.container{
	border: 1px solid #cdcaca;
	padding:0px 0px;
}
.am-u-sm-6{
	left:0px;
}
.am-u-sm-push-6{
	width:100%;
}
</style>
<script>
/*自定义时间格式*/
Date.prototype.Format = function (fmt) { // author: meizz
    var o = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小时
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        "S": this.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
}
	window.function(){
		$(".arrow").hide();
		$(".arrows").hide();
	}
	document.onkeydown = function(e) {
		if (e.keyCode == 13 && e.ctrlKey) {
			// 这里实现换行
			document.getElementById("sendContent").value += "\n";
		} else if (e.keyCode == 13) {
			// 避免回车键换行
			e.preventDefault();
			// 下面写你的发送消息的代码
			f();
		}
	}
	function fc(){
		window.location.href="friend.jsp"
	}
	function f() {
		var isSelf=true;
		var name=$('#nickname').val()
		var time = new Date().Format("yyyy-MM-dd hh:mm:ss");
		var cnt = $("#sendContent").val();
		if(cnt == '')alert('内容不能为空');	
		if(cnt != ''){
			var messageItem = '<li class="am-comment '
				+ (isSelf ? 'am-comment-flip' : 'am-comment')
				+ '">'
				+ '<a href="javascript:void(0)" ><img src="assets/images/'
				+ (isSelf ? 'self.jpg' : 'others.jpg')
				+ '" alt="" class="am-comment-avatar" width="48" height="48"/></a>'
				+ '<div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta">'
				+ '<a href="javascript:void(0)" class="am-comment-author">'
				+ name + '</a> <time>' + time
				+ '</time></div></header>'
				+ '<div class="am-comment-bd">' + cnt
				+ '</div></div></li>';
		$(messageItem).appendTo('#message-list');
		$('#sendContent').val('')
		// 把滚动条滚动到底部
		$(".chat-content-container").scrollTop($(".chat-content-container")[0].scrollHeight);
			isSelf=false;
			name="小埋"
			$.ajax({
				data : cnt,
				type : "post",
				url : "CharServlet?id=" + encodeURIComponent(cnt),
				contentType: "application/json;charset=utf-8",
				dataType : "json",
				success : function(msg) {
					var messageItem = '<li class="am-comment ' 
						+ (isSelf ? 'am-comment-flip' : 'am-comment')
						+ '">'
						+ '<a href="javascript:void(0)" ><img src="assets/images/'
						+ (isSelf ? 'self.jpg' : '1.jpg')
						+ '" alt="" class="am-comment-avatar" width="48" height="48"/></a>'
						+ '<div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta">'
						+ '<a href="javascript:void(0)" class="am-comment-author">'
						+ name + '</a> <time>' + time
						+ '</time></div></header>'
						+ '<div class="am-comment-bd"><a id="myurl" href="#">' + msg.text+'</a>'
						+ '</div></div></li>';
				$(messageItem).appendTo('#message-list');
				if(msg.url!=null)
					document.getElementById("myurl").href = msg.url;
				// 把滚动条滚动到底部
				$(".chat-content-container").scrollTop($(".chat-content-container")[0].scrollHeight);

				},
				error : function(msg) {
					alert("请求失败");
				}
			});
		}
	}

</script>
</head>
	<!-- 聊天内容框开始 -->
	<div class="am-container container" >
		<div class="am-u-sm-12" style="background:#dcad50;">
			<!-- <div class="am-u-sm-3 am-u-sm-push-6"> -->
				<h3 style="text-align:center;margin-top:auto;margin-bottom:auto;padding:3px 0px;font-size:20px">聊天机器人</h3>
			<!-- </div> -->
		</div>
		<div class="chat-content-container">
			<div class="am-u-sm-6 am-u-sm-push-6">
				<ul id="message-list" class="am-comments-list am-comments-list-flip"></ul>
			</div>
		</div>
<!-- 	</div> -->
	<!-- 聊天内容框结束 -->
	<div class="message-input am-margin-top">
		<!-- 输入内容框开始 -->
		</div>
		<div class="border-img"></div>
		<textarea id="sendContent" style="width:100%; height:19rem;"></textarea>
		<!-- 输入昵称框开始 -->
		<!-- <div class="am-g am-g-fixed am-margin-top"> -->
			<div class="am-u-sm-6" style="display: none;">
				<div id="message-input-nickname" class="am-input-group am-input-group-primary">
					<span class="am-input-group-label"><i class="am-icon-user"></i></span>
					<input id="nickname" type="text" class="am-form-field" value="${user.name}"/>
				</div>
			</div>
			<div class="am-u-sm-12">
				<p style="text-align:right;margin:0px">
					<button "fc()" class="am-btn am-btn-warning">
						关闭
					</button>
					<button id="send" "f()" type="button" class="send am-btn am-btn-primary">
						<i class="am-icon-send"></i>发送
					</button>
				</p>
			</div>
	</div>
</body>
</html>



页面设计css部分就不粘贴上去了,有问题私聊吧!

  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值