Transcript
00:00:00यह है Wterm, जो Vasell द्वारा बनाया गया एक वेब-आधारित टर्मिनल एमुलेटर है
00:00:03जो कैनवास के बजाय सीधे DOM पर रेंडर होता है।
00:00:06तो टेक्स्ट सिलेक्शन, ब्राउज़र फाइंड,
00:00:08और स्क्रीन रीडर्स सभी इसके साथ आसानी से काम करते हैं।
00:00:10इसे Zig में लिखा गया है, जो 12 किलोबाइट की WASM बाइनरी में कंपाइल होता है,
00:00:14और इसमें LibGhosty द्वारा संचालित एक वैकल्पिक बैकएंड भी है,
00:00:17वही इंजन जो Ghosty टर्मिनल को पावर देता है,
00:00:19जो आपको ब्राउज़र में पूर्ण टर्मिनल संगतता देता है।
00:00:22लेकिन क्या 12 किलोबाइट की WASM बाइनरी
00:00:24वास्तव में एक नेटिव टर्मिनल एमुलेटर को बदलने के लिए पर्याप्त है?
00:00:28शायद नहीं, लेकिन सब्सक्राइब करें और चलिए पता लगाते हैं।
00:00:33तो वेब टर्मिनल लगभग हर जगह मौजूद हैं।
00:00:36GitHub Codespaces जैसे क्लाउड IDEs में,
00:00:39Portainer या Qualify जैसे इंफ्रास्ट्रक्चर टूल्स में,
00:00:41और यहाँ तक कि VS Code या Cursor जैसे डेस्कटॉप IDEs में भी।
00:00:44लेकिन वे सभी इसके लिए Xterm.js का उपयोग करते हैं
00:00:47क्योंकि यह लंबे समय से मौजूद है
00:00:49और यह मूलतः डिफॉल्ट है।
00:00:51हालाँकि, Xterm के साथ एक बड़ी समस्या है।
00:00:52यह एक कैनवास एलिमेंट पर रेंडर होता है।
00:00:54इसलिए टेक्स्ट सिलेक्ट करने जैसा कुछ करना
00:00:56या पेज में शब्दों को खोजना
00:00:58ये सब शुरू से फिर से लागू करना पड़ता है,
00:01:00जो हमेशा उतनी अच्छी तरह से काम नहीं करता है।
00:01:02Wterm पूरी तरह से अलग दृष्टिकोण अपनाता है
00:01:04DOM पर रेंडर करके,
00:01:05जिसका अर्थ है कि टर्मिनल आउटपुट सिर्फ HTML है,
00:01:08और ब्राउज़र मूल रूप से इसे मुफ्त में संभाल लेता है।
00:01:10लेकिन Wterm इस HTML रेंडरिंग के साथ
00:01:13कुछ बहुत ही बेहतरीन काम भी कर सकता है,
00:01:14जैसे केवल उस पंक्ति को फिर से रेंडर करना जो अपडेट हुई है,
00:01:17प्रत्येक फ्रेम पर पूरे टर्मिनल को फिर से रेंडर करने के बजाय।
00:01:20इसे विभिन्न फ्रेमवर्क्स में भी लिखा जा सकता है
00:01:22जैसे React या Vue।
00:01:23आप थीम बदल सकते हैं।
00:01:24और एक अलग Wterm ghosty पैकेज भी है,
00:01:27जो Zig कॉल को lib ghosty के साथ बदल देता है
00:01:29और आश्चर्यजनक रूप से बेहतर काम करता है
00:01:31दूसरे वेब ghosty प्रोजेक्ट की तुलना में,
00:01:33जिसके बारे में हम वीडियो में बाद में बात करेंगे।
00:01:35लेकिन अभी के लिए, चलिए Wterm को आज़माते हैं
00:01:37एक साधारण डेमो प्रोजेक्ट के साथ।
00:01:38तो React के साथ Wterm इंस्टॉल करने के बाद,
00:01:40मैंने CSS के साथ-साथ कंपोनेंट को भी इम्पोर्ट किया है,
00:01:43और मैं यहाँ कंपोनेंट रेंडर कर रहा हूँ।
00:01:45तो अब अगर मैं ऐप चलाता हूँ और फिर ब्राउज़र में जाता हूँ,
00:01:48तो मैं देख सकता हूँ कि वहाँ एक टर्मिनल है।
00:01:49लेकिन अगर मैं ls जैसा कोई कमांड दबाता हूँ,
00:01:51तो हम देख सकते हैं कि कुछ नहीं होता।
00:01:52और ऐसा इसलिए है क्योंकि यह जानकारी पढ़ने के लिए
00:01:53किसी दूसरे कंप्यूटर से कनेक्टेड नहीं है।
00:01:56मुझे समझाने दें।
00:01:57तो अभी क्लाइंट एक बैकएंड से कनेक्टेड नहीं है,
00:01:59इसलिए इसके पास जानकारी प्राप्त करने के लिए कहीं और नहीं है।
00:02:01लेकिन हमें इसे दूसरी मशीन से कनेक्ट करना होगा।
00:02:04तो यह मेरी स्थानीय मशीन हो सकती है
00:02:06या क्लाउड पर कोई मशीन,
00:02:07और फिर उस मशीन के अंदर एक नकली टर्मिनल या स्यूडो टर्मिनल रेंडर करें
00:02:10उसी आयामों के साथ जो क्लाइंट वाले टर्मिनल के हैं।
00:02:13तो अगर हम कुछ कीस्ट्रोक्स करते हैं,
00:02:14तो वह कीस्ट्रोक जानकारी दूसरी मशीन पर भेजी जाती है,
00:02:16जो उन कीस्ट्रोक्स को निष्पादित करती है,
00:02:18परिणाम रेंडर करती है,
00:02:20और वह सारी जानकारी क्लाइंट को वापस भेज देती है।
00:02:22और वह आदान-प्रदान बहुत जल्दी,
00:02:23न्यूनतम देरी के साथ होना चाहिए।
00:02:25तो क्लाइंट और दूसरी मशीन को एक साथ जोड़ने का
00:02:26सबसे अच्छा तरीका है WebSockets का उपयोग करना।
00:02:28तो चलिए आगे बढ़ते हैं और ऐसा करते हैं।
00:02:30तो हम Ubuntu वाले सर्वर में HETS का उपयोग कर सकते हैं,
00:02:31जिसे मैंने पहले ही सेटअप कर लिया है
00:02:32Node इंस्टॉल करके।
00:02:34और मेरे पास पहले से ही एक Wterm सर्वर है
00:02:35सर्वर स्क्रिप्ट के साथ।
00:02:37तो अगर हम उसे देखें,
00:02:38तो हम देख सकते हैं कि हम स्लैश API टर्मिनल पथ पर
00:02:40एक WebSocket सर्वर बना रहे हैं।
00:02:42यह थोड़ा बाद में बेहतर समझ आएगा।
00:02:43और यहाँ नीचे,
00:02:45हम एक स्यूडो टर्मिनल स्पॉन कर रहे हैं
00:02:48एक ऐसे नाम के साथ जो हमारे टर्मिनल प्रकार से मेल खाता है।
00:02:49अगर आप उत्सुक हैं तो यहाँ से आप अपना ढूंढ सकते हैं।
00:02:49और यहाँ नीचे,
00:02:51हम क्लाइंट से कोई भी कीस्ट्रोक प्राप्त कर रहे हैं,
00:02:53सर्वर पर इसे प्रोसेस कर रहे हैं,
00:02:55हमारे नकली टर्मिनल के अंदर,
00:02:56और फिर उस जानकारी को यहाँ क्लाइंट को लौटा रहे हैं।
00:02:58तो सर्वर सब कुछ लौटाता है
00:02:59न कि केवल उस विशिष्ट पंक्ति को जो अपडेट हुई है।
00:03:01अब क्लाइंट साइड पर app.tsx फाइल में,
00:03:02हम स्लैश API स्लैश टर्मिनल पोर्ट पर
00:03:03अपने सर्वर से एक WebSocket कनेक्शन बना रहे हैं।
00:03:05फिर हम स्वचालित रिकनेक्ट के साथ उस URL से कनेक्ट करने के लिए
00:03:07Wterm से WebSocket ट्रांसफॉर्म का उपयोग कर रहे हैं।
00:03:10और यह वही है जो यहाँ से सर्वर को
00:03:11कीस्ट्रोक जानकारी भेजता है।
00:03:14हम यहाँ ब्राउज़र रिसाइज को संभालते हैं,
00:03:16और फिर यहाँ नीचे,
00:03:19हैंडल डेटा फंक्शन सर्वर से आने वाली
00:03:21सारी जानकारी को संभालता है।
00:03:23और ZIG कोर के बारे में अच्छी बात यह है कि
00:03:24यह इस जानकारी को पास करेगा,
00:03:26पता लगाएगा कि क्या बदल गया है,
00:03:27और केवल HTML के उस हिस्से को फिर से रेंडर करेगा।
00:03:28यहाँ नीचे, कॉलम और रो का आकार
00:03:30वही होना चाहिए जो हमारे पास सर्वर पर था,
00:03:31और बाकी सब कुछ काफी स्पष्ट है।
00:03:33तो अब जब क्लाइंट और सर्वर चल रहे हैं,
00:03:35ब्राउज़र में वापस, अगर मैं LS दबाता हूँ,
00:03:36तो हम देख सकते हैं कि यह उपलब्ध फाइलों की सूची देता है।
00:03:39तो मैं फाइलों के बारे में अधिक जानकारी देखने के लिए
00:03:41L फ्लैग के साथ LS दबा सकता हूँ।
00:03:42मैं किसी फाइल में CD कर सकता हूँ,
00:03:45उसके अंदर की जानकारी पर एक नज़र डाल सकता हूँ,
00:03:47और चल रहे कंटेनरों की सूची देखने जैसे काम भी कर सकता हूँ।
00:03:49मैं Vim के साथ एक फाइल भी खोल सकता हूँ
00:03:52और उसके माध्यम से नेविगेट कर सकता हूँ।
00:03:53लेकिन भले ही वह सब काम करता है,
00:03:55यह बहुत अच्छी तरह से नहीं करता है।
00:03:57मेरा मतलब है, अगर हम कुछ टेक्स्ट को हाइलाइट करने की कोशिश करें,
00:03:59तो हम देख सकते हैं कि कुछ अक्षर
00:04:01पूरी तरह से अपठनीय हैं।
00:04:02तो उसे ठीक करने के लिए,
00:04:03हम Ghosty कोर को लोड करके
00:04:04और उसे React में प्रोप के रूप में जोड़कर
00:04:06Wterm को Ghosty के साथ सेटअप कर सकते हैं।
00:04:07आप देख सकते हैं कि यदि हम सर्वर फाइल खोलते हैं
00:04:09और कुछ टेक्स्ट को हाइलाइट करते हैं,
00:04:10तो सब कुछ बहुत अधिक पठनीय है।
00:04:12यह ओपन कोड को सही ढंग से रेंडर करना,
00:04:13मॉडल बदलने की अनुमति देना,
00:04:15और इमोजी सपोर्ट के साथ प्रॉम्प्ट देना जैसे काम भी कर सकता है।
00:04:16हम यह भी देख सकते हैं कि Ghosty रंगों को
00:04:18डिफ़ॉल्ट Wterm कोर रेंडरर की तुलना में
00:04:20थोड़ा बेहतर तरीके से रेंडर करता है।
00:04:22लेकिन Zig कोर केवल 12 किलोबाइट का है,
00:04:23जबकि Ghosty का आकार 400 किलोबाइट है।
00:04:24तो अगर आप साइज की परवाह करते हैं,
00:04:26तो शायद Zig कोर के साथ ही बने रहें।
00:04:27खैर, यह Vercel के Wterm का एक त्वरित अवलोकन है।
00:04:29बेशक, ऐसी बहुत सी और विशेषताएं हैं
00:04:31जिनके बारे में मैंने नहीं बताया,
00:04:31जैसे Markdown को एक अच्छे टर्मिनल आउटपुट में बदलना,
00:04:34अगर आपके पास बैकएंड का एक्सेस नहीं है तो नकली फाइलों
00:04:36जबकि Ghosty के 400 किलोबाइट की तुलना में।
00:04:39और यहाँ तक कि ब्राउज़र में एक टर्मिनल के माध्यम से
00:04:40SSH क्लाइंट कैसे सेटअप करें इसके उदाहरण भी हैं।
00:04:43लेकिन मुझे Wterm एकदम सही नहीं लगा।
00:04:46Ghosty वर्जन का उपयोग करते समय
00:04:48कुछ रेंडरिंग समस्याएं थीं,
00:04:49NeoVim या यहाँ तक कि OpenCode के बीच
00:04:51आगे-पीछे जाने में।
00:04:52और Ghosty रेंडरर को अपने BUN फ्रंटएंड के साथ
00:04:55काम करने के लिए,
00:04:57मुझे WASM फाइल को इम्पोर्ट करना पड़ा
00:04:58क्योंकि BUN Node मॉड्यूल फोल्डर से
00:05:00किसी भी गैर-JS फाइल को कॉपी नहीं करता था।
00:05:02लेकिन मुझे DOM रेंडरिंग दृष्टिकोण पसंद है,
00:05:05जिसका मतलब है कि आपको बिना किसी अतिरिक्त मेहनत के
00:05:06एक्सेसिबिलिटी और नेटिव ब्राउज़र फीचर्स मिलते हैं,
00:05:08NeoVim के बीच इधर-उधर जाते हुए
00:05:10या फिर OpenCode के साथ।
00:05:11लेकिन Xterm.js का एक विशाल इकोसिस्टम है
00:05:13और यह बैटल-टेस्टेड समाधान है,
00:05:15इसलिए यदि आप इसे चुनते हैं तो आप गलत नहीं होंगे।
00:05:17Coda द्वारा GhostyWeb भी है,
00:05:19जो एक अलग दृष्टिकोण अपनाता है।
00:05:21यह उसी libGhosty इंजन का उपयोग करता है
00:05:23जिसका उपयोग वास्तविक Ghosty टर्मिनल द्वारा किया जाता है,
00:05:25लेकिन यह Xterm के लिए एक ड्रॉप-इन प्रतिस्थापन है,
00:05:27इसलिए यह अभी भी कैनवास रेंडरिंग दृष्टिकोण का उपयोग करता है
00:05:29और उसी API का उपयोग करता है,
00:05:31लेकिन आपको एक बेहतर टर्मिनल मिलता है।
00:05:33लेकिन Xterm.js का इकोसिस्टम बहुत बड़ा है
00:05:35और यह एक आजमाया हुआ समाधान है,
00:05:38इसलिए यदि आप इसे चुनते हैं तो आप गलत नहीं होंगे।
00:05:40Coda द्वारा GhostyWeb भी है,
00:05:42जो एक अलग तरीका अपनाता है।
00:05:43यह उसी libGhosty इंजन का उपयोग करता है
00:05:45जो वास्तविक Ghosty टर्मिनल में इस्तेमाल होता है,
00:05:48लेकिन यह Xterm का सीधा रिप्लेसमेंट है,
00:05:50इसलिए यह अभी भी कैनवस रेंडरिंग अप्रोच का उपयोग करता है
00:05:52और उसी API का उपयोग करता है,
00:05:54लेकिन आपको एक बेहतर टर्मिनल मिलता है।
Community Posts
No posts yet. Be the first to write about this video!
Write about this video