それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

Airdrop的にブラウザでファイルを送信したい。Snapdropの実行

AirDrop的にファイルを送受信したい。

Windows-iOSiOS-Android間で、ファイルを送受信したい。

SnapDropというWebアプリケーションがある。

MacWindowsでファイルのやり取りがとても不便なので、ちょっとしたテキストを送受信するのに便利だと思う。

公式サイトで使えるのだが、snapdrop を使いたいが、いくらWebsocketでローカルしか通信してないといえども、自分のドメイン以外だと不安だ。

docker で動かす

dockerhub に linuxserver/snapdropが用意されているので、それを動かせばいい。

docker run -d -p 127.0.0.2:8081:80 linuxserver/snapdrop

ただし、WebSocketが平文通信で制限される(wss://を使う)ので、TLS処理は必須になる。

nginx で暗号化処理

TLSHTTPS)化のために、nginxでデータを受けることにする、

# vim: ft=nginx ts=2 sw=2 sts=2

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {

  server_name  snapdrop.example.com;

  add_header  X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";

  listen 127.0.0.1:443 ssl http2;
  ssl_certificate_key /etc/letsencrypt/live/example.com-wildcard/privkey.pem;
  ssl_certificate /etc/letsencrypt/live/example.com-wildcard/fullchain.pem;

  if ($scheme = http) {
    return 301 https://$server_name$request_uri;
  }

  location = /robots.txt { return 200 "User-agent: *\nDisallow: /\n"; }
  add_header  X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";

  #location /  {
  #  add_header Content-Type "text/html";
  #  return 200 "<h1>It works.(nginx)</h1>";
  #}
  location / {
    ## いつもの設定
    proxy_http_version      1.1;
    proxy_read_timeout      300;
    proxy_connect_timeout   300;
    proxy_set_header Host              $server_name;
    proxy_set_header X-Real-IP         $remote_addr;
    proxy_set_header X-Forwarded-For   $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Forwarded-Host  $server_name;
    proxy_set_header Upgrade           $http_upgrade;
    proxy_set_header Connection        $connection_upgrade;
    proxy_pass http://192.168.2.240:8080;

  }
}

wss:// を使うために、次の設定が必要

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {

  location / {
    proxy_set_header Upgrade           $http_upgrade;
    proxy_set_header Connection        $connection_upgrade;
 

http_upgradeが設定されていたら、upgrade 文字列を connection_upgrade 変数に代入し、なければ空文字にする。 connection_upgrade変数をみてConnectionヘッダを中継する。

無事に相手が見える。

長押し(右クリック)でメッセージ送信

長押し(PCは右クリック)でテキストメッセージを送信できる。

ローカルアドレスなら検出可能

ローカルアドレスであれば、検出可能なようですね。VPN経由でもVPN同士でも通信ができました。

自分で運用する安心ポイント

ローカル内部で完結するので、パスワードなどのテキストを受け渡ししても「安心」かもしれません。