兼容性介绍 ： https://caniuse.com/#search=websockets
var websocket = null; //判断当前浏览器是否支持WebSocketif ('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 = "" + " " + " " + " " + message.createTime + " " + " " + message.concentName + "" + formatEventType(message.concentEventType) + "
" + " " + " "; $(timeItems[0]).before(newFirst); $(timeItems[timeItems.length - 1]).remove(); }} function updateSensorAlarm(message) { var timeItems = $("#sensorAlarm a"); if (timeItems.length > 0) { var newFirst = "" + " " + "" + message.content + "" + message.createTime + "" + "
" + ""; $(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 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--; }}