مقدمة إلى PeerJS ، مكتبة WebRTC

قد يكون العمل مع WebRTC صعبًا. PeerJS هي مكتبة رائعة تجعل WebRTC أسهل

كتبت عنهWebRTC. وصف ذلك المنشور تفاصيل العمل مع البروتوكول لجعل متصفحي ويب يتواصلان مع بعضهما البعض بشكل مباشر.

ذكرت في هذا البرنامج التعليمي أن هناك مكتبات تجرد العديد من التفاصيل التي يجب عليك الاهتمام بها للسماح باتصال WebRTC.

إحدى هذه المكتبات هي PeerJS ، مما يجعل الاتصال في الوقت الفعلي بسيطًا للغاية.

أول شيء هو أنك تحتاج إلى أن يكون لديك خلفية للسماح لعميلين بالمزامنة قبل أن يتمكنوا من التحدث مباشرة مع بعضهم البعض.

في مجلد ، قم بتهيئة ملفnpmباستخدام المشروعnpm init، قم بتثبيت PeerJS باستخدام ملفاتnpm install peerjsوبعد ذلك يمكنك تشغيله باستخدامnpx:

npx peerjs --port 9000

(يركضnpx peerjs --helpلرؤية جميع الخيارات التي يمكنك استخدامها).

هذه هي الواجهة الخلفية الخاصة بك 🙂

الآن يمكننا إنشاء أبسط تطبيق يقوم بأي شيء مفيد. لدينا جهاز استقبال ومرسل واحد.

أولاً ، نقوم بإنشاء جهاز الاستقبال ، الذي يتصل بخادم PeerJS الخاص بنا ، ويستمع إلى البيانات الواردة إليه. المعلمة الأولى لnew Peer()هو اسم نظيرنا الذي نسميهreceiverلنوضح:

قم بتضمين عميل PeerJS (قم بتغيير إصدار المكتبة بأحدث إصدار متوفر):

<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>

ثم نقوم بتهيئة ملفPeerموضوع. الconnectionيتم استدعاء الحدث عندما يتصل بنا نظير آخر. عندما نتلقى بعض البيانات ، فإنdataتم استدعاء الحدث مع الحمولة:

const peer = new Peer('receiver', { host: 'localhost', port: 9000, path: '/' })

peer.on(‘connection’, (conn) => { conn.on(‘data’, (data) => { console.log(data); }) })

لنقم بإنشاء الطرف الآخر من الاتصال. سوف نسمي هذاsenderلأنه الشخص الذي سيتصل ويرسل رسالة إلى المتلقي.

نقوم بتهيئة ملفPeerالكائن ، ثم نطلب من النظير الاتصال بـreceiverنظير ، الذي سجلناه سابقًا. ثم بمجرد إنشاء الاتصالopenحرائق الحدث ، ويمكننا استدعاءsend()طريقة الاتصال لإرسال البيانات إلى الطرف الآخر:

const peer = new Peer('sender', { host: 'localhost', port: 9000, path: '/' })

const conn = peer.connect(‘receiver’)

conn.on(‘open’, () => { conn.send(‘hi!’) })

هذا هو المثال الأساسي الذي يمكنك القيام به.

أولا تفتح صفحة المتلقي ، ثم تفتح صفحة المرسل يتلقى المتلقي الرسالةمباشرةمن المرسل ، وليس من مصدر مركزي. مطلوب جزء الخادم فقط لتبادل المعلومات حتى يمكن توصيل الجزأين. بعد ذلك ، لم يعد يتدخل.


المزيد من دروس js: