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 οnclick="send()">Send</button>    <button οnclick="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不熟悉，不知道怎么用，以后得 好好学习！还可以添加很多业务，比如如果对方不在线，可以将消息存储到数据库，等到对方上线，服务器检测自己的数据库中有没有需要发送 的消息，有则发送；还可以实现多线程，每一个线程负责不同的事务，相信如果有大量的流量也是可以承受的。