基于websocket实现与图灵机器人即时聊天,服务端向客户端推送消息

312 阅读1分钟

1. 如何调用别人的接口或网络上的接口,制作HttpClientUtil工具类。

\

\

2.编写测试类

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import org.apache.http.client.ClientProtocolException;

import com.huachan.common.utils.HttpClientUtil;

public class test1 {

	public static void main(String[] args) {
			Map<String,Object> map=new HashMap<>();
	        String url = "http://www.tuling123.com/openapi/api";//API地址
	       try {
	        	map.put("key", "111111111111111111111111111");APIkey
	        	map.put("info", "哈哈");
	        	map.put("userid", "666");
				String result=HttpClientUtil.postRequest(url, map);
				System.out.println(result);
			} catch (ClientProtocolException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}

	}

}

3.去图灵官网注册账号,创建一个机器人->机器人设置,里面有第2步需要的API地址和APIkey,info是你要和机器人说的话,userid可随意写,可参考这--->图灵机器人api

\

\

4.运行成功后的结果

\

************************************************

成功出现上面结果就可以去配置websocket了

\

5.导入相应jar包

<dependency>
			<groupId>javax</groupId>
			<artifactId>javaee-api</artifactId>
			<version>7.0</version>
			<scope>provided</scope>
		</dependency>

6.创建WebSocketTest测试类

\

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import org.apache.log4j.Logger;

import com.huachan.common.controller.BaseController;
import com.huachan.common.utils.HttpClientUtil;

@ServerEndpoint("/websocket/{userId}")
public class WebSocketTest {

	protected final static Logger logger = Logger.getLogger(BaseController.class);
	
	public WebSocketTest() {
	}

	@OnMessage
	public void onMessage(@PathParam(value="userId") String userId,String message, Session session) throws IOException, InterruptedException {

		Map<String, Object> map = new HashMap<>();
		//图灵接口url
		String url = "http://www.tuling123.com/openapi/api";
		try {
			map.put("key", "111111111111111111111111111111");
			map.put("info", message);
			map.put("userid", userId);
			//调用图灵接口
			String result = HttpClientUtil.postRequest(url, map);
			//推送给前端的消息
			session.getBasicRemote().sendText(result);
		} catch (Exception e) {
			session.getBasicRemote().sendText("{\"text\":\"暂时有点忙,请您稍后。\"}");
		}

	}

	@OnOpen
	public void onOpen() {
		logger.debug("chatbot Client connected");
	}

	@OnClose
	public void onClose() {
		logger.debug("chatbot Connection closed");
	}
}


\

\

7.配置前端HTML界面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<title>聊天室</title>
		<style type="text/css">
			.conent {
				border: 0px #C0C0C0 solid;
				width: 100%;
				padding-bottom: 50px;
			}
			
			.uleft {
				margin-top: 5px;
				border: 1px #C0C0C0 solid;
				border-radius: 5px;
				width: 100%;
				height: 30px;
				font-size: 16px;
				line-height: 30px;
				padding-left: 5px;
			}
			.rleft {
				margin-top: 5px;
				border: 1px green solid;
				border-radius: 5px;
				width: 100%;
				height: 30px;
				font-size: 16px;
				line-height: 30px;
				padding-left: 5px;
			}
			.bottom {
				border: 0px #C0C0C0 solid;
				height: 50px;
				width: 100%;
				position: fixed;
				bottom: 0px;
				z-index: 10;
			}
			
			.input {
				border: 1px #C0C0C0 solid;
				height: 40px;
				width: 80%;
				float: left;
				box-sizing: border-box;
			}
			
			.btn {
				border: 0px #C0C0C0 solid;
				height: 40px;
				width: 20%;
				float: right;
				box-sizing: border-box;
				background-color: #007AFF;
				color: white;
			}
			h1{
				color: #bbb;
			}
		</style>

	</head>

	<body>
		<h1>凯凯聊天室</h1>
		<hr />
		<div class="conent">
		</div>
		<div class="bottom">
			<input class="input" type="text" />
			<input class="btn" type="button" value="发送" />
		</div>
	</body>
	<script type="text/javascript">
		var name="小凯";
		var charbot="傻妞";
		var webSocket = 
			new WebSocket('ws://localhost:8080/znzp/websocket/666666');

		webSocket.onerror = function(event) {
			onError(event);
		};

		
		webSocket.onopen = function(event) {
			onOpen(event);
		};
		
		
		webSocket.onmessage = function(event) {
			onMessage(event);
		};

		function onError(event) {
			alert(event.data);
		}
		function onMessage(event) {
			
			//alert(JSON.parse(event.data).text);
			$(".conent").append("<div class='rleft'>"+charbot+":"+JSON.parse(event.data).text+"</div>");
		}

		$(".btn").click(function() {
			webSocket.send($(".input").val(),);
			$(".conent").append("<div class='uleft'>"+name+":"+$(".input").val()+"</div>");
			return false;
		});
	</script>

</html>

8.启动项目,点开页面成功效果如下


如有问题可联系我,一起相互讨论。