ما هو gRPC-Web؟ كل ما تحتاج إلى معرفته

مرحبًا! إذا كنت تتابع أحدث الاتجاهات في تطوير الويب، فمن المحتمل أنك سمعت مصطلح gRPC-Web. ربما أنت مطور تتساءل عما إذا كان يجب عليك دمجه في مشاريعك. أو ربما أنت فقط فضولي لمعرفة كل هذا الضجيج. في كلتا الحالتين، لقد جئت إلى المكان الصحيح. دعنا نغوص في عالم gRPC-Web، وبنهاية هذا المنشور، سيكون لديك فهم جيد لما هو، ولماذا هو مفيد، وكيف يمكنك البدء في استخدامه.

ما هو gRPC-Web؟

أولاً، ما هو بالضبط gRPC-Web؟ في جوهره، gRPC-Web هو مكتبة عميل JavaScript تمكن تطبيقات الويب من التواصل مع خدمات gRPC. إنها توسع وظيفة gRPC (استدعاء إجراء بعيد من جوجل)، وهو إطار عمل مفتوح المصدر يستخدم HTTP/2 لنقل الرسائل. تم تصميم gRPC لتسهيل بناء واجهات برمجة التطبيقات القابلة للتوسع والكفء.

نظرة سريعة على gRPC

قبل أن نغوص أعمق في gRPC-Web، دعنا نأخذ تذكير سريع عن gRPC نفسه. تم تطوير gRPC بواسطة جوجل ويستخدم على نطاق واسع في اتصالات الميكروservices. يستفيد من HTTP/2، وبروتوكول Buffers (protobufs)، ويوفر ميزات مثل المصادقة، والتوازن في التحميل، وأكثر. مع gRPC، تحدد طرق الخدمة وأنواع الرسائل باستخدام بروتوكول Buffers، الذي يولد بعد ذلك كودًا لكل من العميل والخادم.

لماذا gRPC-Web؟

إذًا، لماذا نحتاج إلى gRPC-Web عندما يكون لدينا gRPC بالفعل؟ الجواب يكمن في قيود المتصفحات. بينما gRPC ممتاز للتواصل بين الخوادم، فإنه لا يعمل مباشرة مع المتصفحات لأنها لا تدعم نوع HTTP/2 trailers، الذي يعتمد عليه gRPC. هنا يأتي دور gRPC-Web. يعمل كجسر، مما يمكّن خدمات gRPC من أن يتم استهلاكها بواسطة تطبيقات الويب.

الفوائد الرئيسية لـ gRPC-Web

الآن بعد أن عرفنا ما هو gRPC-Web، دعونا نستكشف لماذا قد ترغب في استخدامه. إليك بعض الفوائد الرئيسية:

1. الأداء

واحدة من الميزات البارزة لـ gRPC-Web هي أداؤه. بفضل استخدامه لـ HTTP/2 وبروتوكول Buffers، يمكن لـ gRPC-Web التعامل مع عدد كبير من الطلبات بكفاءة. وهذا يجعله مثاليًا للتطبيقات التي تتطلب تبادل البيانات في الوقت الفعلي أو تحتاج إلى إدارة اتصالات متعددة في وقت واحد.

2. سهولة الاستخدام

مع gRPC-Web، يمكنك الاستفادة من نفس تعريفات بروتوكول Buffers لكل من عملائك في الويب وخدمات الخلفية. هذا يعني أنك يمكن أن تحافظ على الاتساق عبر مجموعة تطبيقاتك وتقليل كمية الكود المتكرر الذي تحتاج لكتابته. بالإضافة إلى ذلك، مع أدوات مثل Apidog، يمكنك تبسيط عملية تطوير واجهة برمجة التطبيقات لديك بشكل أكبر.

3. القابلية للتوسع

نظرًا لأن gRPC-Web يستخدم HTTP/2، فإنه يستفيد من ميزات مثل تعدد الإرسال، مما يسمح بإرسال طلبات متعددة عبر اتصال واحد. وهذا يساعد في تقليل الأعباء المرتبطة بإنشاء وإدارة اتصالات متعددة، مما يجعل تطبيقك أكثر قابلية للتوسع.

4. التوافقية

يتيح gRPC-Web اتصالًا سلسًا بين تطبيقات الويب وخدمات gRPC الخاصة بك. هذا يعني أنه يمكنك بناء تطبيقات ويب حديثة يمكنها التفاعل مع بنية الميكروservices القائمة على gRPC دون الحاجة إلى إنشاء واجهات برمجة تطبيقات REST إضافية.

البدء باستخدام gRPC-Web

حسنًا، يكفي من النظرية! دعنا نتعمق ونرى كيف يمكنك البدء في استخدام gRPC-Web في مشاريعك.

المتطلبات المسبقة

قبل أن تبدأ، تأكد من أنك قد قمت بتثبيت ما يلي:

• Node.js
• npm أو yarn
• مترجم بروتوكول Buffers (protoc)

الخطوة 1: تعريف خدمتك

الخطوة الأولى هي تعريف خدمة gRPC الخاصة بك باستخدام بروتوكول Buffers. أنشئ ملف .proto مع تعريفات الخدمة والرسالة الخاصة بك. على سبيل المثال:

syntax = "proto3";

package example;

service HelloService {
  rpc SayHello (HelloRequest) returns (HelloResponse);
}

message HelloRequest {
  string name = 1;
}

message HelloResponse {
  string message = 1;
}

الخطوة 2: توليد كود العميل والخادم

الخطوة التالية، استخدم مترجم بروتوكول Buffers لتوليد كود العميل والخادم. نفذ الأمر التالي:

protoc -I=. --js_out=import_style=commonjs,binary:. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. example.proto

هذا الأمر يولد ملفات JavaScript الضرورية لعميل gRPC-Web الخاص بك.

الخطوة 3: إعداد الخادم الخاص بك

الآن، قم بإعداد خادم gRPC لمعالجة الطلبات. إليك مثال باستخدام Node.js:

const grpc = require('@grpc/grpc-js');
const protoLoader = require('@grpc/proto-loader');

const packageDefinition = protoLoader.loadSync('example.proto', {});
const exampleProto = grpc.loadPackageDefinition(packageDefinition).example;

function sayHello(call, callback) {
  callback(null, { message: `مرحبًا، ${call.request.name}!` });
}

const server = new grpc.Server();
server.addService(exampleProto.HelloService.service, { sayHello: sayHello });
server.bindAsync('0.0.0.0:50051', grpc.ServerCredentials.createInsecure(), () => {
  server.start();
});

الخطوة 4: إعداد العميل الخاص بك

أخيرًا، قم بإعداد عميل الويب الخاص بك للتواصل مع خادم gRPC. إليك مثال باستخدام React:

import React, { useState } from 'react';
import { HelloServiceClient } from './example_grpc_web_pb';
import { HelloRequest } from './example_pb';

const client = new HelloServiceClient('http://localhost:8080');

function App() {
  const [response, setResponse] = useState('');

  const sayHello = () => {
    const request = new HelloRequest();
    request.setName('العالم');

    client.sayHello(request, {}, (err, response) => {
      if (err) {
        console.error(err);
      } else {
        setResponse(response.getMessage());
      }
    });
  };

  return (
    <div>
      <button onClick={sayHello}>قل مرحبًا</button>
      <p>{response}</p>
    </div>
  );
}

export default App;

الخطوة 5: إعداد وكيل

نظرًا لأن gRPC-Web يستخدم HTTP/2، ستحتاج إلى إعداد وكيل لتحويل الطلبات. يمكنك استخدام وكيل grpc-web لهذا الغرض. إليك كيفية القيام بذلك:

docker run -d -p 8080:8080 --network host \
  --name grpc-web-proxy \
  envoyproxy/envoy:v1.18.3 -c /etc/envoy-config.yaml

أنشئ ملف envoy-config.yaml بالمحتوى التالي:

static_resources:
  listeners:
    - address:
        socket_address:
          address: 0.0.0.0
          port_value: 8080
      filter_chains:
        - filters:
            - name: envoy.filters.network.http_connection_manager
              typed_config:
                "@type": type.googleapis.com/envoy.extensions.filters.network.http_connection_manager.v3.HttpConnectionManager
                codec_type: AUTO
                stat_prefix: ingress_http
                route_config:
                  name: local_route
                  virtual_hosts:
                    - name: local_service
                      domains: ["*"]
                      routes:
                        - match:
                            prefix: "/"
                          route:
                            cluster: grpc_service
                http_filters:
                  - name: envoy.filters.http.grpc_web
                  - name: envoy.filters.http.router
  clusters:
    - name: grpc_service
      connect_timeout: 0.25s
      type: logical_dns
      lb_policy: round_robin
      http2_protocol_options: {}
      load_assignment:
        cluster_name: grpc_service
        endpoints:
          - lb_endpoints:
              - endpoint:
                  address:
                    socket_address:
                      address: 127.0.0.1
                      port_value: 50051

أدوات لتعزيز تطوير gRPC-Web الخاص بك

على الرغم من أن إعداد gRPC-Web بسيط إلى حد ما، إلا أن هناك أدوات يمكن أن تجعل عملية التطوير أكثر سلاسة. إحدى هذه الأدوات هي Apidog. Apidog هي أداة إدارة واجهات برمجة التطبيقات تساعدك على تصميم، واختبار، ومراقبة واجهات برمجة التطبيقات الخاصة بك بسهولة. إنها تدعم gRPC، مما يجعلها خيارًا ممتازًا لتطوير gRPC-Web. مع Apidog، يمكنك:

• تصميم واجهات برمجة التطبيقات: إنشاء وإدارة تعريفات خدمات gRPC الخاصة بك من خلال واجهة مستخدم بديهية.
• اختبار واجهات برمجة التطبيقات: اختبار خدمات gRPC الخاصة بك بسهولة باستخدام أدوات اختبار قوية.
• مراقبة واجهات برمجة التطبيقات: متابعة أداء واجهة برمجة التطبيقات الخاصة بك وضمان سير كل شيء بسلاسة.

يمكن أن يؤدي استخدام Apidog بالتزامن مع gRPC-Web إلى تبسيط سير عمل تطويرك وضمان بناء واجهات برمجة التطبيقات الخاصة بك بشكل قوي وموثوق.

دليل خطوة بخطوة لاختبار gRPC-Web باستخدام Apidog

الخطوة 1: إعداد Apidog

إنشاء مشروع جديد: افتح Apidog، أنشئ مشروعًا جديدًا من خلال النقر على زر "+ مشروع جديد". أعط مشروعك اسمًا ووصفًا لمساعدتك في الحفاظ على تنظيم الأمور.

الخطوة 2: تعريف خدمة gRPC الخاصة بك

استيراد ملف .proto الخاص بك: يمكنك إما استيراد ملف .proto الحالي الخاص بك أو تعريف خدمة gRPC الخاصة بك يدويًا. للاستيراد، انقر على زر "استيراد" واختر ملف .proto الخاص بك. ستحلل Apidog الملف تلقائيًا وتولد التعريفات API اللازمة.

الخطوة 3: إعداد نقطة نهاية gRPC-Web الخاصة بك

إعداد نقطة النهاية: بعد استيراد ملف .proto الخاص بك، قم بتكوين نقطة نهاية gRPC-Web الخاصة بك عن طريق تحديد عنوان URL لخادم gRPC-Web الخاص بك. على سبيل المثال، إذا كان الخادم الخاص بك يعمل على http://localhost:8080، أدخل هذا العنوان URL في تكوين نقطة النهاية.

ستقوم Apidog بإدراج جميع طرق الخدمة المحددة في ملف .proto الخاص بك. يمكنك تحديد الطرق التي تريد اختبارها وإضافتها إلى واجهة برمجة التطبيقات الخاصة بك.

حالات استخدام gRPC-Web في العالم الحقيقي

لإعطائك فكرة أفضل عن أين يتألق gRPC-Web، إليك بعض حالات الاستخدام الواقعية:

1. التطبيقات في الوقت الحقيقي

يمكن للتطبيقات التي تتطلب تحديثات بيانات في الوقت الفعلي، مثل تطبيقات الدردشة أو لوحات القيادة المباشرة، أن تستفيد بشكل كبير من gRPC-Web. يضمن بروتوكول الاتصالات الفعال انخفاض زمن الانتقال العالي والأداء العالي.

2. بنى الميكروservices

إذا كنت تعمل مع بنية ميكروservices، يمكن أن تساعدك gRPC-Web على جعل تطبيقات الويب الخاصة بك تتواصل بسلاسة مع خدمات الخلفية. يتيح لك ذلك الحفاظ على بروتوكول اتصال متسق عبر مجموعة أدواتك بالكامل.

3. التطبيقات المعتمدة على البيانات

يمكن للتطبيقات التي تحتاج إلى التعامل مع كميات كبيرة من البيانات، مثل خدمات بث الفيديو أو منصات تحليل البيانات الضخمة، أن تستفيد من قدرات gRPC-Web الفعالة في تسلسل البيانات والنقل.

4. منصات إنترنت الأشياء

غالبًا ما تتطلب منصات إنترنت الأشياء اتصالات فعالة وقابلة للتوسع بين الأجهزة والخوادم. يوفر gRPC-Web حلاً قويًا لإدارة هذه التفاعلات.

الاستنتاج

وهناك لديك - نظرة شاملة على gRPC-Web. لقد تناولنا ما هو، ولماذا هو مفيد، وكيف يمكنك البدء باستخدامه في مشاريعك. مع فوائد الأداء، وسهولة الاستخدام، والقابلية للتوسع، gRPC-Web هو أداة قوية لتطوير الويب الحديث. سواء كنت تبني تطبيقات في الوقت الحقيقي، أو بنيات ميكروservices، أو منصات تعتمد على البيانات، gRPC-Web يمكنك من تحقيق أهدافك. ومع أدوات مثل Apidog، يمكنك تبسيط عملية تطوير واجهة برمجة التطبيقات الخاصة بك وضمان تشغيل خدماتك بسلاسة.

فماذا تنتظر؟ انطلق إلى gRPC-Web وابدأ في بناء الجيل القادم من تطبيقات الويب!