websocket入门案例(echo)

websocket是用来干什么的，具体的请自行百度。

本文实现一个简单的websocket的入门小例子，实现客户端发送一句换，服务器端返回。即一个简单的交互。

一、服务器端的实现

1.创建一个类实现ServerApplicationConfig接口

2.编写一个后台websocket服务类，使用@ServerEndpoint注解标注。

第一步代码：

/**
 * 该类在服务器启动时，会自动执行
 * 
 * @author huan
 *
 */
public class EchoConfig implements ServerApplicationConfig {
	private Logger log = Logger.getLogger(EchoConfig.class);
	/**
	 * 基于注解的实现方式,<br />
	 * classess 中的类是实现了有@ServerEndpoint标注的类
	 */
	@Override
	public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> classes) {
		log.info("服务器启动...");
		for (Class<?> clazz : classes) {
			log.info("加载的websocket服务类:" + clazz.getName());
		}
		return classes;
	}

	/**
	 * 基于接口的实现方式
	 */
	@Override
	public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {
		return null;
	}
}

 第二步代码：

@ServerEndpoint("/echo4me")
public class EchoServer {
	private static Logger log = Logger.getLogger(EchoServer.class);
	public EchoServer() {
	}
	@OnOpen
	public void open(Session session) throws IOException {
		log.info("一个客户端建立连接: websocket session id -> " + session.getId());
		if (session.isOpen()) {
			session.getBasicRemote().sendText("欢迎建立连接.");
		}
	}
	@OnClose
	public void onClose() {
		log.info("websocket关闭.");
	}
	@OnMessage
	public void onMessage(Session session, String msg) {
		log.info("客户端发送的消息:" + msg);
		if (session.isOpen()) {
			try {
				session.getBasicRemote().sendText("服务器返回的数据："+msg);
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}
}

 

注意：1、上面的类中必须要有一个无参数的构造器方法

           2、方法中的参数 session  并不是httpsession,而是websocket中的session

           3、@ServerEndpoint("/echo4me")标注的类不用再配置中配置，它表示一个websocket的服务端，echo4me表示访问的路径, 即访问路径为:http://localhost:端口/项目部署名/echo4me

           4、@OnMessage表示客户端发送消息过来时触发。

二、前台的写法：

1.创建websocket请求，

2.打开请求

3.发送数据

js部分：

<strong><script type="text/javascript">
	var ws = null;
	function openConnection(){
		var target = "ws://localhost:8080/study-websocket/echo4me"
		if ('WebSocket' in window) {
	        ws = new WebSocket(target);
	    } else if ('MozWebSocket' in window) {
	        ws = new MozWebSocket(target);
	    } else {
	        alert('WebSocket is not supported by this browser.');
	        return;
	    }
		console.info('连接websocket成功.');
		ws.onopen = function(){
		}
		ws.onerror = function(e){
			console.info("发生错误:");
			console.warn(w);
		}
		ws.onmessage = function(e){
			$('#serverReturnData').val($('#serverReturnData').val()+e.data);
		}
		ws.onclose = function(e){
			console.info("websocket关闭");
			console.log(e);
		}
	}

	$(function(){
		/** 发送数据到服务器端 */
		$('#sendBtn').on('click',function(){
			var val = $('#sendData').val();
			if(val){
				if(ws){
					ws.send(val);
				}else{
					alert('请先创建websocket连接.')
				}
			}else{
				alert("请输入要发送给服务器端的数据.");
			}
		})
	});
</script></strong>

 

注意:此处的url为  echo4me为@ServerEndpoint注解中value属性的值

<strong>var target = "ws://localhost:8080/study-websocket/echo4me" 
</strong>

 

 html代码部分：

<strong><button id="openWebsocket" onclick="openConnection()">连接服务器：</button><br/>
	发送数据到服务器：<input id="sendData" /><input type="button" id="sendBtn" value="发送"/> <br/>
	服务器返回的数据：<input id="serverReturnData" style="width: 100%;color: red;"/></strong>

 

到此，前后台都实现。

前后台交互的图片