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

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

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

পটভূমি

WebSocket API

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

স্ট্রিম API

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

বর্তমান 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 WebSocket API-এর সাথে স্ট্রিমগুলিকে একীভূত করে অস্তিত্বহীন বা অ-আর্গোনমিক ব্যাকপ্রেশারের সমস্যা নিয়ে কাজ করে। এর অর্থ ব্যাকপ্রেশার "বিনামূল্যে" প্রয়োগ করা যেতে পারে, কোনো অতিরিক্ত খরচ ছাড়াই।

WebSocketStream API-এর জন্য প্রস্তাবিত ব্যবহারের ক্ষেত্রে

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

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

এখনকার অবস্থা

ধাপ স্ট্যাটাস
1. ব্যাখ্যাকারী তৈরি করুন সম্পূর্ণ
2. স্পেসিফিকেশনের প্রাথমিক খসড়া তৈরি করুন চলমান
3. প্রতিক্রিয়া সংগ্রহ করুন এবং ডিজাইনের উপর পুনরাবৃত্তি করুন চলমান
4. মূল বিচার সম্পূর্ণ
5. লঞ্চ করুন শুরু না

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

সূচনা উদাহরণ

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

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

তদনুসারে, 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.onclose এবং WebSocket.onerror ইভেন্টগুলি WebSocket API-এ পাওয়া তথ্য এখন WebSocketStream.closed প্রতিশ্রুতির মাধ্যমে উপলব্ধ। প্রতিশ্রুতিটি একটি অপরিষ্কার বন্ধ হওয়ার ক্ষেত্রে প্রত্যাখ্যান করে, অন্যথায় এটি সার্ভার দ্বারা প্রেরিত কোড এবং কারণের সমাধান করে।

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

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

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

একটি WebSocketStream একটি AbortController দিয়ে বন্ধ করা যেতে পারে। অতএব, WebSocketStream কনস্ট্রাক্টরের কাছে একটি AbortSignal পাস করুন।

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

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

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

প্রগতিশীল বর্ধন এবং আন্তঃক্রিয়াশীলতা

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

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

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

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

ডেমো

সমর্থনকারী ব্রাউজারগুলিতে, আপনি এম্বেড করা iframe-এ বা সরাসরি Glitch-এ WebSocketStream API কার্যরত দেখতে পারেন।

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

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

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

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

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

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

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

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

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

সাহা্য্যকারী লিংক

স্বীকৃতি

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