diff --git a/web/src/types/global.d.ts b/web/src/types/global.d.ts
index b4813a701..93738b8cb 100644
--- a/web/src/types/global.d.ts
+++ b/web/src/types/global.d.ts
@@ -246,6 +246,7 @@ declare global {
 
   interface SSLPath {
     rejectUnauthorized?: boolean
+    ALPNProtocols?: string | null
     ca: string
     cert: string
     key: string
diff --git a/web/src/utils/mqttUtils.ts b/web/src/utils/mqttUtils.ts
index a3e464103..bcfdae5e6 100644
--- a/web/src/utils/mqttUtils.ts
+++ b/web/src/utils/mqttUtils.ts
@@ -40,6 +40,7 @@ const getClientOptions = (record: ConnectionModel): IClientOptions => {
     reconnectPeriod, // reconnectPeriod = 0 disabled automatic reconnection in the client
     will,
     rejectUnauthorized,
+    ALPNProtocols,
     clientIdWithTime,
   } = record
   const protocolVersion = mqttVersionDict[mqttVersion]
@@ -76,6 +77,10 @@ const getClientOptions = (record: ConnectionModel): IClientOptions => {
   // SSL
   if (ssl) {
     options.rejectUnauthorized = rejectUnauthorized === undefined ? true : rejectUnauthorized
+    if (ALPNProtocols) {
+      console.log(ALPNProtocols.replace(/[\[\] ]/g, '').split(','))
+      options.ALPNProtocols = ALPNProtocols.replace(/[\[\] ]/g, '').split(',')
+    }
     if (certType === 'self') {
       const sslRes: SSLContent | undefined = getSSLFile({
         ca: record.ca,
@@ -158,6 +163,7 @@ export const getDefaultRecord = (): ConnectionModel => {
     ssl: false,
     certType: '',
     rejectUnauthorized: true,
+    ALPNProtocols: '',
     ca: '',
     cert: '',
     key: '',
diff --git a/web/src/views/connections/ConnectionForm.vue b/web/src/views/connections/ConnectionForm.vue
index dfcbfc4a2..851c67f4e 100644
--- a/web/src/views/connections/ConnectionForm.vue
+++ b/web/src/views/connections/ConnectionForm.vue
@@ -163,6 +163,12 @@
                 </el-form-item>
               </el-col>
               <el-col :span="2"> </el-col>
+              <el-col :span="22">
+                <el-form-item label-width="93px" label="ALPN" prop="ALPNProtocols">
+                  <el-input size="mini" clearable v-model.trim="record.ALPNProtocols"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="2"></el-col>
             </template>
           </el-row>
         </el-card>
@@ -563,8 +569,6 @@ export default class ConnectionCreate extends Vue {
       path: [{ required: true, message: this.$t('common.inputRequired') }],
       host: [{ required: true, message: this.$t('common.inputRequired') }],
       port: [{ required: true, message: this.$t('common.inputRequired') }],
-      certType: [{ required: true, message: this.$t('common.selectRequired') }],
-      ca: [{ required: true, message: this.$t('common.inputRequired') }],
     }
   }