websocket使用案例及原理

1、简介

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

2、特点

（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据，支持双向通信，实时性更强。
（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

3、方案比较

ajax轮询
ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
long poll
long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。

4、应用场景

后台服务端有事件主动上报，客户端只需接受，而不是轮询机制。

5、案例使用：

5.1、客户端

var websocket = null;

//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
    //websocket = new WebSocket("ws://192.168.1.58:8080/plant/servlet/PushMessage");
    websocket = new WebSocket("ws://" + $("#webSocketIp").val() + ":" + $("#webSocketPort").val() + "/plant/servlet/PushMessage");
}
else {
    alert('Not support websocket')
}

//连接发生错误的回调方法
websocket.onerror = function () {

};

//连接成功建立的回调方法
websocket.onopen = function (event) {

};

//接收到消息的回调方法
websocket.onmessage = function (event) {
    var message = eval("(" + event.data + ")");//转换后的JSON对象
    //  alert(obj.name);//json name
    var url = window.location.href;
    switch (message.header) {
        case "nodeOffline":
            if (message.concentId == $("#concentId").val()) {
                $("#onlineState").attr("src", "images/photos/offline.png");
            }
            updateConcentLogs(message);
            break;
        case "nodeOnline":
            if (message.concentId == $("#concentId").val()) {
                $("#onlineState").attr("src", "images/photos/online.png");
            }
            updateConcentLogs(message);
            break;
        case "sensorAlarm":
            if (message.regionId == regionId) {
                updateSensorAlarm(message);
            }
            break;
        case "sensorCurrentData":
            if (message.schemeId == schemeId) {
                if(url.indexOf("main")>0){
                    drawCurrentData(message);
                }
                if(url.indexOf("monitor")>0){
                    changeCurrentData(message);
                }

            }
            break;
        case "deviceSwitchOperate":
            //ionic对设备开关操作的推送
            if (nodeId == message.nodeId) {
                //如果当前显示界面显示的为推送过来的设备的开关状态，则改变其状态
                switchState = message.switchState;
                $("#deviceRow img").attr("src", switchState ? "images/photos/switchOn.png" : "images/photos/switchOff.png");
            }
            break;
        case "lampSwitchOperate":
            //ionic对植物灯开关操作的推送
            if (nodeId == message.nodeId) {
                //如果当前显示界面显示的为推送过来的植物灯的开关状态，则改变其状态
                switchState = message.switchState;
                $("#lampRow img").attr("src", switchState ? "images/photos/switchOn.png" : "images/photos/switchOff.png");
            }
            break;
    }
}

//连接关闭的回调方法
websocket.onclose = function () {

}

//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
    websocket.close();
}


//关闭连接
function closeWebSocket() {
    websocket.close();
}

//发送消息
function send() {
    var message = document.getElementById('text').value;
    websocket.send(message);
}

function formatEventType(concentEventType) {
    var eventType = '';
    switch (concentEventType) {
        case "ON_LINE":
            eventType = "上线";
            break;
        case "OFF_LINE":
            eventType = "下线";
            break;
    }
    return eventType;
}

function updateConcentLogs(message) {
    var timeItems = $("#concentLogs").find("div[class='time-item']");
    if (timeItems.length > 0) {
        var newFirst = "" +
            "<div class='time-item' >" +
            "<div class='item-info'>" +
            "<small class='text-muted'>" +
            message.createTime +
            "</small> " +
            "<p><strong><a href='#' class='text-info'>" + message.concentName + "</a></strong>" +
            formatEventType(message.concentEventType) +
            "</p> " +
            "</div>" +
            "</div>";
        $(timeItems[0]).before(newFirst);
        $(timeItems[timeItems.length - 1]).remove();
    }
}

function updateSensorAlarm(message) {
    var timeItems = $("#sensorAlarm a");
    if (timeItems.length > 0) {
        var newFirst = "<a href='#' class='dropdown-item notify-item'>" +
            "<div class='notify-icon bg-success'><i class='icon-notebook'></i></div>" +
            "<p class='notify-details'>" + message.content +
            "<small class='text-muted'>" + message.createTime + "</small>" +
            "</p>" +
            "</a>";
        $(timeItems[0]).before(newFirst);
        $(timeItems[timeItems.length - 1]).remove();
    }
    $("#alarmNotice").removeAttr("hidden")
}

5.2 服务端：

package net.microlinktech.plant.web.servlet;

import org.apache.log4j.Logger;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;


@ServerEndpoint("/servlet/PushMessage")
public class PushWebSocketServlet {

    private static Logger logger = Logger.getLogger(PushWebSocketServlet.class);

    // 静态变量，用来记录当前在线连接数。
    private static volatile int onlineCount = 0;

    // concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<PushWebSocketServlet> webSocketSet = new CopyOnWriteArraySet<>();

    // 与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法
     *
     * @param session 可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        logger.info("有新连接加入！当前在线客户端为" + getOnlineCount());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1

        logger.info("有一连接关闭！当前在线客户端为" + getOnlineCount());
    }

    @OnMessage
    public void onMessage (String txt, Session session) {
        System.out.println("onMessage: " + txt.toUpperCase());
    }

    /**
     * 发生错误时调用
     *
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        logger.error("发生错误", error);
    }

    /**
     * 发送消息到客户端
     *
     * @param message
     */
    public void sendMessage(String message) {
//        this.session.getBasicRemote().sendText(message);
        this.session.getAsyncRemote().sendText(message);
    }

    /**
     * 群发消息
     *
     * @param message
     */
    public static void pushMessage(String message) {
        for (PushWebSocketServlet item : webSocketSet) {
            item.sendMessage(message);
        }
    }

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

    public static synchronized void addOnlineCount() {
        onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        onlineCount--;
    }
}

5.3 需要加入的jar包

javax.websocket:javax.websocket-api:1.1

6、注意点

有些浏览器客户端不支持websocket技术，Web Sockets 目前在各个浏览器到终端支持性并不好， 只有IE 10+， FF 34+， Chrome 31+， Safari 7.1+， Android Browser 4.4+ 才得到支持。详情见这里