一个注解方式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版本的问题。