Giới thiệu về PeerJS, thư viện WebRTC

Làm việc với WebRTC có thể khó khăn. PeerJS là một thư viện tuyệt vời giúp WebRTC dễ dàng hơn

Tôi đã viết vềWebRTC. Bài đăng đó mô tả chi tiết về cách làm việc với giao thức để làm cho 2 trình duyệt Web giao tiếp trực tiếp với nhau.

Trong hướng dẫn đó, tôi đã đề cập rằng có những thư viện tóm tắt nhiều chi tiết bạn phải quan tâm để cho phép giao tiếp WebRTC.

Một trong những thư viện đó là PeerJS, giúp giao tiếp thời gian thực cực kỳ đơn giản.

Điều đầu tiên là bạn cần có một chương trình phụ trợ để cho phép 2 máy khách đồng bộ hóa trước khi họ có thể trực tiếp nói chuyện với nhau.

Trong một thư mục, hãy khởi tạo mộtnpmdự án sử dụngnpm init, cài đặt PeerJS bằngnpm install peerjsvà sau đó và bạn có thể chạy nó bằng cách sử dụngnpx:

npx peerjs --port 9000

(chạynpx peerjs --helpđể xem tất cả các tùy chọn bạn có thể sử dụng).

Đây là chương trình phụ trợ của bạn 🙂

Bây giờ chúng ta có thể tạo một ứng dụng đơn giản nhất có ích. Chúng tôi có một người nhận và một người gửi.

Đầu tiên, chúng tôi tạo bộ thu, kết nối với máy chủ PeerJS của chúng tôi và lắng nghe dữ liệu gửi đến nó. Tham số đầu tiênnew Peer()là tên ngang hàng của chúng tôi, mà chúng tôi gọireceiverđể làm cho nó rõ ràng:

Bao gồm ứng dụng khách PeerJS (thay đổi phiên bản thư viện với phiên bản mới nhất hiện có):

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

Sau đó, chúng tôi khởi tạoPeervật. Cácconnectionsự kiện được gọi khi một đồng nghiệp khác kết nối với chúng tôi. Khi chúng tôi nhận được một số dữ liệu,datasự kiện được gọi với trọng tải:

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

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

Hãy tạo đầu bên kia của giao tiếp. Chúng tôi sẽ gọi cái nàysenderbởi vì nó là thứ sẽ kết nối và gửi tin nhắn đến người nhận.

Chúng tôi khởi tạoPeerđối tượng, sau đó chúng tôi yêu cầu người ngang hàng kết nối vớireceiverngang hàng, mà chúng tôi đã đăng ký trước đó. Sau đó, khi kết nối được thiết lập,opencháy sự kiện và chúng ta có thể gọisend()trên kết nối để gửi dữ liệu đến đầu kia:

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

const conn = peer.connect(‘receiver’)

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

Đó là ví dụ cơ bản nhất mà bạn có thể làm.

Đầu tiên bạn mở trang người nhận, sau đó bạn mở trang người gửi. Người nhận nhận được tin nhắntrực tiếptừ người gửi, không phải từ tài nguyên tập trung. Phần máy chủ chỉ cần trao đổi thông tin để 2 phần có thể kết nối với nhau. Sau đó, nó không can thiệp nữa.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: