WebAssembly के लिए धन्यवाद, आप गो पर फ्रंटेंड लिख सकते हैं

मूल लेख।

फरवरी 2017 में, ब्रैड फिट्ज़पैट्रिक टीम के एक सदस्य ने भाषा में WebAssembly समर्थन बनाने का प्रस्ताव दिया। चार महीने बाद, नवंबर 2017 में, गोफरजेएस लेखक रिचर्ड मुजियोल ने विचार को लागू करना शुरू किया। और अंत में, पूर्ण कार्यान्वयन मास्टर में पाया गया था। अगस्त 2018 के आसपास डेवलपर्स को गो संस्करण 1.11 प्राप्त होगा। नतीजतन, मानक पुस्तकालय लगभग सभी तकनीकी कठिनाइयों को अपने साथ परिचित करने और आयात करने वाले कार्यों के लिए लेता है यदि आपने पहले से ही मी में सी संकलन करने की कोशिश की है। यह आशाजनक लगता है। आइए देखें कि पहले संस्करण के साथ क्या किया जा सकता है।



इस लेख के सभी उदाहरण डॉक कंटेनर से लॉन्च किए जा सकते हैं जो लेखक के भंडार में हैं :

docker container run -dP nlepage/golang_wasm:examples # Find out which host port is used docker container ls 

फिर लोकलहोस्ट पर जाएं : 32XXX /, और एक लिंक से दूसरे लिंक पर जाएं।

हाय वासम!

मूल "हैलो वर्ल्ड" और अवधारणा का निर्माण पहले से ही काफी अच्छी तरह से प्रलेखित है (यहां तक कि रूसी में भी), तो चलिए बस और अधिक सूक्ष्म चीजों पर चलते हैं।

सबसे आवश्यक है गो का एक ताज़ा संकलित संस्करण जो कि मीसम का समर्थन करता है। मैं कदम से कदम का वर्णन नहीं करूंगा स्थापना , बस पता है कि क्या जरूरत है पहले से ही मास्टर में है।

यदि आप इस बारे में चिंता नहीं करना चाहते हैं, तो डॉकरीफाइल सी गो , गितुब पर गोलब-वास रिपॉजिटरी में उपलब्ध है, या आप nlepage / golang_wasm से एक छवि भी तेजी से ले सकते हैं।

अब आप पारंपरिक helloworld.go लिख सकते हैं और इसे निम्नलिखित कमांड के साथ संकलित कर सकते हैं:

 GOOS=js GOARCH=wasm go build -o test.wasm helioworld.go 

GOOS और GOARCH पर्यावरण चर पहले से ही nlepage / golang_wasm छवि में सेट किए गए हैं, इसलिए आप संकलन करने के लिए इस तरह एक Dockerfile फ़ाइल का उपयोग कर सकते हैं:

 FROM nlepage/golang_wasm COPY helloworld.go /go/src/hello/ RUN go build -o test.wasm hello 

अंतिम चरण wasm_exec.html और wasm_exec.js फ़ाइलों का उपयोग misc/wasm या गोकर छवि nlepage / golang_wasm में /usr/local/go/misc/wasm/ में test.wasm में उपलब्ध है। test.wasm चलाने के लिए। ब्राउज़र (wasm_exec.js द्विआधारी फ़ाइल test.wasm की अपेक्षा करता है, इसलिए हम इस नाम का उपयोग करते हैं)।
आपको बस nginx का उपयोग करके 3 स्थिर फाइलें देने की आवश्यकता है, उदाहरण के लिए, तब wasm_exec.html "रन" बटन प्रदर्शित करेगा (यह केवल तभी test.wasm होगा जब test.wasm सही ढंग test.wasm लोड किया गया है)।

यह उल्लेखनीय है कि MIME प्रकार के application/wasm साथ test.wasm को परोसा जाना चाहिए, अन्यथा ब्राउज़र इसे निष्पादित करने से इंकार कर देगा। (उदा। nginx को एक अपडेट किए गए mime.types फ़ाइल की आवश्यकता है)।

आप nlepage / golang_wasm से nginx छवि का उपयोग कर सकते हैं, जिसमें पहले से ही निश्चित MIME प्रकार, wasm_exec.html और wasm_exec.js कोड> / usr / शेयर / nginx / html / निर्देशिका शामिल हैं।

अब "रन" बटन पर क्लिक करें, फिर अपना ब्राउज़र कंसोल खोलें और आप कंसोल देखेंगे। ग्रीटिंग ग्रीटिंग ("हैलो वासो" "))।


एक पूरा उदाहरण यहां उपलब्ध है ।

गो से जेएस को बुलाओ

अब जब हमने गो से संकलित पहला WebAssembly बाइनरी सफलतापूर्वक लॉन्च किया है, तो आइए प्रदान की गई सुविधाओं पर एक करीब से नज़र डालें।

नए syscall / js पैकेज को मानक लाइब्रेरी में जोड़ा गया है। मुख्य फ़ाइल, js.go पर विचार करें।
एक नया js.Value प्रकार js.Value जो जावास्क्रिप्ट मूल्य का प्रतिनिधित्व करता है।

यह जावास्क्रिप्ट चर के प्रबंधन के लिए एक सरल एपीआई प्रदान करता है:

• js.Value.Get() और js.Value.Set() लौटें और ऑब्जेक्ट के फ़ील्ड मान सेट करें।
• js.Value.Index() और js.Value.SetIndex() ऑब्जेक्ट को रीड एंड राइट इंडेक्स द्वारा एक्सेस करते हैं।
• js.Value.Call() ऑब्जेक्ट विधि को एक फ़ंक्शन के रूप में बुलाता है।
• js.Value.Invoke() ऑब्जेक्ट को फंक्शन के रूप में कहता है।
• js.Value.New() नए ऑपरेटर को कॉल करता है और एक निर्माता के रूप में अपने स्वयं के ज्ञान का उपयोग करता है।
• उदाहरण के लिए, js.Value.Int() या js.Value.Bool() उदाहरण के लिए, इसी गो प्रकार में जावास्क्रिप्ट मान प्राप्त करने के लिए कुछ और तरीके।

और अतिरिक्त दिलचस्प तरीके:

• js.Undefined() js.Value को संबंधित undefined ।
• js.Null() js.Value संबंधित null ।
• js.Global() js.Value को वैश्विक दायरे में पहुंच प्रदान करेगा।
• js.ValueOf() आदिम जाओ प्रकारों को स्वीकार करता है और सही js.Value

Os.StdOut में संदेश प्रदर्शित करने के बजाय, आइए इसे window.alert() का उपयोग करके सूचना विंडो में प्रदर्शित करें।

चूंकि हम ब्राउज़र में हैं, वैश्विक स्कोप एक विंडो है, इसलिए सबसे पहले आपको वैश्विक स्कोप से अलर्ट () प्राप्त करने की आवश्यकता है:

 alert := js.Global().Get("alert") 

अब हमारे पास js.Value के रूप में एक alert वेरिएबल है, जो window.alert JS का संदर्भ है, और आप js.Value.Invoke() माध्यम से कॉल करने के लिए फ़ंक्शन का उपयोग कर सकते हैं।

 alert.Invoke("Hello wasm!") 

जैसा कि आप देख सकते हैं, इनवॉइस करने के लिए तर्कों को पारित करने से पहले js.ValueOf () को कॉल करने की कोई आवश्यकता नहीं है, यह एक मनमानी राशि लेता interface{} और वैल्यूऑफ के माध्यम से ही मानों को पास करता है।

अब हमारे नए कार्यक्रम को इस तरह देखना चाहिए:

 package main import ( "syscall/js" ) func main() { alert := js.Global().Get("alert") alert.Invoke("Hello Wasm!") } 

जैसा कि पहले उदाहरण में, आपको सिर्फ test.wasm नामक एक फ़ाइल बनाने की आवश्यकता है, और wasm_exec.html और wasm_exec.js को छोड़ दें wasm_exec.js कि यह था।
अब, जब हम "रन" बटन पर क्लिक करते हैं, तो एक अलर्ट विंडो हमारे संदेश के साथ दिखाई देती है।

examples/js-call फ़ोल्डर में एक कार्यशील उदाहरण है।

जेएस से कॉल जाओ।

जेएस को गो से कॉल करना बहुत सरल है, चलो syscall/js पैकेज पर करीब से नज़र डालें, देखने के लिए दूसरी फ़ाइल callback.go ।

• js.Callback फ़ंक्शन में उपयोग के लिए गो फ़ंक्शन के लिए js.Callback आवरण प्रकार।
• js.NewCallback() फ़ंक्शन है जो js.NewCallback() फ़ंक्शन लेता है ( js.Value एक स्लाइस को स्वीकार करता है और कुछ भी नहीं लौटाता है), और js.Callback लौटाता है।
• सक्रिय कॉलबैक और js.Callback.Release() के प्रबंधन के लिए कुछ मैकेनिक, जिन्हें कॉलबैक को नष्ट करने के लिए बुलाया जाना चाहिए।
• js.NewEventCallback() समान है, लेकिन लिपटे फ़ंक्शन केवल 1 तर्क - एक घटना को स्वीकार करता है।

आइए कुछ सरल करने की कोशिश करें: JS fmt.Println() को JS साइड से fmt.Println() ।

हम इसे कॉल करने के लिए Go से कॉलबैक प्राप्त करने में सक्षम होने के लिए wasm_exec.html कुछ परिवर्तन करेंगे।

 async function run() { console.clear(); await go.run(inst); inst = await WebAssembly.instantiate(mod, go.ImportObject); //   } 

यह ततैया बाइनरी को लॉन्च करती है और इसके पूरा होने का इंतजार करती है, फिर अगले रन के लिए इसे फिर से संगठित करती है।

आइए एक नया फ़ंक्शन जोड़ें, जो गो कॉलबैक को बचाएगा और पूरा होने पर Promise की स्थिति को बदल देगा:

 let printMessage // Our reference to the Go callback let printMessageReceived // Our promise let resolvePrintMessageReceived // Our promise resolver function setPrintMessage(callback) { printMessage = callback resolvePrintMessageReceived() } 

अब कॉलबैक का उपयोग करने के लिए run() फ़ंक्शन को अनुकूलित करें:

 async function run() { console.clear() // Create the Promise and store its resolve function printMessageReceived = new Promise(resolve => { resolvePrintMessageReceived = resolve }) const run = go.run(inst) // Start the wasm binary await printMessageReceived // Wait for the callback reception printMessage('Hello Wasm!') // Invoke the callback await run // Wait for the binary to terminate inst = await WebAssembly.instantiate(mod, go.importObject) // reset instance } 

और यह JS की तरफ है!

अब, गो भाग में, आपको कॉलबैक बनाने की आवश्यकता है, इसे जेएस पक्ष को भेजें और फ़ंक्शन की आवश्यकता होने तक प्रतीक्षा करें।

  var done = make(chan struct{}) 

फिर उन्हें वास्तविक फ़ंक्शन printMessage() लिखना चाहिए:

 func printMessage(args []js.Value) { message := args[0].Strlng() fmt.Println(message) done <- struct{}{} // Notify printMessage has been called } 

तर्क स्लाइस []js.Value माध्यम से पारित किए जाते हैं, इसलिए आपको गो लाइन में संदेश प्राप्त करने के लिए पहले स्लाइस तत्व पर js.Value.String() कॉल करने की आवश्यकता है।
अब हम इस फ़ंक्शन को कॉलबैक में लपेट सकते हैं:

 callback := js.NewCallback(printMessage) defer callback.Release() // to defer the callback releasing is a good practice 

फिर जेएस फ़ंक्शन setPrintMessage() कॉल setPrintMessage() , जैसे कॉलिंग setPrintMessage() window.alert() :

 setPrintMessage := js.Global.Get("setPrintMessage") setPrintMessage.Invoke(callback) 

मुख्य बात यह है कि कॉलबैक का इंतजार मुख्य रूप से किया जाना है:

 <-done 

यह अंतिम भाग महत्वपूर्ण है क्योंकि कॉलबैक को एक समर्पित गोरआउट में निष्पादित किया जाता है, और मुख्य गोरआउट को कॉलबैक के लिए प्रतीक्षा करनी चाहिए, अन्यथा समय से पहले wasm बाइनरी को रोक दिया जाएगा।

परिणामी Go प्रोग्राम इस तरह दिखना चाहिए:

 package main import ( "fmt" "syscall/js" ) var done = make(chan struct{}) func main() { callback := js.NewCallback(prtntMessage) defer callback.Release() setPrintMessage := js.Global().Get("setPrintMessage") setPrIntMessage.Invoke(callback) <-done } func printMessage(args []js.Value) { message := args[0].Strlng() fmt.PrintIn(message) done <- struct{}{} } 

पिछले उदाहरणों की तरह, test.wasm नामक फ़ाइल test.wasm । हमें अपने संस्करण के साथ wasm_exec.html को बदलना wasm_exec.html , और wasm_exec.js पुन: उपयोग wasm_exec.js सकते हैं।

अब, जब आप "रन" बटन दबाते हैं, तो हमारे पहले उदाहरण में, संदेश ब्राउज़र कंसोल में मुद्रित होता है, लेकिन इस बार यह बहुत बेहतर है! (और कठिन।)

डॉक फ़ाइल बोली में एक कार्यशील उदाहरण examples/go-call फ़ोल्डर में उपलब्ध है।

लंबा काम

जेएस से कॉलिंग जेएस से कॉल करने की तुलना में थोड़ा अधिक बोझिल है, खासकर जेएस की तरफ से।

यह मुख्य रूप से इस तथ्य के कारण है कि आपको गो कॉलबैक का परिणाम जेएस की ओर से पारित होने तक इंतजार करना होगा।

आइए कुछ और प्रयास करें: क्यों नहीं, मैं wasm बाइनरी को व्यवस्थित करता हूं, जो कॉलबैक कॉल के तुरंत बाद समाप्त नहीं होगा, लेकिन इन कॉलों को काम करना और स्वीकार करना जारी रखेगा।
इस बार, आइए गो पक्ष से शुरू करते हैं, और हमारे पिछले उदाहरण के रूप में, हमें कॉलबैक बनाने और इसे जेएस पक्ष को भेजने की आवश्यकता है।

फ़ंक्शन को कितनी बार कॉल किया गया है, यह ट्रैक करने के लिए कॉल काउंटर जोड़ें।

हमारा नया फ़ंक्शन printMessage() प्राप्त संदेश और काउंटर मूल्य को प्रिंट करेगा:

 var no int func printMessage(args []js.Value) { message := args[0].String() no++ fmt.Printf("Message no %d: %s\n", no, message) } 

कॉलबैक बनाना और इसे JS साइड में भेजना पिछले उदाहरण के समान है:

 callback := js.NewCallback(printMessage) defer callback.Release() setPrintMessage := js.Global().Get("setPrintMessage") setPrIntMessage.Invoke(callback) 

लेकिन इस बार हमारे पास मुख्य गोरोइन की समाप्ति के बारे में सूचित करने के लिए कोई चैनल नहीं done । एक तरीका यह हो सकता है कि मुख्य गोरोइन को स्थायी रूप से खाली select{} :

 select{} 

यह संतोषजनक नहीं है, जब तक कि ब्राउज़र टैब बंद नहीं हो जाता, तब तक हमारे बाइनरी वाश मेमोरी में लटका रहेगा।

आप पृष्ठ पर पहले के beforeunload होने वाले ईवेंट को सुन सकते हैं, आपको ईवेंट को प्राप्त करने और चैनल के माध्यम से मुख्य गोरोइन को सूचित करने के लिए दूसरे कॉलबैक की आवश्यकता होगी:

 var beforeUnloadCh = make(chan struct{}) 

इस बार, नया पहले beforeUnload() फ़ंक्शन केवल ईवेंट को स्वीकार करेगा, एक एकल js.Value तर्क के रूप में:

 func beforeUnload(event js.Value) { beforeUnloadCh <- struct{}{} } 

फिर इसे js.NewEventCallback() का उपयोग करके कॉलबैक में लपेटें और इसे JS साइड पर रजिस्टर करें:

 beforeUnloadCb := js.NewEventCallback(0, beforeUnload) defer beforeUnloadCb.Release() addEventLtstener := js.Global().Get("addEventListener") addEventListener.Invoke("beforeunload", beforeUnloadCb) 

अंत में, पहले beforeUnloadCh चैनल से पढ़ने के साथ खाली ब्लॉकिंग select को beforeUnloadCh :

 <-beforeUnloadCh fmt.Prtntln("Bye Wasm!") 

अंतिम कार्यक्रम इस तरह दिखता है:

 package main import ( "fmt" "syscall/js" ) var ( no int beforeUnloadCh = make(chan struct{}) ) func main() { callback := js.NewCallback(printMessage) defer callback.Release() setPrintMessage := js.Global().Get("setPrintMessage") setPrIntMessage.Invoke(callback) beforeUnloadCb := js.NewEventCallback(0, beforeUnload) defer beforeUnloadCb.Release() addEventLtstener := js.Global().Get("addEventListener") addEventListener.Invoke("beforeunload", beforeUnloadCb) <-beforeUnloadCh fmt.Prtntln("Bye Wasm!") } func printMessage(args []js.Value) { message := args[0].String() no++ fmt.Prtntf("Message no %d: %s\n", no, message) } func beforeUnload(event js.Value) { beforeUnloadCh <- struct{}{} } 

पहले, जेएस की ओर से, wasm बाइनरी का डाउनलोड इस तरह दिखता था:

 const go = new Go() let mod, inst WebAssembly .instantiateStreaming(fetch("test.wasm"), go.importObject) .then((result) => { mod = result.module inst = result.Instance document.getElementById("runButton").disabled = false }) 

चलो लोड करने के तुरंत बाद बाइनरी को चलाने के लिए इसे अनुकूलित करें:

 (async function() { const go = new Go() const { instance } = await WebAssembly.instantiateStreaming( fetch("test.wasm"), go.importObject ) go.run(instance) })() 

और “रन” बटन को एक मैसेज फील्ड और एक बटन printMessage() करने के लिए कॉल करें।

 <input id="messageInput" type="text" value="Hello Wasm!"> <button onClick="printMessage(document.querySelector('#messagelnput').value);" id="prtntMessageButton" disabled> Print message </button> 

अंत में, setPrintMessage() फ़ंक्शन, जो कॉलबैक स्वीकार करता है और संग्रहीत करता है, सरल होना चाहिए:

 let printMessage; function setPrintMessage(callback) { printMessage = callback; document.querySelector('#printMessageButton').disabled = false; } 

अब, जब हम "प्रिंट संदेश" बटन पर क्लिक करते हैं, तो आपको हमारी पसंद का एक संदेश और ब्राउज़र कंसोल में मुद्रित कॉल काउंटर देखना चाहिए।
यदि हम ब्राउज़र कंसोल के प्रिजर्व लॉग बॉक्स को चेक करते हैं और पेज को रिफ्रेश करते हैं, तो हम "बाय वासम" संदेश देखेंगे।



स्रोत जीथब पर examples/long-running फ़ोल्डर में उपलब्ध हैं।

और फिर?

जैसा कि आप देख सकते हैं, सीखा syscall/js API अपना काम करता है और आपको कुछ कोड के साथ जटिल चीजें लिखने की अनुमति देता है। यदि आप एक सरल विधि जानते हैं तो आप लेखक को लिख सकते हैं।
वर्तमान में गो कॉलबैक से सीधे जेएस का मूल्य वापस करना संभव नहीं है।
ध्यान रखें कि सभी कॉलबैक एक ही गोरआउट में किए जाते हैं, इसलिए यदि आप कॉलबैक में कुछ ब्लॉकिंग ऑपरेशन करते हैं, तो एक नया गोरआउट बनाना न भूलें, अन्यथा आप अन्य सभी कॉलबैक के निष्पादन को रोक देंगे।
सभी मूल भाषा सुविधाएँ पहले से ही उपलब्ध हैं, जिसमें सम्‍मिलित है अभी के लिए, सभी गोरआउट एक धागे में काम करेंगे, लेकिन भविष्य में यह बदल जाएगा ।
हमारे उदाहरणों में, हमने मानक लाइब्रेरी से केवल fmt पैकेज का उपयोग किया, लेकिन वह सब कुछ उपलब्ध है जो सैंडबॉक्स से भागने की कोशिश नहीं करता है।

फ़ाइल सिस्टम को Node.js. के माध्यम से समर्थित किया गया लगता है

अंत में, प्रदर्शन के बारे में क्या? यह देखने के लिए कुछ परीक्षण चलाना दिलचस्प होगा कि गो को शुद्ध शुद्ध जेएस कोड के साथ तुलना कैसे की जाती है। किसी ने hajimehoshi का मापन किया कि विभिन्न वातावरण पूर्णांक के साथ कैसे काम करते हैं, लेकिन तकनीक बहुत स्पष्ट नहीं है।



यह मत भूलो कि गो 1.11 को अभी तक आधिकारिक रूप से जारी नहीं किया गया है। मेरी राय में यह प्रायोगिक तकनीक के लिए बहुत अच्छा है। जो लोग प्रदर्शन परीक्षणों में रुचि रखते हैं, वे अपने ब्राउज़र को पीड़ा दे सकते हैं ।
मुख्य नोट्स, जैसा कि लेखक नोट करता है, सर्वर से मौजूदा गो कोड के क्लाइंट में स्थानांतरण है। लेकिन नए मानकों के साथ, आप पूरी तरह से ऑफ़लाइन एप्लिकेशन बना सकते हैं, और wasm कोड संकलित रूप में सहेजा जाता है। आप कई उपयोगिताओं को वेब पर स्थानांतरित कर सकते हैं, सहमत हैं, आसानी से?