springboot+avue+websocket全局彈框 音樂播放

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 void contextInitialized(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>