@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
33import {CheckCircleOutlined ,DownloadOutlined ,InfoCircleOutlined }from ' @ant-design/icons-vue'
44import geolite from ' @/api/geolite'
55import {formatDateTime }from ' @/lib/helper'
6- import websocket from ' @/lib/websocket'
6+ import { useWebSocket } from ' @/lib/websocket'
77
88interface Emits {
99 (e : ' downloadComplete' ): void
@@ -55,16 +55,17 @@ function downloadGeoLiteDB() {
5555downloadProgress .value = 0
5656downloadMessage .value = $gettext (' Starting download...' )
5757
58- const ws= websocket (' /api/geolite/download' ,false )
58+ const { ws }= useWebSocket (' /api/geolite/download' ,false )
59+ const socket= ws .value !
5960
6061let isFailed= false
6162let currentPhase= ' download' // 'download' or 'decompress'
6263
63- ws .onopen = ()=> {
64- // WebSocket connected, server will start download
64+ socket .onopen = ()=> {
65+ socket . send ( ' start' )
6566 }
6667
67- ws .onmessage = async m => {
68+ socket .onmessage = async m => {
6869const r= JSON .parse (m .data )
6970
7071// Update message and detect phase changes
@@ -99,13 +100,13 @@ function downloadGeoLiteDB() {
99100 }
100101 }
101102
102- ws .onerror = ()=> {
103+ socket .onerror = ()=> {
103104isFailed = true
104105downloadStatus .value = ' exception'
105106downloadMessage .value = $gettext (' Download failed' )
106107 }
107108
108- ws .onclose = async ()=> {
109+ socket .onclose = async ()=> {
109110if (isFailed ) {
110111downloading .value = false
111112return