[TOC] ### **WebSocket接口配置說明** 選中組件（本文以百分比條形圖為例說明），在操作界面右側，點擊圖標，并選擇WebSocket，如下圖  ### **1、配置接口地址** 在接口地址一欄填寫我們制作的接口地址，并點擊刷新應用接口，如下圖  接口地址示例：ws://localhost:8080/jeecg-boot/websocket/refreshChart https使用wss ### **2、編寫WebSocket服務端**  示例代碼如下: 示例中使用了([redis訂閱發布](https://blog.csdn.net/qq_39507276/article/details/89045275))機制解決消息集群問題 ``` package org.jeecg.modules.jmreport.visual.websocket; import java.util.HashMap; import java.util.Map; import java.util.concurrent.CopyOnWriteArraySet; import javax.annotation.Resource; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import org.jeecg.common.base.BaseMap; import org.jeecg.common.constant.WebsocketConst; import org.jeecg.common.modules.redis.client.JeecgRedisClient; import org.springframework.stereotype.Component; import com.alibaba.fastjson.JSONObject; import lombok.extern.slf4j.Slf4j; /** * 大屏websocket服務端 * @author zyf */ @Component @Slf4j @ServerEndpoint("/websocket/refreshChart/{chartId}") public class BigScreenWebSocket { /** * 鏈接會話 */ private Session session; /** * 圖表ID */ private String chartId; /** * redis隊列名稱 */ private static final String REDIS_TOPIC_NAME = "bigScreenSocketHandler"; @Resource private JeecgRedisClient jeecgRedisClient; /** * 緩存 webSocket連接到單機服務class中（整體方案支持集群） */ private static CopyOnWriteArraySet<BigScreenWebSocket> webSockets = new CopyOnWriteArraySet<>(); private static Map<String, Session> sessionPool = new HashMap<String, Session>(); @OnOpen public void onOpen(Session session, @PathParam(value = "chartId") String chartId) { try { this.session = session; this.chartId = chartId; webSockets.add(this); sessionPool.put(chartId, session); log.info("【websocket消息】有新的連接，總數為:" + webSockets.size()); } catch (Exception e) { } } @OnClose public void onClose() { try { webSockets.remove(this); sessionPool.remove(this.chartId); log.info("【websocket消息】連接斷開，總數為:" + webSockets.size()); } catch (Exception e) { } } /** * 服務端推送消息 * * @param chartId * @param message */ public void pushMessage(String chartId, String message) { Session session = sessionPool.get(chartId); if (session != null && session.isOpen()) { try { log.info("【websocket消息】 單點消息:" + message); session.getAsyncRemote().sendText(message); } catch (Exception e) { e.printStackTrace(); } } } /** * 服務器端推送消息 */ public void pushMessage(String message) { try { webSockets.forEach(ws -> ws.session.getAsyncRemote().sendText(message)); } catch (Exception e) { e.printStackTrace(); } } @OnMessage public void onMessage(String message) { //todo 現在有個定時任務刷，應該去掉 log.debug("【websocket消息】收到客戶端消息:" + message); JSONObject obj = new JSONObject(); //業務類型 obj.put(WebsocketConst.MSG_CMD, WebsocketConst.CMD_CHECK); //消息內容 obj.put(WebsocketConst.MSG_TXT, "心跳響應"); for (BigScreenWebSocket webSocket : webSockets) { webSocket.pushMessage(message); } } /** * 后臺發送消息到redis * * @param message */ public void sendMessage(String message) { log.info("【websocket消息】廣播消息:" + message); BaseMap baseMap = new BaseMap(); baseMap.put("chartId", ""); baseMap.put("message", message); jeecgRedisClient.sendMessage(REDIS_TOPIC_NAME, baseMap); } /** * 此為單點消息 * * @param chartId * @param message */ public void sendMessage(String chartId, String message) { BaseMap baseMap = new BaseMap(); baseMap.put("chartId", chartId); baseMap.put("message", message); jeecgRedisClient.sendMessage(REDIS_TOPIC_NAME, baseMap); } /** * 此為單點消息(多組件) * * @param chartIds * @param message */ public void sendMessage(String[] chartIds, String message) { for (String chartId : chartIds) { sendMessage(chartId, message); } } } ``` ### **3、編寫消息推送測試方法** ``` /** * 測試大屏websocket接口 */ @RestController @Api(tags="大屏WebSocket測試") @RequestMapping("/bigscreen/websocket") public class WebSocketController { @Autowired private BigScreenWebSocket webSocket; @PostMapping("/sendData") @ApiOperation(value="測試大屏組件更新", notes="測試大屏組件更新") public Result<String> sendData() { Result<String> result = new Result<String>(); //需要推送數據的組件ID String chartId="listab18b33f-1b10-45ea-9621-7d32d802f084"; String message = "[{\"country\":\"Asia\",\"year\":\"1750\",\"value\":1502},{\"country\":\"Asia\",\"year\":\"1800\",\"value\":1635},{\"country\":\"Asia\",\"year\":\"1850\",\"value\":1809},{\"country\":\"Asia\",\"year\":\"1900\",\"value\":1947},{\"country\":\"Asia\",\"year\":\"1950\",\"value\":1402},{\"country\":\"Asia\",\"year\":\"1999\",\"value\":3634},{\"country\":\"Asia\",\"year\":\"2050\",\"value\":5268},{\"country\":\"Africa\",\"year\":\"1750\",\"value\":106},{\"country\":\"Africa\",\"year\":\"1800\",\"value\":107},{\"country\":\"Africa\",\"year\":\"1850\",\"value\":111},{\"country\":\"Africa\",\"year\":\"1900\",\"value\":133},{\"country\":\"Africa\",\"year\":\"1950\",\"value\":221},{\"country\":\"Africa\",\"year\":\"1999\",\"value\":767},{\"country\":\"Africa\",\"year\":\"2050\",\"value\":1766},{\"country\":\"Europe\",\"year\":\"1750\",\"value\":163},{\"country\":\"Europe\",\"year\":\"1800\",\"value\":203},{\"country\":\"Europe\",\"year\":\"1850\",\"value\":276},{\"country\":\"Europe\",\"year\":\"1900\",\"value\":408},{\"country\":\"Europe\",\"year\":\"1950\",\"value\":547},{\"country\":\"Europe\",\"year\":\"1999\",\"value\":729},{\"country\":\"Europe\",\"year\":\"2050\",\"value\":628}]"; JSONObject obj = new JSONObject(); obj.put("chartId",chartId); obj.put("result", message); webSocket.sendMessage(chartId, obj.toJSONString()); result.setResult("單發"); return result; } } ``` ### **4、返回JSON數據格式** ``` [{ "value": 1048, "name": "波導33333" }, { "value": 735, "name": "oppo" }, { "value": 580, "name": "華為" }, { "value": 484, "name": "小米" }, { "value": 300, "name": "魅族" }] ```