websocket使用

Posted 2020-12-05 童彪

兼容性介绍 ： https://caniuse.com/#search=websockets

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")
}

　server:

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--;
    }
}