Vite+Vue根據環境配置Websocket地址

来源:https://www.cnblogs.com/haleyeung/p/18013755
-Advertisement-
Play Games

前言 上回說到,利用vite載入不同mode下的配置文件,可以實現不同運行環境下的參數配置。在前端應用中經常使用到Websocket,其地址同樣可以在.env中間中配置。 代碼 vite.config.ts代碼的執行是在createApp之前,不可以在vite.config.ts中使用例如pinia ...


前言

上回說到,利用vite載入不同mode下的配置文件,可以實現不同運行環境下的參數配置。在前端應用中經常使用到Websocket,其地址同樣可以在.env中間中配置。

代碼

vite.config.ts代碼的執行是在createApp之前,不可以在vite.config.ts中使用例如piniarouter等組件。可以使用import.meta.env獲取配置文件中的參數

廢話少說,直接上代碼。

前端

.env.development

# 開發環境配置
NODE_ENV='development'

# 本地服務埠
VITE_PORT=8093

.......

# Websocket服務地址
VITE_WS_URL='ws://localhost:8083'

demo.vue

const wsPath = import.meta.env.VITE_WS_URL + 'ws/demo';
let wsSocket: any;
function wsInit() {
  if (typeof (WebSocket) === 'undefined') {
    console.log("瀏覽器不支持websocket");
  } else {
    wsSocket = new WebSocket(wsPath);
    wsSocket.onopen = open;
    wsSocket.onerror = error;
    wsSocket.onmessage = getMessage;
  }
}
function open() {
  console.log("websocket連接成功")
}

function error(error: string) {
  console.log("websocket連接錯誤", error)
}
function getMessage(msg: MessageEvent) {
  let states = msg.data;
  states = JSON.parse(states);
  states.forEach((dataItem: any) => {

  });
}
function send(params: string) {
  wsSocket.send(params)
}

function close(e: any) {
  console.log("websocket連接關閉")
}
onMounted(() => {
  wsInit();
})
onUnmounted(() => {
  wsSocket.onclose = close;
})

後端

Websocket.config.java

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

DemoWebsocketServer.java

import io.micrometer.common.util.StringUtils;
import jakarta.websocket.*;
import jakarta.websocket.server.ServerEndpoint;
import lombok.Getter;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.Objects;
import java.util.concurrent.ConcurrentHashMap;

@Slf4j
@Component
@ServerEndpoint(value = "/ws/demo")
public class DemoWebsocketServer {
    private static ConcurrentHashMap<String, DemoWebsocketServer> webSocketMap = new ConcurrentHashMap<>();
    @Getter
    private Session session;

    public String pointsUrl;
    private static StringRedisTemplate stringRedisTemplate;

    @Autowired
    public void setStringRedisTemplate(StringRedisTemplate stringRedisTemplate) {
        DemoWebsocketServer.stringRedisTemplate = stringRedisTemplate;
    }

    /**
     * 連接建立成功調用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        log.info("{}連接成功", this.getSession());
        webSocketMap.put(session.getId(), this);
        sendMessage("");
    }

    @OnMessage
    public void onMessage(String message) {
        // todo 獲取前端發送過來的
    }

    /**
     * 連接關閉調用的方法
     */
    @OnClose
    public void onClose() {
        //從set中刪除
        webSocketMap.remove(this.getSession().getId());
        log.info("斷開連接" + this.getSession());
    }

    /**
     * @param error
     */
    @OnError
    public void onError(Throwable error) {
        if (error.getMessage().contains("Broken pipe")) {
            log.info("客戶端突然斷開連接");
        } else {
            System.out.println("發生錯誤");
            error.printStackTrace();
        }
    }

    /**
     * 實現伺服器主動推送
     */
    public void sendMessage(String message) {
        synchronized (webSocketMap) {
            if (!StringUtils.isEmpty(this.getSession().getId()) && webSocketMap.containsKey(this.getSession()
                    .getId())) {
                try {
                    webSocketMap.get(this.getSession().getId()).getSession().getBasicRemote().sendText(message);
                } catch (IOException e) {
                    throw new RuntimeException(e);
                }
            }
        }
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) {
            return true;
        }
        if (o == null || getClass() != o.getClass()) {
            return false;
        }
        DemoWebsocketServer that = (DemoWebsocketServer) o;
        return Objects.equals(session, that.session) && Objects.equals(pointsUrl, that.pointsUrl);
    }

    @Override
    public int hashCode() {
        return Objects.hash(session, pointsUrl);
    }
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 已經用 uni-app+vue3+ts 開發了一段時間,記錄一下日常遇見的問題和解決辦法 uni-app 中的單端代碼 uni-app 是支持多端,如果你想讓你的代碼,只在部分平臺使用,那麼就需要用的它的單端處理語法 //#ifdef 和 //#ifndef 等。 1. //#ifdef xxx 只 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 前端開發中難免會遇到價格和金額計算的需求,這類需求所要計算的數值大多數情況下是要求精確到小數點後的多少位。但是因為JS語言本身的缺陷,在處理浮點數的運算時會出現一些奇怪的問題,導致計算不精確。 本文嘗試從現象入手,分析造成這一問題原 ...
  • 廢話不多說,龍年騰雲特效送給大家 預覽 線上預覽 龍年騰雲 源碼 龍是使用的 svg,你也可以替換成其他樣式的龍,而雲是圖片轉化成的 base64 編碼,所以整個文件就是一個 html。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
  • 本文介紹了GNU項目與Linux系統的關係,GNU項目提供了許多自由軟體,其中一些成為了Linux系統的核心組件。文章還討論了Shell的概念以及在Linux中的應用,以及X Window System和GNOME桌面環境在提供圖形界面方面的作用。 ...
  • 痞子衡嵌入式半月刊: 第 91 期 這裡分享嵌入式領域有用有趣的項目/工具以及一些熱點新聞,農曆年分二十四節氣,希望在每個交節之日準時發佈一期。 本期刊是開源項目(GitHub: JayHeng/pzh-mcu-bi-weekly),歡迎提交 issue,投稿或推薦你知道的嵌入式那些事兒。 上期回顧 ...
  • 註意本文是SQL執行順序,不是MySQL Server內部執行流程。 MySQL並非像PostgreSQL(被認為是最接近 SQL 標準的資料庫之一)一樣嚴格按照SQL標準,MySQL執行引擎會根據查詢的具體情況和優化策略來決定具體的執行順序,所以SQL執行順序是理論順序。 書寫順序 select. ...
  • 開心一刻 今天我突然頓悟了,然後跟我媽聊天 我:媽,我發現一個餓不死的辦法 媽:什麼辦法 我:我先養個狗,再養個雞 媽:然後了 我:我拉的狗吃,狗拉的雞吃,雞下的蛋我吃,如此反覆,我們三都餓不死 媽:你整那麼多中間商幹啥,你就自己拉的自己吃得了,還省事 我又頓悟了,回到:也是啊 說句很重要的心裡話: ...
  • 寫在前面 和大家不太一樣,我覺得今年的自己更加relax,沒有親戚要走,沒有朋友相聚,也沒有很好的哥們要去敘舊,更沒有無知的相親,甚至可以這麼說沒有那些閑得慌的鄰居。 也可以說是從今天開始,算是可以進入自己的小世界,做自己想做的事,看看書,學習一下。 生活的精髓在於善待自己,用心感受每一刻的歡愉與寧 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...