欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Spring?Boot+Vue實(shí)現(xiàn)Socket通知推送的完整步驟

 更新時(shí)間：2023年04月04日 11:35:56   作者：Master-Tang  
最近工作中涉及消息通知功能的開(kāi)發(fā),所以下面這篇文章主要給大家介紹了關(guān)于Spring?Boot+Vue實(shí)現(xiàn)Socket通知推送的完整步驟,文中通過(guò)實(shí)例代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下

Spring Boot端

第一步，引入依賴

首先我們需要引入WebSocket所需的依賴，以及處理輸出格式的依賴

<!--格式轉(zhuǎn)換-->
<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
   <groupId>com.alibaba</groupId>
   <artifactId>fastjson</artifactId>
   <version>1.2.73</version>
</dependency>
<!--WebSocket依賴-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

第二步，創(chuàng)建WebSocket配置類

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
 
/**
 * @author: tjp
 * @create: 2023-04-03 09:58
 * @Description: WebSocket配置
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
 
}

第三步，創(chuàng)建WebSocket服務(wù)

這一步我們通過(guò)userId作為標(biāo)識(shí)符，區(qū)分系統(tǒng)中對(duì)應(yīng)的用戶，后續(xù)也可基于此，進(jìn)行其他的操作步驟。

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.alibaba.excel.util.StringUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
 
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Iterator;
import java.util.concurrent.ConcurrentHashMap;
 
/**
 * @author: tjp
 * @create: 2023-04-03 13:55
 * @Description: WebSocket服務(wù)
 */
 
@ServerEndpoint("/websocket/{userId}")
@Slf4j
@Component
public class WebSocketServer {
    /**
     * 靜態(tài)變量，用來(lái)記錄當(dāng)前在線連接數(shù)。應(yīng)該把它設(shè)計(jì)成線程安全的。
     */
    private static int onlineCount = 0;
    /**
     * concurrent包的線程安全Set，用來(lái)存放每個(gè)客戶端對(duì)應(yīng)的MyWebSocket對(duì)象。
     */
    private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>();
    /**
     * 與某個(gè)客戶端的連接會(huì)話，需要通過(guò)它來(lái)給客戶端發(fā)送數(shù)據(jù)
     */
    private Session session;
    /**
     * 接收userId
     */
    private String userId = "";
 
    /**
     * 連接建立成功調(diào)用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        this.session = session;
        this.userId = userId;
        if (webSocketMap.containsKey(userId)) {
            webSocketMap.remove(userId);
            //加入set中
        } else {
            webSocketMap.put(userId, this);
            //加入set中
            addOnlineCount();
            //在線數(shù)加1
        }
 
        log.info("用戶連接:" + userId + ",當(dāng)前在線人數(shù)為:" + getOnlineCount());
 
        try {
            HashMap<Object, Object> map = new HashMap<>();
            map.put("key", "連接成功");
            sendMessage(JSON.toJSONString(map));
        } catch (IOException e) {
            log.error("用戶:" + userId + ",網(wǎng)絡(luò)異常!!!!!!");
        }
    }
 
 
    /**
     * 連接關(guān)閉調(diào)用的方法
     */
    @OnClose
    public void onClose() {
        if (webSocketMap.containsKey(userId)) {
            webSocketMap.remove(userId);
            //從set中刪除
            subOnlineCount();
        }
        log.info("用戶退出:" + userId + ",當(dāng)前在線人數(shù)為:" + getOnlineCount());
    }
 
    /**
     * 收到客戶端消息后調(diào)用的方法
     *
     * @param message 客戶端發(fā)送過(guò)來(lái)的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("用戶消息:" + userId + ",報(bào)文:" + message);
        //可以群發(fā)消息
        //消息保存到數(shù)據(jù)庫(kù)、redis
        if (StringUtils.isNotBlank(message)) {
            try {
                //解析發(fā)送的報(bào)文
                JSONObject jsonObject = JSONObject.parseObject(message);
                //追加發(fā)送人(防止串改)
                jsonObject.put("fromUserId", this.userId);
                String fromUserId = jsonObject.getString("fromUserId");
                //傳送給對(duì)應(yīng)toUserId用戶的websocket
                if (StringUtils.isNotBlank(fromUserId) && webSocketMap.containsKey(fromUserId)) {
                    webSocketMap.get(fromUserId).sendMessage(jsonObject.toJSONString());
                    //自定義-業(yè)務(wù)處理
 
//                    DeviceLocalThread.paramData.put(jsonObject.getString("group"),jsonObject.toJSONString());
                } else {
                    log.error("請(qǐng)求的userId:" + fromUserId + "不在該服務(wù)器上");
                    //否則不在這個(gè)服務(wù)器上，發(fā)送到mysql或者redis
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
 
    /**
     * 發(fā)生錯(cuò)誤時(shí)候
     *
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("用戶錯(cuò)誤:" + this.userId + ",原因:" + error.getMessage());
        error.printStackTrace();
    }
 
    /**
     * 實(shí)現(xiàn)服務(wù)器主動(dòng)推送
     */
    public void sendMessage(String message) throws IOException {
        //加入線程鎖
        synchronized (session) {
            try {
                //同步發(fā)送信息
                this.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                log.error("服務(wù)器推送失敗:" + e.getMessage());
            }
        }
    }
 
 
    /**
     * 發(fā)送自定義消息
     * */
    /**
     * 發(fā)送自定義消息
     *
     * @param message  發(fā)送的信息
     * @param toUserId 如果為null默認(rèn)發(fā)送所有
     * @throws IOException
     */
    public static void sendInfo(String message, String toUserId) throws IOException {
        //如果userId為空，向所有群體發(fā)送
        if (StringUtils.isEmpty(toUserId)) {
            //向所有用戶發(fā)送信息
            Iterator<String> itera = webSocketMap.keySet().iterator();
            while (itera.hasNext()) {
                String keys = itera.next();
                WebSocketServer item = webSocketMap.get(keys);
                item.sendMessage(message);
            }
        }
        //如果不為空，則發(fā)送指定用戶信息
        else if (webSocketMap.containsKey(toUserId)) {
            WebSocketServer item = webSocketMap.get(toUserId);
            item.sendMessage(message);
        } else {
            log.error("請(qǐng)求的userId:" + toUserId + "不在該服務(wù)器上");
        }
    }
 
    public static synchronized int getOnlineCount() {
        return onlineCount;
    }
 
    public static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }
 
    public static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }
 
    public static synchronized ConcurrentHashMap<String, WebSocketServer> getWebSocketMap() {
        return WebSocketServer.webSocketMap;
    }
 
}

第四步，創(chuàng)建Controller進(jìn)行發(fā)送測(cè)試

獲取當(dāng)前在線人數(shù)

import com.......WebSocketServer;
 
@ApiOperation(value = "獲取當(dāng)前在線人數(shù)")
@GetMapping("/getOnlineCount")
public Integer getOnlineCount() {
    return WebSocketServer.getOnlineCount();
}

通過(guò)接口，向前端用戶推送消息

import com.......WebSocketServer;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
import java.io.IOException;
 
/**
 * @author: tjp
 * @create: 2023-04-03 13:57
 * @Description: 測(cè)試
 */
@RestController
@RequestMapping("/news")
public class NewsController {
    @GetMapping("/send")
    public String send() {
        try {
            WebSocketServer.sendInfo("這是websocket發(fā)送過(guò)來(lái)的消息！", "需要推送的用戶的編號(hào)");
        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return "發(fā)送消息成功";
    }
 
}

Vue端

第一步，創(chuàng)建連接工具類

創(chuàng)建工具類websocket.js，這里的userId就是用來(lái)作為標(biāo)識(shí)符的userId

/**
 * @author: tjp
 * @create: 2023-04-03 11:22
 * @Description: Socket客戶端
 */
export class WebSocketClient {
  constructor(userId) {
    this.userId = userId;
    this.websocket = null;
    this.timeout = 10000; // 心跳超時(shí)時(shí)間，單位ms
    this.timeoutObj = null; // 心跳定時(shí)器
    this.serverTimeoutObj = null; // 服務(wù)器超時(shí)定時(shí)器
    this.lockReconnect = false; // 避免重復(fù)連接
    this.timeoutnum = null; // 重連延遲定時(shí)器
  }
 
  // 初始化WebSocket連接
  initWebSocket() {
    let wsUrl = `ws://127.0.0.1:8080/websocket/${this.userId}`;
    this.websocket = new WebSocket(wsUrl);
    this.websocket.onopen = this.websocketonopen.bind(this);
    this.websocket.onerror = this.websocketonerror.bind(this);
    this.websocket.onmessage = this.setOnmessageMessage.bind(this);
    this.websocket.onclose = this.websocketclose.bind(this);
    // 監(jiān)聽(tīng)窗口關(guān)閉事件，當(dāng)窗口關(guān)閉時(shí)，主動(dòng)去關(guān)閉websocket連接，防止連接還沒(méi)斷開(kāi)就關(guān)閉窗口，server端會(huì)拋異常。
    window.onbeforeunload = this.websocketclose.bind(this);
  }
 
  // 啟動(dòng)心跳
  start() {
    console.log('start');
    // 清除延時(shí)器
    this.timeoutObj && clearTimeout(this.timeoutObj);
    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
    /*// 向服務(wù)器發(fā)送心跳消息
    let actions = { "test": "12345" };
    this.websocket && this.websocket.readyState == 1 && this.websocket.send(JSON.stringify(actions));
    // 啟動(dòng)心跳定時(shí)器
    this.timeoutObj = setTimeout(() => {
      this.start();
      // 定義一個(gè)延時(shí)器等待服務(wù)器響應(yīng)，若超時(shí)，則關(guān)閉連接，重新請(qǐng)求server建立socket連接
      this.serverTimeoutObj = setTimeout(() => {
        this.websocket.close();
      }, this.timeout)
    }, this.timeout)*/
  }
 
  // 重置心跳
  reset() {
    // 清除時(shí)間
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
    // 重啟心跳
    this.start();
  }
 
  // 重新連接
  reconnect() {
    if (this.lockReconnect) return;
    this.lockReconnect = true;
    // 沒(méi)連接上會(huì)一直重連，設(shè)置延遲避免請(qǐng)求過(guò)多
    this.timeoutnum && clearTimeout(this.timeoutnum);
    this.timeoutnum = setTimeout(() => {
      this.initWebSocket();
      this.lockReconnect = false;
    }, 5000)
  }
 
  // 處理收到的消息
  async setOnmessageMessage(event) {
    console.log(event.data, '獲得消息');
    // 重置心跳
    // this.reset();
    // 自定義全局監(jiān)聽(tīng)事件
    window.dispatchEvent(new CustomEvent('onmessageWS', {
      detail: {
        data: event.data
      }
    }))
    // //發(fā)現(xiàn)消息進(jìn)入    開(kāi)始處理前端觸發(fā)邏輯
    // if (event.data === 'success' || event.data === 'heartBath') return
  }
 
  // WebSocket連接成功回調(diào)
  websocketonopen() {
    // 開(kāi)啟心跳
    this.start();
    console.log("WebSocket連接成功!!!" + new Date() + "----" + this.websocket.readyState);
    clearInterval(this.otimer);//停止
  }
 
  // WebSocket連接錯(cuò)誤回調(diào)
  websocketonerror(e) {
    console.log("WebSocket連接發(fā)生錯(cuò)誤" + e);
  }
 
  // WebSocket連接關(guān)閉回調(diào)
  websocketclose(e) {
    this.websocket.close();
    clearTimeout(this.timeoutObj);
    clearTimeout(this.serverTimeoutObj);
    console.log("websocketcloe關(guān)閉連接")
  }
 
  // 關(guān)閉WebSocket連接
  closeWebSocket() {
    this.websocket.close();
    console.log("closeWebSocket關(guān)閉連接")
  }
 
  // 監(jiān)聽(tīng)窗口關(guān)閉事件
  onbeforeunload() {
    this.closeWebSocket();
  }
}

第二步，建立連接

在任意你想建立連接的頁(yè)面中建立Socket連接

比如，在用戶點(diǎn)擊登錄按鈕之后

在這里可以使用原型，創(chuàng)建連接對(duì)象，并啟動(dòng)連接

<script>
import Vue from "vue";
import {WebSocketClient} from "@/utils/websocket";
......
......
methods:{
 
 handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({path: this.redirect || '/'})
            this.loading = false
            /*-----------在此處放入原型中------------*/
            Vue.prototype.$WebSocketClientInstance = new WebSocketClient('t');
            Vue.prototype.$WebSocketClientInstance.initWebSocket()
            /*-----------------end------------*/
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message({message: '請(qǐng)?zhí)顚?xiě)正確格式的用戶名或密碼', type: 'error'})
          return false
        }
      })
    }    
}
 
.....
.....
</script>

第三步，監(jiān)聽(tīng)服務(wù)器發(fā)送過(guò)來(lái)的消息

在你想監(jiān)聽(tīng)的頁(yè)面，使用監(jiān)聽(tīng)器進(jìn)行監(jiān)聽(tīng)

<script>
....
....
mounted() {
    // 添加socket通知監(jiān)聽(tīng)
    window.addEventListener('onmessageWS', this.getSocketData)
},
methods: {
    // 收到消息處理
    getSocketData(res) {
      console.log(res.detail)
      console.log("llll")
    },
}
 
....
....
</script>

這個(gè)時(shí)候，你就可以通過(guò)后端的接口進(jìn)行發(fā)送了

 搞個(gè)測(cè)試

第四步，關(guān)閉連接 

搞個(gè)按鈕

<template>
  <div>
    <button @click="closeConnect">關(guān)閉連接</button>
  </div>
</template>
 
<script>
import {WebSocketClient} from "@/utils/websocket";
import Vue from "vue";
 
export default {
  methods: {
    closeConnect() {
      console.dir(Vue.prototype)
      Vue.prototype.$WebSocketClientInstance.closeWebSocket();
    },
  }
}
</script>

總結(jié)

到此這篇關(guān)于Spring Boot+Vue實(shí)現(xiàn)Socket通知推送的文章就介紹到這了,更多相關(guān)SpringBoot Vue實(shí)現(xiàn)Socket通知推送內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Swing常用組件之單選按鈕和復(fù)選框

    Swing常用組件之單選按鈕和復(fù)選框

    Swing是一個(gè)用于開(kāi)發(fā)Java應(yīng)用程序用戶界面的開(kāi)發(fā)工具包，這篇文章主要介紹了Swing常用組件之單選按鈕和復(fù)選框，感興趣的朋友可以參考一下
    2016-05-05
  • SpringMVC執(zhí)行步驟、Model的使用詳解

    SpringMVC執(zhí)行步驟、Model的使用詳解

    這篇文章主要介紹了SpringMVC執(zhí)行步驟、Model的使用詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2021-12-12
  • Jersey Restful接口如何獲取參數(shù)的問(wèn)題

    Jersey Restful接口如何獲取參數(shù)的問(wèn)題

    這篇文章主要介紹了Jersey Restful接口如何獲取參數(shù)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2021-06-06
  • 常用的Java數(shù)據(jù)結(jié)構(gòu)知識(shí)點(diǎn)匯總

    常用的Java數(shù)據(jù)結(jié)構(gòu)知識(shí)點(diǎn)匯總

    這篇文章主要介紹了常用的Java數(shù)據(jù)結(jié)構(gòu)知識(shí)點(diǎn)匯總，數(shù)據(jù)結(jié)構(gòu)分線性數(shù)據(jù)結(jié)構(gòu)和非線性數(shù)據(jù)結(jié)構(gòu)，下面對(duì)此作詳細(xì)介紹，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)或工作有所幫助
    2022-03-03
  • SpringBoot 過(guò)濾器與攔截器實(shí)例演示

    SpringBoot 過(guò)濾器與攔截器實(shí)例演示

    本文通過(guò)示例代碼給大家講解SpringBoot 過(guò)濾器與攔截器的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
    2021-11-11
  • Java?Excel?Poi字體顏色自定義設(shè)置代碼

    Java?Excel?Poi字體顏色自定義設(shè)置代碼

    最近項(xiàng)目使用POI按模板導(dǎo)出Excel,需要設(shè)置單元格的字體為紅色,下面這篇文章主要給大家介紹了關(guān)于Java?Excel?Poi字體顏色自定義設(shè)置的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • Spring中的FactoryBean與BeanFactory詳細(xì)解析

    Spring中的FactoryBean與BeanFactory詳細(xì)解析

    這篇文章主要介紹了Spring中的FactoryBean與BeanFactory詳細(xì)解析,在Spring框架中,FactoryBean和BeanFactory是兩個(gè)關(guān)鍵的接口,用于創(chuàng)建和管理對(duì)象實(shí)例,它們?cè)赟pring的IoC(Inversion of Control,控制反轉(zhuǎn))容器中發(fā)揮著重要的作用,需要的朋友可以參考下
    2023-11-11
  • java web開(kāi)發(fā)中大量數(shù)據(jù)導(dǎo)出Excel超時(shí)(504)問(wèn)題解決

    java web開(kāi)發(fā)中大量數(shù)據(jù)導(dǎo)出Excel超時(shí)(504)問(wèn)題解決

    開(kāi)發(fā)測(cè)試時(shí)候?qū)霐?shù)據(jù)遇到大數(shù)據(jù)導(dǎo)入的問(wèn)題，整理了下，需要的朋友可以參考下
    2017-04-04
  • Java使用線程池執(zhí)行定時(shí)任務(wù)

    Java使用線程池執(zhí)行定時(shí)任務(wù)

    本文介紹了Java使用線程池執(zhí)行定時(shí)任務(wù)，其中ScheduledThreadPool和SingleThreadScheduledExecutor都是可以執(zhí)行定時(shí)任務(wù)的，但是具體怎么執(zhí)行，下面我們一起進(jìn)入文章了解具體詳情吧
    2022-05-05
  • Springboot敏感字段脫敏的實(shí)現(xiàn)思路

    Springboot敏感字段脫敏的實(shí)現(xiàn)思路

    這篇文章主要介紹了Springboot敏感字段脫敏的實(shí)現(xiàn)思路，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2021-09-09

最新評(píng)論