SkyBeje開発記

SkyWayを使ったブラウザ間通信アプリを開発しています

SkyWayの利用可能ドメイン指定とlocalhostでのデバックについて

はじめに

 SkyWayを使ったWebサービスを開発する際に、SkyWayのコンソールで「利用可能ドメイン」を指定すると思いますが、私は暫くドメインを跨いでの接続はできないと勘違いしていました。

 ドメインを跨いで接続できる事により、様々な方法でデバックできる事に気が付いたので、今回はその事について書きます。

 

SkyWayを利用した通常のWebサービスの動作イメージ

 はじめに、SkyWayを使ったWebサービスの動作イメージの簡単な説明をします。
 (Chromeのマーク=ブラウザです)

f:id:iwatendo:20180205164649p:plain

 Step1 各端末がWebサーバにアクセス。HTMLやJavaScriptを取得。
 Step2 各端末がSkyWayのサーバーにアクセス。各端末のブラウザを繋げます。
 Step3 ブラウザ間で通信します。

 ※実際にはもっと複雑ですが、大雑把にはこんな感じだと思います。
 

ローカルホストでの開発について

 開発時はローカルにWebサーバーを立てて、利用可能ドメインに「localhost」を指定して、開発するのが一般的だと思います。


その場合の動作メージは
f:id:iwatendo:20180205171518p:plain

 Step1 同一端末内でブラウザを2つ立ち上げ、ローカルWebサーバーにアクセス。
 Step2 各ブラウザがSkyWayのサーバーにアクセス。ブラウザ間を繋げます。
 Step3 ブラウザ間で通信します。


複数端末で、各自のローカルWebサーバーを使用してのデバック

 ここからが、私が最初気付かなかったデバック方法です。

 各端末が同一のAPIキーを指定していれば、それぞれのローカルWebサーバーのlocalhostに接続した状態でも、ブラウザ間で通信ができます。

f:id:iwatendo:20180205172623p:plain

 Step1 それぞれの端末で、各自のローカルWebサーバーにアクセス
 Step2 SkyWayのサーバーにアクセスし、ブラウザ間を繋げる
 Step3 ブラウザ間で通信
 
 この方法だと、Webサーバーを準備しなくても、複数端末を使ってのデバックが可能です。通常はこういったデバックが必要になるケースはあまり無いかもしれませんが、複雑な実装のデバックをする場合に、役に立つ事があるかもしれません。


ドメインを跨いでの接続

 SkyWayのコンソールの「利用可能ドメイン名」に、複数のドメインを指定すると別々のドメインにアクセスしたブラウザ間でも、通信が可能です。

f:id:iwatendo:20180205174036p:plain


 例えば、オンライン家庭教師のようなサービスを作る際に、生徒側がアクセスするドメインと、先生側がアクセスするドメインを別にするといった実装が可能です。

 また、生徒側のUIと、先生側のUIを、それぞれ別の形でも実装できます。


ドメインを跨いだ接続ができる事を利用したデバック方法

 前述のドメインを跨いで接続できる事を応用して
 ローカルホストと、Webサーバー間での接続もできます。

f:id:iwatendo:20180205174522p:plain


 接続イメージ

f:id:iwatendo:20180205174607p:plain

 Step1 2つのブラウザのうち、片方は外部のWebサーバーにアクセス
     もう一方はローカルホストに接続
 Step2 SkyWayのサーバーにアクセスし、ブラウザ間を繋げる
 Step3 ブラウザ間で通信


 ※但し基本的には localhost からのアクセスは許可しない方が安全だと思います。
 ※私は上記の形でデバックする場合、テスト用のWebサーバーを使用しています。


最後に

 こういった内容の記事を見かけた事がなかったので書いてみました。

 SkyWayを使ったサービスを開発している方や、今後SkyWay使ったサービスを開発してみたいと考えてる人のお役に立てれば幸いです。

 また何か気がついた点がありましたら、コメントかTwitterの方に連絡頂ければと思います。