WebSocket简单样例

1.目的：通过WebSocekt实现Java服务端将agent状态实时推送到html页面

2. 测试环境:win7 64位旗舰版，jdk8，Tomcat8，Mycelispe2014

3.服务端代码：

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

/**
 * @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务端
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 */
@ServerEndpoint("/websocket/{agentcontact}")
public class TestWebSocket {
	//concurrent包的线程安全Map,用来存放每个客户端对应的WebSocket对象,其中Key为坐席标识
	private static Map<String, TestWebSocket> agentclientmap = new ConcurrentHashMap<String, TestWebSocket>();  
    private String agentcontact; //用户标识
	private Session session; //与某个客户端的连接会话，需要通过它来给客户端发送数据
		
         /**
		 * 连接建立成功调用的方法
		 * @param session可选的参数 session为与某个客户端的连接会话，需要通过它来给客户端发送数据
		 */
		@OnOpen
		public void onOpen(@PathParam("agentcontact") String agentcontact, Session session){
			this.agentcontact = agentcontact;  
	         this.session = session; 
              // ConcurrentHashMap key值不重复，保证每个用户标识对应一个websocket类，避免刷新，登录等操作出现一个用户标识对应多个客户端
		     agentclientmap.put(agentcontact,this);
		}

		/**
		 * 连接关闭调用的方法
		 */
		@OnClose
		public void onClose(){
              //关闭ws连接，从map中移除对应的key
			agentclientmap.remove(agentcontact);
		}

		/**
		 * 收到客户端消息后调用的方法
		 * @param message 客户端发送过来的消息
		 * @param session 可选的参数
		 */
		@OnMessage
		public void onMessage(String message, Session session) {
			System.out.println("来自客户端的消息:" + message);
		}

		/**
		 * 发生错误时调用
		 * @param session
		 * @param error
		 */
		@OnError
		public void onError(Session session, Throwable error){
			System.out.println("发生错误");
			error.printStackTrace();
		}

		/**
		 * server向client推送消息方法
		 * @param message
		 * @throws IOException
		 */
	    public void pushMessage(String agentcontact,String message) throws IOException {  
	        //全部推送
/*for (TestWebSocket item : agentclientmap.values()) {  
	                item.session.getAsyncRemote().sendText(message);  
	        }*/
         //点对点推送
	    if(agentclientmap.containsKey(agentcontact)){
        	TestWebSocket ws_push = agentclientmap.get(agentcontact);
         // getAsyncRemote() 非阻塞发送方法，可以避免某客户端推送延迟导致整个服务器推送卡顿
        	ws_push.session.getAsyncRemote().sendText(message);
      	} 
 } 
}

4.客户端代码：

<html>
  <head> </head>
  
  <body>
    Welcome<br/><input id="text" type="text"/>
    <button onclick="send()">发送消息</button>
    <hr/>
    <button onclick="closeWebSocket()">关闭WebSocket连接</button>
    <hr/>
    <div id="message"></div>
  </body>
  <script type="text/javascript">
    var websocket = null;
    var agentcontact='000011000019001@agent';
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://10.1.30.72:8080/TestProject/websocket/"+agentcontact);
    }
    else {
        alert('当前浏览器 Not support websocket');
    }
    
    //连接成功建立的回调方法
    websocket.onopen = function () {
    	console.log('websocket.onopen');
        setMessageInnerHTML("WebSocket连接成功");
    };

    //连接关闭的回调方法
    websocket.onclose = function () {
    	console.log('websocket.onclose');
        setMessageInnerHTML("WebSocket连接关闭");
    };

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
    	console.log('websocket.onmessage:'+event+',event.data:'+event.data);
    	setMessageInnerHTML(event.data);
    };

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误");
    };
    
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
    	websocket.close();
    };

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    
    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>

WebSocket简单样例

WebSocket简单样例

猜你喜欢