springboot+avue+websocket全域性彈框 音樂播放
阿新 • • 發佈:2020-07-17
pom
<dependency> <groupId>org.java-websocket</groupId> <artifactId>Java-WebSocket</artifactId> <version>1.3.0</version> </dependency>
配置開機啟動
import org.springblade.subway.sokcet.LocationWebsocketLisenter; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration;/** * 開啟WebSocket支援 * @author longlei */ @Configuration public class WebSocketConfig { @Bean public LocationWebsocketLisenter locationWebsocketLisenter() { return new LocationWebsocketLisenter(); } }
監聽類
import org.slf4j.Logger; import org.slf4j.LoggerFactory; import javax.servlet.ServletContextEvent; import javax.servlet.ServletContextListener;public class LocationWebsocketLisenter implements ServletContextListener { private static final Logger LOGGER = LoggerFactory.getLogger(LocationWebsocketLisenter.class); public LocationWebsocketLisenter() {} public void contextDestroyed(ServletContextEvent arg0) {} public voidcontextInitialized(ServletContextEvent arg0) { try { System.out.println("隨專案啟動方式一----------------》"); OnlineChatServer.startWebsocketOnline(); } catch (Exception e) { LOGGER.error("GreyClientInitListener error", e); } } }
websocket相關兩個類
package org.springblade.subway.sokcet;//package org.springblade.subway.socket; import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import org.java_websocket.WebSocket; import org.java_websocket.WebSocketImpl; import org.java_websocket.handshake.ClientHandshake; import org.java_websocket.server.WebSocketServer; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import java.net.InetSocketAddress; import java.net.UnknownHostException; import java.util.Map; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; /** * WebSocket 即時通訊 線上管理 * @author yxl * */ public class OnlineChatServer extends WebSocketServer{ private static Logger logger = LoggerFactory.getLogger(OnlineChatServer.class); static ExecutorService fixedThreadPool = Executors.newFixedThreadPool(32); public OnlineChatServer(int port) throws UnknownHostException { super(new InetSocketAddress(port)); } public OnlineChatServer(InetSocketAddress address) { super(address); } /** * 客戶端傳送訊息到伺服器時觸發事件 */ @Override public void onMessage(WebSocket conn, String message){ logger.info("message: " + message); JSONObject parseObject = JSON.parseObject(message); Object function = parseObject.get("business"); System.out.println("body:"+parseObject.get("body")); try { if(parseObject.get("business").equals("login")){ this.userjoin(parseObject.get("user").toString(),conn); } } catch (Exception e) { e.printStackTrace(); } } //--------------------------------------------公共方法------------------------------------------------ /** * 觸發異常事件 */ @Override public void onError( WebSocket conn, Exception ex ) { System.out.println("連線失敗"); ex.printStackTrace(); if( conn != null ) { //some errors like port binding failed may not be assignable to a specific websocket } } /** * 觸發連線事件 */ @Override public void onOpen( WebSocket conn, ClientHandshake handshake ) { System.out.println("使用者連線WebSocket成功===" + conn.getRemoteSocketAddress().getAddress().getHostAddress()); } /** * 觸發關閉事件 */ @Override public void onClose( WebSocket conn, int code, String reason, boolean remote ) { userLeave(conn); } // /** // * 使用者加入處理 // * @param user // */ public void userjoin(String user, WebSocket conn){ logger.info("========================================================================"); logger.info("userjoin: " + user); logger.info("========================================================================"); onlineMaganger(1,user,conn); } /** * 使用者下線處理 */ public void userLeave(WebSocket conn){ onlineMaganger(2,null,conn); } // /** // * 獲取線上總數 // * @param user // */ // public void getUserCount(WebSocket conn){ // JSONObject result = new JSONObject(); // result.put("type", "count"); // result.put("msg", OnlineChatServerPool.getUserCount()); // OnlineChatServerPool.sendMessageToUser(conn,result.toString()); // } /** * 獲取線上總數 * @param search */ public void getGpsList(WebSocket conn, Map<String, Object> search){ JSONObject result = new JSONObject(); result.put("type", "count"); result.put("msg", OnlineChatServerPool.getUserCount()); OnlineChatServerPool.sendMessageToUser(conn,result.toString()); } // // /** // * 獲取線上使用者列表 // * @param user // */ // public void getUserList(){ // WebSocket conn = OnlineChatServerPool.getWebSocket(); // if(ObjectHelper.isEmpty(conn)){return;} // JSONObject result = new JSONObject(); // result.put("type", "userlist"); // result.put("list", OnlineChatServerPool.getOnlineUser()); // OnlineChatServerPool.sendMessageToUser(conn,result.toString()); // } /**使用者上下線管理 * @param type 1:上線;2:下線 * @param user * @param conn */ public synchronized void onlineMaganger(int type,String user, WebSocket conn){ if(type == 1){ //判斷使用者是否在其它終端 WebSocket uSocket = OnlineChatServerPool.getWebSocketByUser(user); if (null == uSocket) { //向連線池添加當前的連線物件 OnlineChatServerPool.addUser(user,conn); OnlineChatServerPool.setWebSocket(conn); } }else{ OnlineChatServerPool.removeUser(conn);//在連線池中移除連線 } } /** * 啟動線上管理服務 */ public static void startWebsocketOnline(){ WebSocketImpl.DEBUG = false; OnlineChatServer s; try { s = new OnlineChatServer(8022); s.start(); System.out.println("socket started"); } catch (UnknownHostException e) { e.printStackTrace(); } } public static void main(String[] args){ startWebsocketOnline(); //OnlineChatServerPool.sendMessage("hello socket"); } }
package org.springblade.subway.sokcet;//package org.springblade.subway.socket; import org.java_websocket.WebSocket; import java.util.*; /** * 線上管理 * @author yxl * */ public class OnlineChatServerPool { private static Map<WebSocket,String> userconnections = new HashMap<WebSocket,String>(); private static WebSocket webSocket = null;; /** * 獲取使用者名稱 * @param conn */ public static String getUserByKey(WebSocket conn){ return userconnections.get(conn); } /** * 獲取線上總數 * @param */ public static int getUserCount(){ return userconnections.size(); } /** * 獲取WebSocket * @param user */ public static WebSocket getWebSocketByUser(String user){ Set<WebSocket> keySet = userconnections.keySet(); synchronized (keySet) { for (WebSocket conn : keySet) { String cuser = userconnections.get(conn); if(cuser.equals(user)){ return conn; } } } return null; } /** * 向連線池中新增連線 * @param inbound */ public static void addUser(String user, WebSocket conn){ userconnections.put(conn,user); //新增連線 } /** * 獲取所有的線上使用者 * @return */ public static List<String> getOnlineUser(){ List<String> setUsers = new ArrayList<String>(); Collection<String> setUser = userconnections.values(); for(String u:setUser){ setUsers.add(u); } return setUsers; } /** * 移除連線池中的連線 * @param inbound */ public static boolean removeUser(WebSocket conn){ if(userconnections.containsKey(conn)){ userconnections.remove(conn); //移除連線 return true; }else{ return false; } } /** * 向特定的使用者傳送資料 * @param user * @param message */ public static void sendMessageToUser(WebSocket conn,String message){ if(null != conn){ conn.send(message); } } /** * 向所有的使用者傳送訊息 * @param message */ public static void sendMessage(String message){ Set<WebSocket> keySet = userconnections.keySet(); System.out.println("當前使用者數目:"+keySet.size()); synchronized (keySet) { for (WebSocket conn : keySet) { String user = userconnections.get(conn); if(user != null && user.indexOf("-app")<0){ conn.send(message); } } } } public static WebSocket getWebSocket() { return webSocket; } public static void setWebSocket(WebSocket wSocket) { OnlineChatServerPool.webSocket = wSocket; } public static void main(String[] args) { OnlineChatServerPool.sendMessage("23432"); } }
前端程式碼
<template> <div class="top-menu"> <el-menu :default-active="activeIndex" mode="horizontal" text-color="#333"> <el-menu-item index="0" @click.native="openHome(itemHome)" key="0"> <template slot="title"> <i :class="itemHome.source"></i> <span>{{generateTitle(itemHome)}}</span> </template> </el-menu-item> <template v-for="(item,index) in items"> <el-menu-item :index="item.id+''" @click.native="openMenu(item)" :key="index"> <template slot="title"> <i :class="item.source" style="padding-right: 5px;"></i> <span>{{generateTitle(item)}}</span> </template> </el-menu-item> </template> </el-menu> <audio ref="audio" preload="auto" src="http://mp3.9ku.com/hot/2007/05-07/84566.mp3" controls="controls" style="display:none;" ></audio> <template > <el-dialog width="40%" title="告警通知" :visible.sync="innerVisible2" append-to-body> <avue-form ref="formRule2" :option="ruleOption" v-model="formRule2" @submit="addRulesSubmit" > <template slot="menuForm"> </template> </avue-form> </el-dialog> </template> </div> </template> <script> import {mapGetters} from "vuex"; var socket; export default { name: "top-menu", data() { return { itemHome: { name: '首頁', source: 'el-icon-menu', }, innerVisible2:false, activeIndex: "0", items: [], formRule2:{}, ruleOption:{ height:'auto', calcHeight: 30, tip: false, searchShow: true, searchMenuSpan: 6, border: true, index: true, viewBtn: true, selection: true, dialogClickModal: false, submitText: "提交", submitBtn:false, emptyBtn:false, column: [ { label: "告警裝置", prop: "devicesName", rules: [{ message: "比較值", trigger: "blur" }] }, { label: "告警等級", prop: "alarmLevel", rules: [{ required: true, message: "", trigger: "blur" }] }, { label: "告警規則", prop: "alarmRule", rules: [{ required: true, message: "統計時長", trigger: "blur" }] }, { label: "告警時間", prop: "alarmTime", rules: [{ required: true, message: "統計間隔", trigger: "blur" }] }, ] }, }; }, inject: ["index"], created() { this.getMenu(); //this.initWebSocket(); }, mounted:function(){ this.initWebSocket(); }, computed: { ...mapGetters(["tagCurrent", "menu"]) }, methods: { openHome(itemHome) { this.index.openMenu(itemHome); this.$router.push({ path: this.$router.$avueRouter.getPath({name: itemHome.name, src: ''}, {}) }); }, openMenu(item) { this.index.openMenu(item) }, getMenu() { this.$store.dispatch("GetTopMenu").then(res => { this.items = res; }); }, generateTitle(item) { return this.$router.$avueRouter.generateTitle( item.name, (item.meta || {}).i18n ); }, initWebSocket(){ //初始化weosocket const wsuri = "ws://127.0.0.1:8022"; this.websock = new WebSocket(wsuri); this.websock.onmessage = this.websocketonmessage; this.websock.onopen = this.websocketonopen; this.websock.onerror = this.websocketonerror; this.websock.onclose = this.websocketclose; }, websocketonopen(){ //連線建立之後執行send方法傳送資料 let actions = {"test":"12345"}; this.websocketsend(this.getLoginData()); }, websocketonerror(){//連線建立失敗重連 this.initWebSocket(); }, websocketonmessage(e){ //資料接收 const redata = JSON.parse(e.data); this.formRule2.devicesName="隧道風機【xsfsf】", this.formRule2.alarmLevel="嚴重告警"; this.formRule2.alarmRule="裝置狀態 1天出發2次,統計時長1天"; this.formRule2.alarmTime="2020-20-20 18:12:33"; this.$refs.audio.play(); this.innerVisible2=true; }, websocketsend(Data){//資料傳送 this.websock.send(Data); }, websocketclose(e){ //關閉 console.log('斷開連線',e); }, getLoginData(){ var data={}; var content={}; content.username="22"; content.token="333"; data.business="login"; data.user="test"; data.body=content; return JSON.stringify(data); } } }; </script>