chore(web): disable the ws protocol in the online version

.github/workflows/deploy_web.yaml

@@ -22,25 +22,25 @@ jobs:
       - name: build
         run: |
           cd web
-          yarn && yarn build
+          yarn && yarn build:online
 
-      - name: upload dist
-        if: github.event_name == 'release' && !github.event.release.prerelease
-        run: |
-          cd web
-          wget https://gosspublic.alicdn.com/ossutil/1.7.8/ossutil64
-          chmod 755 ./ossutil64
-          ./ossutil64 config -e https://oss-accelerate.aliyuncs.com -i ${{ secrets.ALI_OSS_ACCESSKEY_ID }} -k ${{ secrets.ALI_OSS_ACCESSKEY_SECRET }} -L CH
-          ./ossutil64 cp -r dist/ oss://mqtt-client-emqx-com/ -u
+      # TODO: upload dist to oss
+      # - name: upload dist
+      #   if: github.event_name == 'release' && !github.event.release.prerelease
+      #   run: |
+      #     cd web
+      #     wget https://gosspublic.alicdn.com/ossutil/1.7.8/ossutil64
+      #     chmod 755 ./ossutil64
+      #     ./ossutil64 config -e https://oss-accelerate.aliyuncs.com -i ${{ secrets.ALI_OSS_ACCESSKEY_ID }} -k ${{ secrets.ALI_OSS_ACCESSKEY_SECRET }} -L CH
+      #     ./ossutil64 cp -r dist/ oss://mqtt-client-emqx-com/ -u
 
-      - name: refresh cdn cache
-        if: github.event_name == 'release' && !github.event.release.prerelease
-        uses: Swilder-M/refresh-ali-cdn@v1
-        with:
-          access_key_id: ${{ secrets.ALI_OSS_ACCESSKEY_ID }}
-          access_key_secret: ${{ secrets.ALI_OSS_ACCESSKEY_SECRET }}
-          file_paths:
-            http://mqtt-client.emqx.com/
+      # - name: refresh cdn cache
+      #   if: github.event_name == 'release' && !github.event.release.prerelease
+      #   uses: Swilder-M/refresh-ali-cdn@v1
+      #   with:
+      #     access_key_id: ${{ secrets.ALI_OSS_ACCESSKEY_ID }}
+      #     access_key_secret: ${{ secrets.ALI_OSS_ACCESSKEY_SECRET }}
+      #     file_paths: http://mqtt-client.emqx.com/
 
   publish_docker:
     if: github.event_name != 'pull_request'

web/.env.docker

@@ -1,7 +0,0 @@
-VUE_APP_PAGE_TITLE=Easy-to-Use Online MQTT Client | Try Now
-VUE_APP_PAGE_DESCRIPTION=Online MQTT 5.0 client on the web, using MQTT over WebSocket to connect to the MQTT Broker and test message publishing and receiving in the browser.
-
-VUE_APP_DEFAULT_HOST=broker.emqx.io
-
-BASE_URL=/
-VUE_APP_OUTPUT_DIR=dist

web/.env.online

@@ -0,0 +1,4 @@
+VUE_APP_IS_ONLINE_ENV=true
+
+BASE_URL=/web-client/
+VUE_APP_OUTPUT_DIR=dist/web-client

web/package.json

@@ -4,9 +4,14 @@
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vue-cli-service serve",
+    "serve:online": "vue-cli-service serve --mode online",
+    "serve:docker": "vue-cli-service serve --mode docker",
     "build": "vue-cli-service build",
+    "build:online": "vue-cli-service build --mode online",
     "build:docker": "vue-cli-service build --mode docker",
-    "start": "vue-cli-service build && http-server dist -o /online-mqtt-client",
+    "start": "yarn build && http-server dist -o /",
+    "start:online": "yarn build:online && http-server dist -o /web-client",
+    "start:docker": "yarn build:docker && http-server dist -o /",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint"
   },

web/src/lang/connections.ts

@@ -507,4 +507,14 @@ export default {
     en: 'Clear history successfully',
     ja: '履歴を正常にクリアする',
   },
+  wsProtocolNotAllowed: {
+    zh: '出于数据安全考虑，我们提供的在线环境将不再支持使用 ws 协议。如需使用 ws 协议，我们建议您使用 {desktop} 或 {cli}，或者通过 Docker 在本地部署 {web}。有关详细信息，请参阅我们的{announcement}。',
+    en: 'For data security reasons, the online environment we provide will no longer support the use of the ws protocol. If you need to use the ws protocol, we recommend that you use {desktop} or {cli}, or deploy {web} locally through Docker. For more information, please refer to our {announcement}.',
+    ja: 'データセキュリティの観点から、提供されているオンライン環境では、wsプロトコルの使用をサポートしなくなります。wsプロトコルを使用する場合は、{desktop}または{cli}を使用するか、Dockerを使用して{web}をローカルにデプロイすることをお勧めします。詳細については、{announcement}をご覧ください。',
+  },
+  wsAnnouncement: {
+    zh: '最新公告',
+    en: 'latest announcement',
+    ja: '最新のお知らせ',
+  },
 }

web/src/utils/mqttUtils.ts

@@ -155,7 +155,7 @@ export const getDefaultRecord = (): ConnectionModel => {
     updateAt: time.getNowDate(),
     name: '',
     clean: true,
-    protocol: 'ws',
+    protocol: process.env.VUE_APP_IS_ONLINE_ENV === 'true' ? 'wss' : 'ws',
     host: process.env.VUE_APP_DEFAULT_HOST ?? 'broker.emqx.io',
     keepalive: 60,
     connectTimeout: 10,
@@ -164,7 +164,7 @@ export const getDefaultRecord = (): ConnectionModel => {
     username: '',
     password: '',
     path: '/mqtt',
-    port: 8083,
+    port: process.env.VUE_APP_IS_ONLINE_ENV === 'true' ? 8084 : 8083,
     ssl: false,
     certType: '',
     rejectUnauthorized: true,

web/src/views/connections/ConnectionForm.vue

@@ -93,9 +93,48 @@
             <el-col :span="22">
               <el-form-item class="host-item" label-width="93px" :label="$t('connections.brokerIP')" prop="host">
                 <el-col :span="6">
-                  <el-select size="mini" v-model="record.protocol">
-                    <el-option label="ws://" value="ws" :disabled="record.ssl"></el-option>
-                    <el-option label="wss://" value="wss"></el-option>
+                  <el-select size="mini" v-model="record.protocol" popper-class="ws-protocol-select">
+                    <el-option
+                      v-for="item in protocolOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                      :disabled="item.disabled"
+                    >
+                      <template v-if="!isOnline || item.value !== 'ws'">
+                        {{ item.label }}
+                      </template>
+                      <template v-else>
+                        <span style="float: left">{{ item.label }}</span>
+                        <el-tooltip
+                          placement="top"
+                          :effect="theme !== 'light' ? 'light' : 'dark'"
+                          :open-delay="500"
+                          :content="$t('connections.wsProtocolNotAllowed')"
+                          popper-class="ws-protocol-tip"
+                        >
+                          <div slot="content">
+                            <i18n path="connections.wsProtocolNotAllowed" tag="div">
+                              <template #desktop>
+                                <a :href="mqttxWebsite" target="_blank">MQTTX Desktop</a>
+                              </template>
+                              <template #cli>
+                                <a :href="`${mqttxWebsite}/cli`" target="_blank">MQTTX CLI</a>
+                              </template>
+                              <template #web>
+                                <a :href="`${mqttxWebsite}/downloads?os=docker`" target="_blank">MQTTX Web</a>
+                              </template>
+                              <template #announcement>
+                                <a :href="wsAnnouncementLink" target="_blank">{{ $t('connections.wsAnnouncement') }}</a>
+                              </template>
+                            </i18n>
+                          </div>
+                          <a href="javascript:;" class="icon-tip">
+                            <i class="el-icon-question"></i>
+                          </a>
+                        </el-tooltip>
+                      </template>
+                    </el-option>
                   </el-select>
                 </el-col>
                 <el-col :span="18">
@@ -586,6 +625,28 @@ export default class ConnectionCreate extends Vue {
     return this.$refs.form as VueForm
   }
 
+  get isOnline() {
+    return process.env.VUE_APP_IS_ONLINE_ENV === 'true'
+  }
+
+  get mqttxWebsite(): string {
+    const link = 'https://mqttx.app'
+    return this.getterLang === 'zh' ? `${link}/zh` : link
+  }
+
+  get wsAnnouncementLink() {
+    // TODO: update the link
+    return 'https://github.com/emqx/MQTTX/discussions'
+  }
+
+  get protocolOptions() {
+    const disabled = this.isOnline || this.record.ssl
+    return [
+      { label: 'ws://', value: 'ws', disabled },
+      { label: 'wss://', value: 'wss', disabled: false },
+    ]
+  }
+
   private async loadDetail(id: string) {
     const res: ConnectionModel | undefined = await loadConnection(id)
     if (res) {
@@ -867,4 +928,20 @@ export default class ConnectionCreate extends Vue {
     }
   }
 }
+
+.ws-protocol-tip {
+  max-width: 300px;
+  a {
+    font-size: 12px;
+  }
+}
+
+.ws-protocol-select {
+  .icon-tip {
+    position: absolute;
+    right: 16px;
+    font-size: 16px;
+    color: var(--color-text-tips);
+  }
+}
 </style>

web/src/views/connections/ConnectionsDetail.vue

@@ -240,6 +240,7 @@ export default class ConnectionsDetail extends Vue {
   @Action('SHOW_CLIENT_INFO') private changeShowClientInfo!: (payload: ClientInfo) => void
   @Action('UNREAD_MESSAGE_COUNT_INCREMENT') private unreadMessageIncrement!: (payload: UnreadMessage) => void
 
+  @Getter('currentLang') private getterLang!: Language
   @Getter('activeConnection') private activeConnection: $TSFixed
   @Getter('autoScroll') private autoScroll!: boolean
   @Getter('autoScrollInterval') private autoScrollInterval!: number
@@ -306,24 +307,65 @@ export default class ConnectionsDetail extends Vue {
   }
   private scrollSubject = new Subject()
 
+  get mqttxWebsite(): string {
+    const link = 'https://mqttx.app'
+    return this.getterLang === 'zh' ? `${link}/zh` : link
+  }
+
+  get wsAnnouncementLink() {
+    // TODO: update the link
+    return 'https://github.com/emqx/MQTTX/discussions'
+  }
+
   // Connect
   public connect(): boolean | void {
+    if (process.env.VUE_APP_IS_ONLINE_ENV === 'true' && this.record.protocol === 'ws') {
+      const desktop = `<a href="${this.mqttxWebsite}" target="_blank">MQTTX Desktop</a>`
+      const cli = `<a href="${this.mqttxWebsite}/cli" target="_blank">MQTTX CLI</a>`
+      const web = `<a href="${this.mqttxWebsite}/downloads?os=docker" target="_blank">MQTTX Web</a>`
+      const announcement = `<a href="${this.wsAnnouncementLink}" target="_blank">${this.$tc(
+        'connections.wsAnnouncement',
+      )}</a>`
+      const message = `<p>${this.$t('connections.wsProtocolNotAllowed', { desktop, cli, web, announcement })}</p>`
+      this.$notify({
+        title: this.$tc('common.warning'),
+        message,
+        dangerouslyUseHTMLString: true,
+        type: 'warning',
+        duration: 0,
+        offset: 30,
+      })
+      return false
+    }
+
     this.isReconnect = false
     if (this.client.connected || this.connectLoading) {
       return false
     }
     this.connectLoading = true
     // new client
-    const { curConnectClient } = createClient(this.record)
-    this.client = curConnectClient
-    const { id } = this.record
-    if (id && this.client.on) {
-      this.client.on('connect', this.onConnect)
-      this.client.on('error', this.onError)
-      this.client.on('reconnect', this.onReConnect)
-      this.client.on('close', this.onClose)
-      this.client.on('disconnect', this.onDisconnect)
-      this.client.on('message', this.onMessageArrived(id))
+    try {
+      const { curConnectClient } = createClient(this.record)
+      this.client = curConnectClient
+      const { id } = this.record
+      if (id && this.client.on) {
+        this.client.on('connect', this.onConnect)
+        this.client.on('error', this.onError)
+        this.client.on('reconnect', this.onReConnect)
+        this.client.on('close', this.onClose)
+        this.client.on('disconnect', this.onDisconnect)
+        this.client.on('message', this.onMessageArrived(id))
+      }
+    } catch (error) {
+      const err = error as Error
+      this.connectLoading = false
+      this.$notify({
+        title: err.toString(),
+        message: '',
+        type: 'error',
+        duration: 3000,
+        offset: 30,
+      })
     }
   }