เรียกใช้เว็บเซิร์ฟเวอร์ในเว็บเบราว์เซอร์ผ่าน 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/smoke
Smoke คือเครือข่ายเบราว์เซอร์รุ่นทดลองและเฟรมเวิร์กการจัดเก็บข้อมูลที่ให้การจำลอง Http, Tcp และ WebSocket บน WebRTC และพื้นที่จัดเก็บไฟล์ขนาดใหญ่ผ่าน IndexedDB สร้างขึ้นเพื่อเป็นรากฐานสำหรับการพัฒนาบริการเว็บแบบเพียร์ทูเพียร์ในเบราว์เซอร์ โดยแต่ละเบราว์เซอร์สามารถเข้าถึงได้ผ่านเครือข่ายเสมือนที่ควบคุมโดยแอปพลิเคชัน
Smoke ปรับโฉม WebRTC ให้เป็นอินเทอร์เฟซที่เข้ากันได้กับ WinterCG ช่วยให้แอปพลิเคชันเว็บเซิร์ฟเวอร์แบบเดิมสามารถพกพาได้ระหว่างสภาพแวดล้อมเซิร์ฟเวอร์และเบราว์เซอร์ ได้รับการพัฒนาเพื่อรองรับสถาปัตยกรรมซอฟต์แวร์ทางเลือก โดยบริการที่เน้นผู้ใช้เป็นศูนย์กลางสามารถย้ายออกจากระบบคลาวด์และเรียกใช้เพียร์ทูเพียร์ในเบราว์เซอร์
ใบอนุญาตเอ็มไอที
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.
ฮับส่วนตัวเป็นการถ่ายทอดในหน่วยความจำที่ส่งต่อข้อความ WebRTC ICE ผ่าน BroadcastChannel API ของเบราว์เซอร์ ฮับส่วนตัวสามารถส่งต่อข้อความไปยังเพจและแท็บอื่นๆ ที่ทำงานภายในกระบวนการเบราว์เซอร์เดียวกันเท่านั้น เนื่องจากฮับส่วนตัวไม่สามารถอำนวยความสะดวกในการเชื่อมต่อที่ทำนอกเพจปัจจุบันได้ จึงถือว่าเป็นฮับส่วนตัว ฮับนี้เป็นค่าเริ่มต้น
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 รองรับ Http Listen และดึงข้อมูลผ่าน WebRTC นอกจากนี้ยังมีการจำลอง 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 ให้การจำลอง Tcp ผ่าน RTCDataChannel
const { Net } = new Network ( )
ใช้ฟังก์ชัน Listen เพื่อยอมรับซ็อกเก็ตขาเข้า
Net . listen ( { port : 5000 } , async socket => {
const data = await socket . read ( )
await socket . write ( data )
await socket . close ( )
} )
ใช้ฟังก์ชันเชื่อมต่อเพื่อสร้างการเชื่อมต่อเน็ตกับผู้ฟังระยะไกล
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 มีฟังก์ชันในการส่งและรับออบเจ็กต์ MediaStream ผ่าน WebRTC
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 ) )
} )
ใช้ฟังก์ชันส่งเพื่อส่ง 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' )
ใช้ฟังก์ชัน readdir เพื่อส่งคืนวัตถุสถิติสำหรับเส้นทางไดเรกทอรีที่กำหนด
const stats = await Fs . readdir ( '/media/videos' )
ใช้ฟังก์ชันหยดเพื่อส่งคืนวัตถุ 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' )
ใช้ฟังก์ชั่นอ่านและ 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' )
ใช้ฟังก์ชัน watch เพื่อดูเหตุการณ์ไฟล์และไดเร็กทอรี
Fs . watch ( '/dir' , event => console . log ( event ) )
Smoke เปิดให้มีส่วนร่วมกับชุมชน โปรดตรวจสอบให้แน่ใจว่าคุณได้ส่งปัญหาที่เปิดอยู่ก่อนที่จะส่งคำขอดึงของคุณ โครงการ Smoke ต้องการการอภิปรายในชุมชนแบบเปิดก่อนที่จะยอมรับคุณสมบัติใหม่