WebSocketStream: WebSocket API-এর সাথে স্ট্রীমকে একীভূত করা, WebSocketStream: WebSocket API-এর সাথে স্ট্রিমগুলিকে একীভূত করা

ব্যাকপ্রেসার প্রয়োগ করে আপনার অ্যাপটিকে ওয়েবসকেট বার্তায় ডুবে যাওয়া বা ওয়েবসকেট সার্ভারকে বার্তায় প্লাবিত হওয়া থেকে বিরত রাখুন।

টমাস স্টেইনার

পটভূমি

ওয়েবসকেট এপিআই ওয়েবসকেট প্রোটোকলে একটি জাভাস্ক্রিপ্ট ইন্টারফেস প্রদান করে, যা ব্যবহারকারীর ব্রাউজার এবং সার্ভারের মধ্যে একটি দ্বি-মুখী ইন্টারেক্টিভ যোগাযোগ সেশন খোলা সম্ভব করে তোলে। এই এপিআই ব্যবহার করে, আপনি সার্ভারে বার্তা পাঠাতে পারেন এবং সার্ভারকে উত্তরের জন্য ভোট না দিয়েই ইভেন্ট-চালিত প্রতিক্রিয়া গ্রহণ করতে পারেন।

স্ট্রিমস এপিআই

স্ট্রিমস এপিআই জাভাস্ক্রিপ্টকে নেটওয়ার্কের মাধ্যমে প্রাপ্ত ডেটা খণ্ডগুলির স্ট্রিমগুলিকে প্রোগ্রাম্যাটিকভাবে অ্যাক্সেস করতে এবং পছন্দসইভাবে প্রক্রিয়া করার অনুমতি দেয়। স্ট্রিমগুলির প্রসঙ্গে একটি গুরুত্বপূর্ণ ধারণা হল ব্যাকপ্রেসার । এটি এমন একটি প্রক্রিয়া যার মাধ্যমে একটি একক স্ট্রিম বা একটি পাইপ চেইন পড়ার বা লেখার গতি নিয়ন্ত্রণ করে। যখন স্ট্রিম নিজেই বা পাইপ চেইনের পরবর্তী কোনও স্ট্রিম এখনও ব্যস্ত থাকে এবং আরও খণ্ড গ্রহণ করতে প্রস্তুত না হয়, তখন এটি যথাযথভাবে ডেলিভারি ধীর করার জন্য চেইনের মাধ্যমে পিছনের দিকে একটি সংকেত পাঠায়।

বর্তমান ওয়েবসকেট এপিআই-এর সমস্যা

প্রাপ্ত বার্তাগুলিতে ব্যাকপ্রেসার প্রয়োগ করা অসম্ভব

বর্তমান WebSocket API-এর মাধ্যমে, কোনও বার্তার প্রতিক্রিয়া WebSocket.onmessage এ ঘটে, সার্ভার থেকে কোনও বার্তা পাওয়ার সময় একটি EventHandler কল করা হয়।

ধরুন আপনার কাছে এমন একটি অ্যাপ্লিকেশন আছে যা নতুন বার্তা পাওয়ার সাথে সাথে ভারী ডেটা ক্রাঞ্চিং অপারেশন করতে হয়। আপনি সম্ভবত নীচের কোডের মতো ফ্লো সেট আপ করবেন, এবং যেহেতু আপনি process() কলের ফলাফলের জন্য await , আপনার ভালো হওয়া উচিত, তাই না?

// A heavy data crunching operation.
const process = async (data) => {
  return new Promise((resolve) => {
    window.setTimeout(() => {
      console.log('WebSocket message processed:', data);
      return resolve('done');
    }, 1000);
  });
};

webSocket.onmessage = async (event) => {
  const data = event.data;
  // Await the result of the processing step in the message handler.
  await process(data);
};

ভুল! বর্তমান WebSocket API-এর সমস্যা হল ব্যাকপ্রেসার প্রয়োগ করার কোনও উপায় নেই। যখন বার্তাগুলি process() পদ্ধতির চেয়ে দ্রুত পৌঁছায়, তখন রেন্ডার প্রক্রিয়াটি হয় সেই বার্তাগুলিকে বাফার করে মেমরি পূরণ করবে, অথবা 100% CPU ব্যবহারের কারণে প্রতিক্রিয়াহীন হয়ে পড়বে, অথবা উভয়ই।

প্রেরিত বার্তাগুলিতে ব্যাকপ্রেসার প্রয়োগ করা অ-কার্যকর

প্রেরিত বার্তাগুলিতে ব্যাকপ্রেসার প্রয়োগ করা সম্ভব, তবে এর জন্য WebSocket.bufferedAmount প্রোপার্টি পোলিং করা প্রয়োজন, যা অদক্ষ এবং অ-এর্গোনমিক। এই রিড-অনলি প্রোপার্টি WebSocket.send() এ কল ব্যবহার করে সারিবদ্ধভাবে রাখা বাইট ডেটার সংখ্যা ফেরত দেয়, কিন্তু এখনও নেটওয়ার্কে প্রেরণ করা হয়নি। সমস্ত সারিবদ্ধ ডেটা পাঠানো হয়ে গেলে এই মানটি শূন্যে রিসেট হয়, কিন্তু আপনি যদি WebSocket.send() কল করতে থাকেন, তাহলে এটি বাড়তে থাকবে।

WebSocketStream API কী?

WebSocketStream API ওয়েবসকেট API-এর সাথে স্ট্রিমগুলিকে একীভূত করে অস্তিত্বহীন বা অ-এর্গোনমিক ব্যাকপ্রেসার সমস্যার সমাধান করে। এর অর্থ হল ব্যাকপ্রেসার "বিনামূল্যে" প্রয়োগ করা যেতে পারে, কোনও অতিরিক্ত খরচ ছাড়াই।

WebSocketStream API-এর জন্য প্রস্তাবিত ব্যবহারের উদাহরণ

এই API ব্যবহার করতে পারে এমন সাইটগুলির উদাহরণগুলির মধ্যে রয়েছে:

  • উচ্চ-ব্যান্ডউইথ ওয়েবসকেট অ্যাপ্লিকেশন যা ইন্টারঅ্যাক্টিভিটি ধরে রাখতে হবে, বিশেষ করে ভিডিও এবং স্ক্রিন-শেয়ারিং।
  • একইভাবে, ভিডিও ক্যাপচার এবং অন্যান্য অ্যাপ্লিকেশন যা ব্রাউজারে প্রচুর ডেটা তৈরি করে যা সার্ভারে আপলোড করতে হয়। ব্যাকপ্রেসার দিয়ে, ক্লায়েন্ট মেমরিতে ডেটা জমা করার পরিবর্তে ডেটা উৎপাদন বন্ধ করতে পারে।

বর্তমান অবস্থা

ধাপ অবস্থা
১. ব্যাখ্যাকারী তৈরি করুন সম্পূর্ণ
2. স্পেসিফিকেশনের প্রাথমিক খসড়া তৈরি করুন চলছে
৩. মতামত সংগ্রহ করুন এবং নকশা সম্পর্কে পুনরাবৃত্তি করুন চলছে
৪. অরিজিন ট্রায়াল সম্পূর্ণ
৫. লঞ্চ শুরু হয়নি

WebSocketStream API কীভাবে ব্যবহার করবেন

WebSocketStream API প্রতিশ্রুতি-ভিত্তিক, যা আধুনিক জাভাস্ক্রিপ্ট জগতে এর সাথে কাজ করাকে স্বাভাবিক করে তোলে। আপনি একটি নতুন WebSocketStream তৈরি করে এবং এটি WebSocket সার্ভারের URL দিয়ে পাস করে শুরু করেন। এরপর, আপনি সংযোগটি opened জন্য অপেক্ষা করেন, যার ফলে একটি ReadableStream এবং/অথবা একটি WritableStream তৈরি হয়।

ReadableStream.getReader() পদ্ধতিটি কল করে, আপনি অবশেষে একটি ReadableStreamDefaultReader পাবেন, যা থেকে আপনি স্ট্রিমটি সম্পন্ন না হওয়া পর্যন্ত, অর্থাৎ, যতক্ষণ না এটি {value: undefined, done: true} ফর্মের একটি বস্তু ফেরত দেয় ততক্ষণ পর্যন্ত ডেটা read() পারবেন।

সেই অনুযায়ী, WritableStream.getWriter() পদ্ধতিটি কল করে, আপনি অবশেষে একটি WritableStreamDefaultWriter পাবেন, যেখানে আপনি তারপর write() ডেটা ব্যবহার করতে পারবেন।

  const wss = new WebSocketStream(WSS_URL);
  const {readable, writable} = await wss.opened;
  const reader = readable.getReader();
  const writer = writable.getWriter();

  while (true) {
    const {value, done} = await reader.read();
    if (done) {
      break;
    }
    const result = await process(value);
    await writer.write(result);
  }

পিছনের চাপ

প্রতিশ্রুত ব্যাকপ্রেসার বৈশিষ্ট্যটি সম্পর্কে কী বলা যায়? আপনি এটি "বিনামূল্যে" পাবেন, কোনও অতিরিক্ত পদক্ষেপের প্রয়োজন নেই। যদি process() অতিরিক্ত সময় নেয়, তাহলে পাইপলাইন প্রস্তুত হওয়ার পরেই পরবর্তী বার্তাটি ব্যবহার করা হবে। একইভাবে WritableStreamDefaultWriter.write() পদক্ষেপটি কেবল তখনই এগিয়ে যাবে যদি এটি করা নিরাপদ হয়।

উন্নত উদাহরণ

WebSocketStream-এর দ্বিতীয় আর্গুমেন্টটি হল ভবিষ্যতের এক্সটেনশনের জন্য একটি অপশন ব্যাগ। একমাত্র বিকল্প হল protocols , যা WebSocket কনস্ট্রাক্টরের দ্বিতীয় আর্গুমেন্টের মতোই আচরণ করে:

const chatWSS = new WebSocketStream(CHAT_URL, {protocols: ['chat', 'chatv2']});
const {protocol} = await chatWSS.opened;

নির্বাচিত protocol এবং সম্ভাব্য extensions WebSocketStream.opened প্রতিশ্রুতির মাধ্যমে উপলব্ধ অভিধানের অংশ। লাইভ সংযোগ সম্পর্কে সমস্ত তথ্য এই প্রতিশ্রুতি দ্বারা সরবরাহ করা হয়েছে, কারণ সংযোগ ব্যর্থ হলে এটি প্রাসঙ্গিক নয়।

const {readable, writable, protocol, extensions} = await chatWSS.opened;

বন্ধ WebSocketStream সংযোগ সম্পর্কে তথ্য

WebSocket API-তে WebSocket.onclose এবং WebSocket.onerror ইভেন্ট থেকে যে তথ্য পাওয়া যেত তা এখন WebSocketStream.closed প্রতিশ্রুতির মাধ্যমে পাওয়া যাবে। অশুচি বন্ধের ক্ষেত্রে প্রতিশ্রুতি প্রত্যাখ্যান করা হয়, অন্যথায় এটি সার্ভার দ্বারা প্রেরিত কোড এবং কারণ অনুসারে সমাধান করা হয়।

সমস্ত সম্ভাব্য স্ট্যাটাস কোড এবং তাদের অর্থ CloseEvent স্ট্যাটাস কোডের তালিকায় ব্যাখ্যা করা হয়েছে।

const {code, reason} = await chatWSS.closed;

একটি WebSocketStream সংযোগ বন্ধ করা হচ্ছে

একটি WebSocketStream একটি AbortController দিয়ে বন্ধ করা যেতে পারে। অতএব, WebSocketStream কনস্ট্রাক্টরের কাছে একটি AbortSignal পাস করুন। AbortController.abort() শুধুমাত্র হ্যান্ডশেকের আগে কাজ করে, পরে নয়।

const controller = new AbortController();
const wss = new WebSocketStream(URL, {signal: controller.signal});
setTimeout(() => controller.abort(), 1000);

বিকল্প হিসেবে, আপনি WebSocketStream.close() পদ্ধতিটিও ব্যবহার করতে পারেন, তবে এর মূল উদ্দেশ্য হল সার্ভারে প্রেরিত কোড এবং কারণ নির্দিষ্ট করার অনুমতি দেওয়া।

wss.close({closeCode: 4000, reason: 'Game over'});

ক্রমবর্ধমান বর্ধন এবং আন্তঃকার্যক্ষমতা

বর্তমানে Chrome হল একমাত্র ব্রাউজার যেখানে WebSocketStream API প্রয়োগ করা হয়েছে। ক্লাসিক WebSocket API-এর সাথে ইন্টারঅপারেবিলিটির জন্য, প্রাপ্ত বার্তাগুলিতে ব্যাকপ্রেসার প্রয়োগ করা সম্ভব নয়। প্রেরিত বার্তাগুলিতে ব্যাকপ্রেসার প্রয়োগ করা সম্ভব, তবে WebSocket.bufferedAmount সম্পত্তির পোলিং করা প্রয়োজন, যা অদক্ষ এবং অ-এর্গোনমিক।

বৈশিষ্ট্য সনাক্তকরণ

WebSocketStream API সমর্থিত কিনা তা পরীক্ষা করতে, ব্যবহার করুন:

if ('WebSocketStream' in window) {
  // `WebSocketStream` is supported!
}

ডেমো

সাপোর্টিং ব্রাউজারগুলিতে, আপনি WebSocketStream API-কে কার্যকর অবস্থায় দেখতে পাবেন, অথবা এমবেডেড আইফ্রেম দেখতে পাবেন।

প্রতিক্রিয়া

Chrome টিম WebSocketStream API এর সাথে আপনার অভিজ্ঞতা সম্পর্কে শুনতে চায়।

API ডিজাইন সম্পর্কে আমাদের বলুন

API-তে কি এমন কিছু আছে যা আপনার প্রত্যাশা অনুযায়ী কাজ করছে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য প্রয়োজনীয় পদ্ধতি বা বৈশিষ্ট্যের অভাব আছে? নিরাপত্তা মডেল সম্পর্কে কোন প্রশ্ন বা মন্তব্য আছে? সংশ্লিষ্ট GitHub রেপোতে একটি স্পেক সমস্যা ফাইল করুন, অথবা বিদ্যমান কোনও সমস্যায় আপনার মতামত যোগ করুন।

বাস্তবায়নে কোনও সমস্যার কথা জানান

Chrome এর বাস্তবায়নে কি আপনি কোন বাগ খুঁজে পেয়েছেন? নাকি বাস্তবায়নটি স্পেসিফিকেশন থেকে আলাদা? new.crbug.com এ একটি বাগ ফাইল করুন। যতটা সম্ভব বিস্তারিত তথ্য, পুনরুৎপাদনের জন্য সহজ নির্দেশাবলী অন্তর্ভুক্ত করতে ভুলবেন না এবং Components বাক্সে Blink>Network>WebSockets লিখুন।

API এর জন্য সমর্থন দেখান

আপনি কি WebSocketStream API ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সমর্থন Chrome টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ।

#WebSocketStream হ্যাশট্যাগ ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।

সহায়ক লিঙ্ক

স্বীকৃতি

WebSocketStream API অ্যাডাম রাইস এবং Yutaka Hirano দ্বারা প্রয়োগ করা হয়েছিল।