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+ 才得到支持。详情见这里


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值