Websocket初探

Websocket是一种在单个TCP连接上进行全双工通信的网络协议，是HTML5新增的协议。那么为何要使用Websocket呢。如果你遇到过这样的情况，那么可能更好理解。

场景：想要获取服务器定时发送的消息，然后显示到页面上。你会怎么处理？使用ajax轮询吗，不断的去询问服务器，有消息了吗，给我吧。这种方式是非常消耗资源的，而且很难控制轮询什么时候结束。而使用Websocket之后，可以在浏览器和服务器之间建立一个不受限的双向通信的通道，服务器可以主动把消息推送给前端。

那么接下来就让我们来看看Websocket的使用实例吧。
服务器端：

@ServerEndpoint("/websocket/{username}")
public class WebSocket {
    private static int onlineCount = 0;
    private static CopyOnWriteArrayList<Map<String, WebSocket>> clients = new CopyOnWriteArrayList<>();
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
    private String userName;

    /**
     * [连接建立成功调用的方法]
     */
    @OnOpen
    public void onOpen(@PathParam("username") String userName, Session session){
        this.userName = userName;
        this.session = session;
        Map<String, WebSocket> map = new ConcurrentHashMap<>();
        map.put(userName,this);
        clients.add(map);
        addOnlineCount();           //在线数加1
        System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
    }

    /**
     * [关闭连接调用的方法]     
     */
    @OnClose
    public void onClose(){
        for (Map<String, WebSocket> map:clients) {
            map.remove(userName);
        }
        subOnlineCount();
    }

    @OnMessage
    public void onMessage(String message){
        for (Map<String, WebSocket> map:clients) {
            for (WebSocket item : map.values()) {
                item.session.getAsyncRemote().sendText(message);
            }
        }

    }

    /**
     * [连接发送错误]
     */
    @OnError
    public void onError(Session session, Throwable error){
        System.out.println("发生错误");
        error.printStackTrace();
    }

    public static synchronized int getOnlineCount() {

        return onlineCount;

    }

    public static synchronized void addOnlineCount() {

        WebSocket.onlineCount++;

    }

    public static synchronized void subOnlineCount() {

        WebSocket.onlineCount--;

    }
   
}

客户端：

<script>
    var websocket = null;
    // 当前登录的用户
    var username = "${map.login}";
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://localhost:8080/websocket/"+username);
    } else {
        alert('当前浏览器 Not support websocket');
    }

    websocket.onopen = function(){

    };
    //连接发生错误的回调方法
    websocket.onerror = function () {
        alert("WebSocket连接发生错误");
    };
    websocket.onmessage = function (event){
        var message = JSON.parse(event.data);
        alert(message);
    };

</script>

本实例使用CopyOnWriteArrayList存放用户名和session的map值，解决了同一个用户使用不同浏览器登录时，页面接收到消息错乱的问题。