WebRTC를 통해 웹 브라우저에서 웹 서버 실행
Smoke를 사용하면 브라우저가 WebRTC를 통해 마이크로 웹 서버를 실행할 수 있습니다.
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/smokeSmoke는 WebRTC를 통해 Http, Tcp 및 WebSocket 에뮬레이션을 제공하고 IndexedDB를 통해 대용량 파일 저장소를 제공하는 실험적인 브라우저 네트워킹 및 저장소 프레임워크입니다. 이는 애플리케이션 제어 가상 네트워크를 통해 액세스할 수 있는 각 브라우저를 사용하여 브라우저에서 P2P 웹 서비스를 개발하기 위한 기반으로 구축되었습니다.
Smoke는 WebRTC를 WinterCG 호환 인터페이스로 재구성하여 기존 웹 서버 애플리케이션을 서버와 브라우저 환경 간에 이식할 수 있도록 합니다. 이는 사용자 중심 서비스를 클라우드에서 벗어나 브라우저에서 P2P로 실행할 수 있는 대체 소프트웨어 아키텍처를 지원하기 위해 개발되었습니다.
MIT 라이센스
Smoke 네트워킹 API는 네트워크 객체를 통해 제공됩니다. 네트워크 개체는 공유 신호 허브에 대한 활성 연결을 나타내며 동일한 허브에 연결된 다른 네트워크 개체와 통신하는 데 사용되는 Http, Net 및 미디어 기능을 노출합니다.
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 ( )원격 피어로부터 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' ) ) )원격 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 ( )들어오는 소켓을 받아들이려면 수신 기능을 사용하십시오.
Net . listen ( { port : 5000 } , async socket => {
const data = await socket . read ( )
await socket . write ( data )
await socket . close ( )
} )원격 수신기에 대한 Net 연결을 설정하려면 연결 기능을 사용하십시오.
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 ( )수신 기능을 사용하여 들어오는 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스트리밍 가능한 AudioSource를 생성하려면 오디오 함수를 사용하세요.
const audio = Media . audio ( { src : './audio.mp3' } )
const sender = Media . send ( { hostname : 'localhost' , port : 6000 } , audio . mediastream )스트리밍 가능한 VideoSource를 생성하려면 비디오 기능을 사용하십시오.
const video = Media . video ( { src : './video.mp4' } )
const sender = Media . send ( { hostname : 'localhost' , port : 6000 } , video . mediastream )패턴 기능을 사용하여 MediaStream 테스트 패턴을 생성합니다. 이 기능은 웹 카메라나 기타 미디어 소스 없이 라이브 미디어 스트리밍을 테스트하는 데 유용할 수 있습니다.
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' )경로가 존재하는지 확인하려면 존재 함수를 사용하십시오.
const exists = await Fs . exists ( '/path/file.txt' )mkdir 함수를 사용하여 디렉터리를 만듭니다.
await Fs . mkdir ( '/media/videos' )주어진 디렉토리 경로에 대한 stat 객체를 반환하려면 readdir 함수를 사용하십시오.
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' )파일이나 디렉터리를 삭제하려면 삭제 기능을 사용하세요.
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' )이동 기능을 사용하여 파일이나 디렉터리를 대상 디렉터리로 이동합니다.
await Fs . writeText ( '/path/fileA.txt' , '...' )
await Fs . move ( '/path/fileA.txt' , '/backup' )감시 기능을 사용하여 파일 및 디렉터리 이벤트를 감시합니다.
Fs . watch ( '/dir' , event => console . log ( event ) ) Smoke는 커뮤니티 기여에 열려 있습니다. 끌어오기 요청을 제출하기 전에 미해결 문제를 제출했는지 확인하세요. Smoke 프로젝트는 새로운 기능을 수용하기 전에 공개 커뮤니티 토론을 선호합니다.