{"id":10225,"date":"2019-05-19T12:45:50","date_gmt":"2019-05-19T10:45:50","guid":{"rendered":"https:\/\/pi3g.com\/?p=10225"},"modified":"2019-05-19T12:54:09","modified_gmt":"2019-05-19T10:54:09","slug":"envoy-websockets-per-route-configuration-javascript-test-setup","status":"publish","type":"post","link":"https:\/\/pi3g.com\/de\/envoy-websockets-per-route-configuration-javascript-test-setup\/","title":{"rendered":"envoy Websockets per Routenkonfiguration, JavaScript-Testaufbau"},"content":{"rendered":"

In my article yesterday I discussed the configuration & test of envoy for proxying websockets<\/a> at length.<\/p>\n

Today I would like to add some additional information.<\/p>\n

correct syntax for websocket upgrade per route<\/h1>\n

You can enable websocket upgrade per route. No need to add it globally:<\/p>\n

\n

– name: envoy.http_connection_manager
    config:
      #upgrade_configs:
      #  – upgrade_type: websocket
      stat_prefix: ingress_https
      use_remote_address: true
      xff_num_trusted_hops: 0
      route_config:
        virtual_hosts:
        – name: picockpit_withport
          domains: [“picockpit.local:443”]
          routes:
            – match: { prefix: “\/mqtt\/webclient” }
              route:
                cluster: target_dwebsocket
                upgrade_configs:
                  – upgrade_type: “websocket”
                    enabled: true
            – match: {prefix: “\/”}
              route: {cluster: target_picockpit}<\/p>\n<\/blockquote>\n

Please note that I decided to mirror the configuration including the port, and without \u2013 just in case:<\/p>\n

\n

– name: picockpit
   domains: [“picockpit.local”]
   routes:
     – match: { prefix: “\/mqtt\/webclient” }
       route:
         cluster: target_dwebsocket
         upgrade_configs:
           – upgrade_type: “websocket”
             enabled: true
     – match: {prefix: “\/”}
       route: {cluster: target_picockpit}<\/p>\n<\/blockquote>\n

Please see below (Update 3) for combining both in a single stanza, which is more elegant, and Update 2 for my doubts about the port notation being required for the JavaScript client.<\/p>\n

Enabled globally by default?<\/h1>\n

Please note that the envoy documentation seems to imply that websocket upgrades are enabled by default globally<\/a>. I have not tested this. <\/p>\n

Maybe you only need to specify the domain including<\/strong> the port, as discussed in my article<\/a>, for websocket connections to work.<\/p>\n

Javascript test<\/h1>\n

A simple JavaScript test client would look like this:<\/p>\n

\n

function connect(){
     console.log(“Building up websocket”);
     var socket = new WebSocket(“wss:\/\/key:secret@picockpit.local\/mqtt\/webclient”);
     socket.onerror = function(event){
         console.log(“an error has been encountered”);
         console.log(event);
     }<\/p>\n

    socket.onopen = function(){
         console.log(“Socket has been opened.”);
         console.log(‘Socket Status: ‘+ socket.readyState);
         socket.send(“Hello server!”);
     }
     socket.onmessage = function(msg){
         console.log(“received message”);
         console.log(msg);
     }
     console.log(“Finished with first websocket”);
\n}<\/p>\n

connect();<\/p>\n<\/blockquote>\n

\nIn combination with my other post<\/a>, and the simple websocket echo client, you would get a \u201cHello server!\u201d back as a message:<\/p>\n

\"image\"<\/a><\/p>\n

Update 2<\/h1>\n

It seems that the JavaScript client is not using the domain:port authority syntax. Therefore the first stanza is probably not needed<\/p>\n

\"image\"<\/a><\/p>\n

This should be enough, then:<\/p>\n

– name: picockpit
  domains: [“picockpit.local”]
  routes:
    – match: { prefix: “\/mqtt\/webclient” }
      route:
        cluster: target_dwebsocket
        upgrade_configs:
          – upgrade_type: “websocket”
            enabled: true
     – match: {prefix: “\/”}
       route: {cluster: target_picockpit}<\/p><\/blockquote>\n

Update 3<\/h1>\n

The simplest way is to probably just match for both domain variations and have the same code:<\/p>\n

\n

– name: envoy.http_connection_manager
   config:
     #upgrade_configs:
     #  – upgrade_type: websocket
     stat_prefix: ingress_https
     use_remote_address: true
     xff_num_trusted_hops: 0
     route_config:
       virtual_hosts:
       – name: picockpit_withport
        domains: [“picockpit.local:443”, “picockpit.local”]<\/strong>
         routes:
           #- match: { prefix: “\/mqtt\/webclient” }
           – match: { prefix: “\/mqtt” }
             route:
               cluster: target_dwebsocket
               upgrade_configs:
                 – upgrade_type: “websocket”
                   enabled: true
           – match: {prefix: “\/”}
             route: {cluster: target_picockpit}<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

In meinem gestrigen Artikel habe ich die Konfiguration und den Test von envoy f\u00fcr das Proxying von Websockets ausf\u00fchrlich besprochen. Heute m\u00f6chte ich einige zus\u00e4tzliche Informationen hinzuf\u00fcgen. korrekte Syntax f\u00fcr Websocket-Upgrade pro Route Sie k\u00f6nnen Websocket-Upgrade pro Route aktivieren. Sie m\u00fcssen es nicht global hinzuf\u00fcgen: - name: envoy.http_connection_manager config: #upgrade_configs: # - upgrade_type: websocket ...<\/p>","protected":false},"author":830,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[402],"tags":[481,600,602],"class_list":["post-10225","post","type-post","status-publish","format-standard","hentry","category-development","tag-envoy","tag-javascript","tag-websockets"],"_links":{"self":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/10225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/users\/830"}],"replies":[{"embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/comments?post=10225"}],"version-history":[{"count":3,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/10225\/revisions"}],"predecessor-version":[{"id":10230,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/posts\/10225\/revisions\/10230"}],"wp:attachment":[{"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/media?parent=10225"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/categories?post=10225"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pi3g.com\/de\/wp-json\/wp\/v2\/tags?post=10225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}