IPv4接続かIPv6接続か表示する

今IPv4で接続しているのか、IPv6で接続するのか表示するページが時々ある。So-netのトップページはそうだ（が、モバイル用のページだと表示していないようだ。こっちのページはデスクトップ用しかなく、こちらなら表示される）。

このサイトでもトップページで、下の方に「Connected via IPvナントカ」って出るようにしてみた。

やったことは以下の通り。

まず、nginxのconfigで、IPv4接続かIPv6接続かをチェックするためにgeoディレクティブを使う。

geo $iptype {
  ::0/0 ipv6;
  0.0.0.0/0 ipv4;
}

serverディレクティブ内部で、この値を使う。

  location ~ ^/ipx {
    if ($iptype = 'ipv6') {
      return 200 'IPv6';
        add_header Content-Type text/plain;
    }
    if ($iptype = 'ipv4') {
      return 200 'IPv4';
      add_header Content-Type text/plain;
    }
  }

/ipxにアクセスすると、IPv4またはIPv6の文字列が返る。これを、トップページのhtmlの中に埋め込む。

const now = Date.now();
fetch('/ipx?' + now).then(function(response) {
  return response.text();
}).then(function(text) {
  document.getElementById('ipvx').innerText = "Connected via " + text;
});

Date.now()使ってるのはキャッシュされないようにするため。