java websocket实现简单的即时通讯 消息推送

1.WebSocket的简要说明

WebSocket protocol是html5的一种新的协议，它实现了浏览器与服务器全双工通信。现在很多网络为了实现浏览器与服务器的即时通信，使用的是轮询技术。轮询技术是指浏览器每隔一段时间就向服务器发送一个http request，

然后服务器将最新的数据发送个浏览器。这种方式的缺点是浏览器不断的向服务器发送请求，然后请求的header是很长的，里面的有用信息却很少，

导致带宽的浪费。

后来出现了comet，这种技术使用了Ajax，使用了长轮询，流的概念，但是这种方式依然需要向服务器提供请求。直到出现了WebSocket，这种协议的header是很小的，而且是server push方式的，即服务器已收到新的消息，就自己想浏览器推送，

这种方式是主动的。

2.WebSocket实现简单的即使通讯和消息推送

 WebSocket服务器中主要实现四个参数：onOpen，onClose,onMessage,onError;需要我们实习那这几个方法，以下代码是按照注解的

方式来实现服务器的：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">package</span> com.shin;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> java.util.*;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> java.io.IOException;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> java.util.concurrent.CopyOnWriteArraySet;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> javax.websocket.OnClose;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> javax.websocket.OnError;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> javax.websocket.OnMessage;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> javax.websocket.OnOpen;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> javax.websocket.Session;<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> javax.websocket.server.ServerEndpoint;<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//该注解用来指定一个URI，客户端可以通过这个URI来连接到WebSocket。类似Servlet的注解mapping。无需在web.xml中配置。</span><span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@ServerEndpoint</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/websocket"</span>)<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">MyWebSocket</span> {</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> onlineCount = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识</span>    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> Map<String, MyWebSocket> webSocketSet =<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> HashMap<String, MyWebSocket>();    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//与某个客户端的连接会话，需要通过它来给客户端发送数据</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Session session;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/*  private String id;    public MyWebSocket(){        id = "guest";    }*/</span>    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**     * 连接建立成功调用的方法     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> session  可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据     */</span>    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@OnOpen</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onOpen</span>(Session session){        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.session = session;        String id = session.getId();        webSocketSet.put(id,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//加入set中</span>        addOnlineCount();           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//在线数加1</span>        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">try</span>{            session.getBasicRemote().sendText(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"hello client.."</span>);        }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">catch</span>(IOException e){            e.printStackTrace();        }        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>(onlineCount><span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>){        }        System.out.println(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"有新连接加入！当前在线人数为"</span> + getOnlineCount());    }    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**     * 连接关闭调用的方法     */</span>    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@OnClose</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClose</span>(){        webSocketSet.remove(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//从set中删除</span>        subOnlineCount();           <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//在线数减1    </span>        System.out.println(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"有一连接关闭！当前在线人数为"</span> + getOnlineCount());    }    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**     * 收到客户端消息后调用的方法     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> message 客户端发送过来的消息     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> session 可选的参数     */</span>    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@OnMessage</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onMessage</span>(String message, Session session) {        System.out.println(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"来自客户端的消息:"</span> + message);         String[] str = message.split(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">" "</span>);         MyWebSocket item = webSocketSet.get(str[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]);         <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">try</span> {            item.sendMessage(str[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>]);        } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">catch</span> (IOException e) {            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// TODO Auto-generated catch block</span>            e.printStackTrace();        }        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//群发消息</span>       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">/* for(MyWebSocket item: webSocketSet){                         try {                item.sendMessage(message);            } catch (IOException e) {                e.printStackTrace();                continue;            }        }*/</span>    }    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**     * 发生错误时调用     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> session     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> error     */</span>    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@OnError</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onError</span>(Session session, Throwable error){        System.out.println(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"发生错误"</span>);        error.printStackTrace();    }    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**     * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> message     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @throws</span> IOException     */</span>    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">sendMessage</span>(String message) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">throws</span> IOException{        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.session.getBasicRemote().sendText(message);        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//this.session.getAsyncRemote().sendText(message);</span>    }    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">synchronized</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> <span class="hljs-title" style="box-sizing: border-box;">getOnlineCount</span>() {        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> onlineCount;    }    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">synchronized</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">addOnlineCount</span>() {        MyWebSocket.onlineCount++;    }    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">synchronized</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">subOnlineCount</span>() {        MyWebSocket.onlineCount--;    }}      方法的解释代码中已经很详细了，楼主修改了原来的代码，原来注解部分的代码主要实现的</code><code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">是想所有的在线浏览器发送消息，经过楼主的修改，可以指定向某一个浏览器发送消息，这里主要</code><code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">是有浏览器连进服务器时，给它一个id，这里楼主偷懒，直接使用了它的session id作为它的标识，</code><code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">然后可以实现类似于web qq一样的在线即时聊天。原理就是服务器一有新的数据时，如果没有指定对</code><code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">象，它便将新的数据推送给所有的浏览器，无需浏览器来申请；当指定对象时，它只给指定对象推送消息。      浏览器端的代码如下：</code><code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"></code><pre name="code" class="html"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> <!DOCTYPE HTML><html>  <head>    <base href="<%=basePath%>">    <title>My WebSocket</title>  </head>     <body>    Welcome<br/>    <input id = "name" type = "text"> <input id="text" type="text" /><button onclick="send()">Send</button>    <button onclick="closeWebSocket()">Close</button>    <div id="message">    </div>  </body>     <script type="text/javascript">      var websocket = null;             //判断当前浏览器是否支持WebSocket      if('WebSocket' in window){          websocket = new WebSocket("ws://localhost:8080/WebSocket/websocket");      }      else{          alert('Not support websocket')      }             //连接发生错误的回调方法      websocket.onerror = function(){          setMessageInnerHTML("error");      };             //连接成功建立的回调方法      websocket.onopen = function(event){          setMessageInnerHTML("open");      }             //接收到消息的回调方法      websocket.onmessage = function(event){          setMessageInnerHTML(event.data);      }             //连接关闭的回调方法      websocket.onclose = function(){          setMessageInnerHTML("close");      }             //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。      window.onbeforeunload = function(){          websocket.close();      }             //将消息显示在网页上      function setMessageInnerHTML(innerHTML){          document.getElementById('message').innerHTML += innerHTML + '<br/>';      }             //关闭连接      function closeWebSocket(){          websocket.close();      }             //发送消息      function send(){          var message = new Array(2);          message[0] = document.getElementById('name').value;           message[1] = document.getElementById('text').value;          websocket.send(message[0]+" "+message[1]);      }  </script></html>

学习笔记：在实现指定对象推送时，我发现jsWebSocket.send(Object data)里的data只能指定的集中类型，而我并没学习过js，只知道String，于是将id和message组成一个字符串传递给服务器，服务器端处理的时候，先提取id，来找到指定的session，然后将message发送给session，完成。
改进：本文只是简单一个实现，还可以加上很多功能，比如推送的不仅仅是文字，还有图片链接各种，由于js不熟悉，不知道怎么用，以后得好好学习！还可以添加很多业务，比如如果对方不在线，可以将消息存储到数据库，等到对方上线，服务器检测自己的数据库中有没有需要发送的消息，有则发送；还可以实现多线程，每一个线程负责不同的事务，相信如果有大量的流量也是可以承受的。