一个注解方式webSocket demo

前段时间在研究websocket.其中遇到了一些bug。这里跟大家分享这过程。

首先介绍一下websocket

WebSocket是HTML5的一种新协议，实现了浏览器和服务器的双全工通信，能更好的节省服务器资源和带宽并达到实时通信。同时WebSocket是建立在TCP之上，同HTTP一样通过TCP来通信。WebSocket需要类似TCP的客户端和服务端的握手连接然后进行通信。但websocket与传统的HTTP每次请求-应答都需要客户端和服务端建立连接模式不同的是websocket类似socket的TCP长连接的通讯模式，在客户端断开websocket连接或服务端断开连接前，不需要客户端和服务端重新发起连接请求。一旦websocket建立连接之后，后续的数据都是以帧序列的形式传输。

此websocket demo的后台使用的是Java写的，如下：

 import java.util.concurrent.CopyOnWriteArraySet;

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

 @ServerEndpoint("/myecho")
 public class WSDemo {

 //    Logger log = Logger.getLogger(getClass());

     //当前在线人数
     private static int onlineCount = 0;
     //用一个set集合保存几个websocket实例
     private static CopyOnWriteArraySet<WSDemo> wsSet = new CopyOnWriteArraySet<WSDemo>();
     //websocket的session
     private Session session;

     /**
      * 客户端新建websocket时会触发(握手协议后)
      * 并加入当前的set集合中
      * @param session
      */
     @OnOpen
     public void wsOpen(Session session) {
         this.session = session;
         wsSet.add(this);//加入集合
         // 在线人数加1
         addOnlineCount();
     }

     //当websocket退出的时候触发，并在set集合中删除当前websocket
     @OnClose
     public void wsClose(){
         wsSet.remove(this); //删除
         //在线人数-1
         subOnlineCount();
     }

     /**
      * 接收到客户端发来的消息并处理，同时也像客户端发送消息
      * @param message
      * @param session
      */
     @OnMessage
     public void wsMessage(String message, Session session) {
         sendMessage(message);
         System.out.println("=====客户端发来消息:" + message);
         System.out.println("======websocket 数量:" + wsSet.size());
         //群发消息
         for(WSDemo wss: wsSet) {
             wss.sendMessage("服务端发来的消息"); //向客户端发送消息
         }
     }

     //websocket错误的时候丢出一个异常
     @OnError
     public void wsError(Session session, Throwable throwable) {
         throw new IllegalArgumentException(throwable);
     }

     //send message  发送消息处理方法
     public void sendMessage(String message) {
         try {
             this.session.getBasicRemote().sendText(message);
             System.out.println("===============发送了消息:" + message);
         } catch (Exception e) {
             // TODO: handle exception
             System.out.println(e.getMessage());
         }
     }

     // get onlinecount
     public static synchronized int getOnlineCount() {
         return onlineCount;
     }

     // +1
     public static synchronized void addOnlineCount() {
         WSDemo.onlineCount++;
         System.out.println("++++++++++++++上线人数+1:" + onlineCount);
     }

     //-1
     public static synchronized void subOnlineCount() {
         WSDemo.onlineCount--;
         System.out.println("---------------线上人数-1:" + onlineCount);
     }

 }

前端代码就相对简单，直接使用我们注册的'/myecho' websocket服务端

var wsuri = "ws://localhost:8080/wsdemo/myecho";
var ws = null;

function dows() {
        //判断浏览器是否支持websocket
    if("WebSocket" in window || window.WebSocket) {
        ws = new WebSocket(wsuri);
    } else {
        alert("browser not support websocket...");
//        throw "browser not support websocket..."; //这种写法是可以的
        throw new Error("browser not support websocket...");//这种也是可以
        return false
    }
    ws.onopen = function(evt) {
        wsObj.wsopen(evt);
    }
    ws.onmessage = function(evt) {
        wsObj.wsmsg(evt);
    }
    ws.onclose = function(evt) {
        wsObj.wsclose(evt);
    }
    ws.onerror = function(evt) {
        wsObj.wserror(evt);
    }
    /*ws.send("my message...");*/
}

var wsObj = {
    wsopen:function(evt) {
        console.log(evt.type);
        document.querySelector("#clientSuc").innerHTML = "websocket connect success...";
    },
    wsmsg:function(msg) {
        debugger;
        console.log("type:"+msg.type);
        //document.getElementById("msg").innerHTML = msg.data;
        console.log("data:" + msg.data);
        document.querySelector("#msg").innerHTML = msg.data;
//        ws.close(); //关闭websocket
    },
    wsclose:function(evt) {
        console.log("type:" + evt.type);
    },
    wserror:function(evt) {
        console.log("type:" + evt.type);
    }
};
function sendMsg (){
    var msg = "hello websocket...";
    ws.send(msg);
}
function closeWebsocket() {
    ws.close();
}

window.addEventListener("load", dows, false);

这里需要注意到的是：因为websocket是j2ee 7 以上的版本所以需要jdk版本1.7以上，而且tomcat服务器的支持也有区别，比如tomcat7不会自动把'websocket-api.jar'引入，而tomcat8则会。如果使用tomcat7的版本且没有自己手动添加tomcat的library引入'websocket-api.jar'这个jar包的话前台会报404找不到websocket服务的异常。这个bug我搞了半天才知道原来是tomcat版本的问题。