效果演示

毕业设计中有一项是要实现24小时聊天功能，其要求是对话内容不能是（死板），要有一些智能在里面，我这一想，智能对话我又不会自己写，于是就在网上找智能对话的平台。类似于淘宝中那种智能聊天客服似的。终于让我找到了——图灵机器人

实现步骤

注册端： 先到图灵机器人官网申请账户，网址： 之后要创建一个机器人 然后记住key和密钥 接下来就是平台的审核了（ps：打电话审核会快一点） 代码端： 其次要创造一个可以对话聊天的对话聊天窗口界面

chat.jsp中的css样式：

<!-- css样式 -->
<style>
    *{
          
   
        padding: 0;
        margin: 0;
    }
    .imgLayout{
          
   
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: url("star.jpg");
        /*简单粗暴解决高度塌陷问题（记得复习其他方法） */
        padding:1px;
    }
    .outer{
          
   
        box-sizing: border-box;
        width: 100%;
        border-radius: 20px;
        background-color: whitesmoke;
        border: 2px solid white;
        margin: 20px auto;
        padding: 5px;
    }
    .chatContent{
          
   
        box-sizing: border-box;
        width: 100%;
        height: 230px;
        /*设置滚动 这里吕某经常用// 符号注释，使得下面一行代码失效*/
        overflow: auto;
        margin-bottom: 10px;
    }
    .outer textarea{
          
   
        width: 98%;
        height: 60px;
    }
    .outer button{
          
   
    	float:right;
        width: 30%;
        height: 45px;
        font-size: 30px;
        line-height: 45px;
        background-color: cornflowerblue;
        border-radius: 20px;
        margin-top: 5px;
        margin-bottom: 5px;
        outline: cornflowerblue;
    }
    .outer .chatContent div{
          
   
        width:100%;
        /*让内容撑开高度，p可能有高度不同*/
        /*height: 55px;*/
        display: none;
    }
    .outer .chatContent .msg_mine{
          
   
        text-align: right;
        float: right;
        margin-right: 5px;
    }
    .outer .chatContent .msg_robot{
          
   
        clear: both;
    }
    .chatContent img{
          
   
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
</style>

chat.jsp中的聊天对话窗口：

<!--智能聊天区域开始-->
	<div class="chatArea" id="chatArea">
		<div class="inChatArea" style="padding:0px;">
			<div class="chatCon">
				<h2 style="margin-bottom: 0px;">
				&nbsp;为您24小时提供服务
				</h2>
				<div class="imgLayout">
					<div class="outer">
						<div class="chatContent">
							<div class="msg_robot">
								<img
									src="${pageContext.request.contextPath}/resources/images/robotdoctor.jpg"
									alt="robot">
								<p></p>
							</div>
							<div class="msg_mine">
								<img
									src="${pageContext.request.contextPath}/resources/images/robotillness.jpg"
									alt="robot">
								<p></p>
							</div>
						</div>
						<textarea></textarea>
						<button class="send_btn"><h2 style="margin-top: 0px;">发 送</h2></button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--智能聊天区域结束-->

chat.jsp中用来实现信息交互的js代码：

ps：其实上面的代码都在一个jsp中，只要在图灵机器人平台注册好信息，平审核通过后就可以复制下方代码到jsp中实现聊天。

未经授权，禁止转载