WebRTC を介して Web ブラウザで Web サーバーを実行する
Smoke により、ブラウザは WebRTC 上でマイクロ Web サーバーを実行できるようになります
import { Network } from '@sinclair/smoke'
// ------------------------------------------------------------------
//
// Create a Virtual Network
//
// ------------------------------------------------------------------
const { Http } = new Network ( )
// ------------------------------------------------------------------
//
// Create a Http Listener on a Virtual Port
//
// ------------------------------------------------------------------
Http . listen ( { port : 5000 } , request => new Response ( 'hello webrtc' ) )
// ------------------------------------------------------------------
//
// Fetch data over WebRTC
//
// ------------------------------------------------------------------
const text = Http . fetch ( 'http://localhost:5000' ) . then ( r => r . text ( ) )
$ npm install @sinclair/smoke
Smoke は実験的なブラウザ ネットワーキングおよびストレージ フレームワークで、WebRTC 経由の Http、Tcp、WebSocket エミュレーションと、IndexedDB 経由の大容量ファイル ストレージを提供します。これは、ブラウザーでピアツーピア Web サービスを開発するための基盤として構築されており、各ブラウザーはアプリケーション制御の仮想ネットワーク経由でアクセスできます。
Smoke は WebRTC を WinterCG 互換インターフェイスに再構築し、従来の Web サーバー アプリケーションをサーバー環境とブラウザ環境間で移植できるようにします。これは、ユーザー中心のサービスをクラウドから移行し、ブラウザー内でピアツーピアで実行できる代替ソフトウェア アーキテクチャをサポートするために開発されています。
MITライセンス
Smoke ネットワーキング API は、Network オブジェクトを通じて提供されます。ネットワーク オブジェクトは、共有シグナリング ハブへのアクティブな接続を表し、同じハブに接続されている他のネットワーク オブジェクトとの通信に使用される Http、ネット、およびメディアの機能を公開します。
import { Network , Hubs } from '@sinclair/smoke'
const { Http , Net , Media , Hub } = new Network ( { hub : new Hubs . Private ( ) } )
const address = await Hub . address ( ) // The address of this Network object.
プライベート ハブは、ブラウザの BroadcastChannel API を介して WebRTC ICE メッセージを転送するメモリ内リレーです。プライベート ハブは、同じブラウザ プロセス内で実行されているページおよび他のタブにのみメッセージを中継できます。プライベート ハブは現在のページの外部で行われる接続を促進できないため、プライベート ハブと見なされます。このハブがデフォルトです。
import { Network , Hubs } from '@sinclair/smoke'
const { Http } = new Network ( { hub : new Hubs . Private ( ) } )
このハブの実装は現在保留中です。
import { Network , Hubs } from '@sinclair/smoke'
const { Http } = new Network ( { hub : new Hubs . Public ( 'ws://server/hub' ) } )
Http API は、WebRTC 経由の Http リッスンとフェッチをサポートします。 WebSocket エミュレーションも提供します。
const { Http } = new Network ( )
listen 関数を使用して、リモート ピアから HTTP リクエストを受信します。
Http . listen ( { port : 5000 } , request => new Response ( 'hello' ) )
フェッチ関数を使用して、リモート ピアに Http リクエストを送信します。
const response = await Http . fetch ( 'http://localhost:5000' )
const message = await response . text ( )
アップグレード機能を使用して Http リクエストを WebSocket に変換する
Http . listen ( { port : 5000 } , request => Http . upgrade ( request , ( socket ) => socket . send ( 'hello' ) ) )
connect 関数を使用して、リモート WebSocket サーバーに接続します。
const socket = await Http . connect ( 'ws://localhost:5000' )
socket . on ( 'message' , ( event ) => console . log ( event . data ) )
socket . on ( 'error' , ( event ) => console . log ( event ) )
socket . on ( 'close' , ( event ) => console . log ( event ) )
Net API は、RTCDataChannel を介した Tcp エミュレーションを提供します
const { Net } = new Network ( )
listen 関数を使用して、受信ソケットを受け入れます。
Net . listen ( { port : 5000 } , async socket => {
const data = await socket . read ( )
await socket . write ( data )
await socket . close ( )
} )
connect 関数を使用して、リモート リスナーへのネット接続を確立します。
const socket = await Net . connect ( { hostname : 'localhost' , port : 5000 } )
await socket . write ( new Uint8Array ( 1000 ) )
const data = await socket . read ( ) // Uint8Array()
const end = await socket . read ( ) // null
Media API は、WebRTC 経由で MediaStream オブジェクトを送受信する機能を提供します。
const { Media } = new Network ( )
listen 関数を使用して、受信 MediaStream オブジェクトをリッスンします。
Media . listen ( { port : 6000 } , ( receiver ) => {
const video = document . createElement ( 'video' )
video . srcObject = receiver . mediastream
video . play ( )
document . body . appendChild ( video )
receiver . on ( 'close' , ( ) => document . removeChild ( video ) )
} )
send 関数を使用して MediaStream をリスナーに送信します
const sender = await Media . send ( { hostname : 'localhost' , port : 6000 } , new MediaStream ( [ ... ] ) )
sender . close ( ) // stop sending live media
audio 関数を使用して、ストリーミング可能な AudioSource を作成します。
const audio = Media . audio ( { src : './audio.mp3' } )
const sender = Media . send ( { hostname : 'localhost' , port : 6000 } , audio . mediastream )
video 関数を使用して、ストリーミング可能な VideoSource を作成します。
const video = Media . video ( { src : './video.mp4' } )
const sender = Media . send ( { hostname : 'localhost' , port : 6000 } , video . mediastream )
パターン関数を使用して、MediaStream テスト パターンを生成します。この機能は、Web カメラやその他のメディア ソースを使用せずにライブ メディア ストリーミングをテストする場合に役立ちます。
const pattern = Media . pattern ( )
const sender = Media . send ( { port : 5000 } , pattern . mediastream )
Smoke は、ブラウザ内に大きなファイルを保存できる階層ファイル システムを提供します。ファイル システムは IndexedDB によってサポートされており、ストリーミング読み取りと書き込み、ディレクトリ列挙、コピー、移動、名前変更、およびファイルとディレクトリの監視イベントをサポートしています。これは、ネットワーク サービスの静的ファイル ストアとして機能するように設計されていますが、ブラウザに大きなファイルを保存する必要があるアプリケーションの汎用ファイル システムとしても使用できます。
open 関数を使用して、指定されたデータベース名のファイル システムを開きます。データベースが存在しない場合は作成されます。
import { FileSystem } from '@sinclair/smoke'
const Fs = await FileSystem . open ( '<database-name>' )
stat 関数を使用して、ファイルまたはディレクトリに関する情報を返します。
const stat = await Fs . write ( '/path/file.txt' )
パスが存在することを確認するには、exists 関数を使用します。
const exists = await Fs . exists ( '/path/file.txt' )
mkdir 関数を使用してディレクトリを作成します。
await Fs . mkdir ( '/media/videos' )
readdir 関数を使用して、指定されたディレクトリ パスの stat オブジェクトを返します。
const stats = await Fs . readdir ( '/media/videos' )
blob 関数を使用して、Blob オブジェクトをファイル パスに返します。
const blob = await Fs . readdir ( '/video.mp4' )
const url = URL . createObjectUrl ( blob )
ファイルの内容を書き込むには、write 関数と writeText 関数を使用します。
await Fs . write ( '/path/file.dat' , new Uint8Array ( [ 1 , 2 , 3 , 4 ] ) )
await Fs . writeText ( '/path/file.txt' , 'hello world' )
ファイルからコンテンツを読み取るには、read 関数と readText 関数を使用します。
const buffer = await fs . read ( '/path/file.dat' )
const content = await Fs . readText ( '/path/file.txt' )
ファイルまたはディレクトリを削除するには、delete 関数を使用します。
await Fs . delete ( '/path/file.txt' )
ファイルまたはディレクトリの名前を変更するには、名前変更関数を使用します。
await Fs . writeText ( '/path/fileA.txt' , '...' )
await Fs . rename ( '/path/fileA.txt' , 'fileB.txt' )
コピー機能を使用して、ファイルまたはディレクトリをターゲット ディレクトリにコピーします。
await Fs . writeText ( '/path/fileA.txt' , '...' )
await Fs . copy ( '/path/fileA.txt' , '/backup' )
ファイルまたはディレクトリをターゲット ディレクトリに移動するには、move 関数を使用します。
await Fs . writeText ( '/path/fileA.txt' , '...' )
await Fs . move ( '/path/fileA.txt' , '/backup' )
ファイルおよびディレクトリのイベントを監視するには、watch 関数を使用します。
Fs . watch ( '/dir' , event => console . log ( event ) )
Smoke はコミュニティへの貢献を歓迎します。プル リクエストを送信する前に、未解決の問題を必ず送信してください。 Smoke プロジェクトは、新機能を受け入れる前に、オープンなコミュニティでの議論を好みます。