Geekly articles weekly

Mengirim pesan peer-to-peer dengan PeerJS

Salam, para pembaca yang budiman. Dalam artikel sebelumnya, saya berbicara tentang cara membuat dialer sederhana di browser menggunakan PeerJS . Dan hari ini saya berencana untuk mempertimbangkan cara bertukar pesan antara dua pengguna secara langsung tanpa penundaan.

Siapa yang peduli Jika Anda mengembangkan game online di mana Anda memerlukan pertukaran data cepat antar pemain, maka pengiriman pesan langsung mungkin adalah yang Anda butuhkan.

Markup dan inisialisasi


Saya akan menunjukkan cara kerja teknologi, menggunakan contoh obrolan sederhana antara dua pengguna , dan juga memberi tahu Anda cara mengadaptasi kode untuk bertukar data game.

Mari kita mulai dengan markup awal dan inisialisasi objek rekan

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>PeerJS  </title> <script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script> </head> <body> <h3> ID: <span id=myid ></span></h3> <input id=otherPeerId type=text placeholder="otherPeerId" ><button onclick="connectToNode(document.getElementById('otherPeerId').value)"></button> <div id=messages style="width:400px;height:60vh; background:#ADD8E6;margin:5px;"> </div><br> <textarea id=mess style="width:400px;height:15vh" ></textarea><br> <button onclick="sendMess(document.getElementById('mess'))"></button> <script> var messList=[]; function addMess(mess) { messList.push(mess); document.getElementById('messages').innerHTML=messList.join(""); } var peer=new Peer(); // peer var conn; //,   peer.on('open', function(peerID) { document.getElementById('myid').innerHTML=peerID; }); </script> </body>

Di pos kita menghubungkan PeerJS. Apa peran elemen dengan indeks myid dan otherPeerId bermain di artikel panggilan

Array messList akan menyimpan umpan pesan. Fungsi addMess akan menambahkan elemen ke array ini dan menampilkan kontennya ke wadah korespondensi.

Selanjutnya adalah inisialisasi objek rekan, yang juga dijelaskan dalam artikel terakhir .

Sekarang sedikit tentang koneksi. Untuk membuat koneksi, perlu bahwa satu peserta, mengetahui peerID dari yang lain, memulai koneksi dengannya, dan yang kedua menerima koneksi ini.

Buat koneksi


 peer.on('connection', function(c) { // ... conn=c; initConn(); }); function connectToNode(partnerPeer) { // ... conn = peer.connect(partnerPeer); conn.partnerPeer=partnerPeer; initConn(); }

Acara 'koneksi' untuk objek rekan terjadi pada koneksi masuk. Dan fungsi koneksi dari objek peer membangun koneksi seperti itu. Dalam kedua kasus, kami akan menyimpan objek koneksi ke samb variabel. Karena tindakan lebih lanjut dengan koneksi untuk contoh pelatihan saat ini akan identik (walaupun mungkin ada perbedaan dalam proyek pertempuran), saya meletakkan initConn ke dalam fungsi yang terpisah.

 function initConn() { conn.on ('open', function () { //  addMess("<div><h4> </h4></div>"); conn.on ('data', function (data) { //  addMess("<div><b>: </b>"+data+"</div>"); }); }); conn.on('close',function() {addMess('----------- -------------');}); }

Di sini kita menggantung 2 penangan: untuk membuka dan menutup koneksi. Di handler untuk membuka koneksi, kami menambahkan handler untuk menerima data, yang akan menambahkan pesan masuk ke wadah dialog.

Tetap hanya menerapkan fungsi yang akan mengirim pesan dengan menekan tombol Kirim , yang:

  1. menambahkan pesan ke umpannya
  2. mengirim pesan ke mitra (mengirim metode objek koneksi)
  3. menghapus bidang entri pesan

     function sendMess(elem) { addMess("<div><b>: </b>"+elem.value+"</div>"); conn.send(elem.value); elem.value=""; }

Adaptasi untuk mentransfer data game


Apa yang perlu dilakukan untuk mengirim dengan cara yang sama bukan teks biasa, tetapi data yang perlu dipertukarkan selama pertandingan? Tidak ada yang istimewa. Di JS, ada metode JSON.stringify dan JSON.parse yang mengubah objek menjadi string dan sebaliknya. Cukup bungkus objek data Anda, konversi objek menjadi string (JSON.stringify) sebelum mengirim dan ubah data yang diterima menjadi objek (JSON.parse) saat diterima

 // gameObject={x:2,y:5,...} conn.send(JSON.stringify(gameObject)); // conn.on ('data', function (data) { //  gameObject=JSON.parse(data); });

Biasanya, sejumlah besar data tidak diperlukan untuk mengirim objek game dan pesan teks. Tetapi jika Anda akan meneruskan isi dari seluruh wadah pada halaman (sekelompok kode HTML), perlu diingat bahwa koneksi besar mungkin tidak mencapai tidak berubah.

Dari pengalaman pribadi saya akan mengatakan: Anda tidak boleh meneruskan pesan lebih dari 10 KB (~ 10.000 karakter) dengan cara ini. Lebih baik menulis pesan seperti itu ke file sementara dan mengirim perintah kepada mitra untuk membaca kode dari file ini (saya pikir Anda mengerti maksudnya).

Kita bisa berhenti di ini, jika tidak ...

Sambungan terputus


Ya, ini sedang terjadi. Alasannya adalah Internet yang tidak stabil. Pernahkah terjadi bahwa Anda hampir menang, tetapi koneksi terputus dan Anda kehilangan semua kemajuan Anda? Untuk menghindari ini, mari kita tambahkan kode yang akan membangkitkan koneksi yang jatuh. Kami akan menangani acara 'tutup' untuk ini. Peristiwa ini terjadi jika:

  1. koneksi sengaja ditutup
  2. koneksi terputus karena internet yang buruk atau pasangan hanya menutup tab

     conn.on('close',function() { setTimeout(function() { if(conn.partnerPeer) { var pp=conn.partnerPeer; conn = peer.connect(conn.partnerPeer); conn.partnerPeer=pp; initConn(); } else conn=null; } ,2000); addMess('----------- -------------'); });

Di sini, dengan jeda 2 detik setelah memutuskan sambungan, kami hanya mencoba membuat yang baru.

PartnerPeer dari objek conn hanya ada di partner yang membuat koneksi untuk pertama kalinya, yang berarti bahwa hanya satu dari 2 sisi koneksi yang akan mulai mengembalikannya ketika rusak.

Dan sekarang seluruh kode:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>PeerJS  </title> <script src="https://unpkg.com/peerjs@1.0.0/dist/peerjs.min.js"></script> </head> <body> <h3> ID: <span id=myid ></span></h3> <input id=otherPeerId type=text placeholder="otherPeerId" ><button onclick="connectToNode(document.getElementById('otherPeerId').value)"></button> <div id=messages style="width:400px;height:60vh; background:#ADD8E6;margin:5px;"> </div><br> <textarea id=mess style="width:400px;height:15vh" ></textarea><br> <button onclick="sendMess(document.getElementById('mess'))"></button> <script> var messList=[]; function addMess(mess) { messList.push(mess); document.getElementById('messages').innerHTML=messList.join(""); } var peer=new Peer(); var conn; //,   peer.on('open', function(peerID) { document.getElementById('myid').innerHTML=peerID; }); peer.on('connection', function(c) { // ... conn=c; initConn(); }); function connectToNode(partnerPeer) { // ... conn = peer.connect(partnerPeer); initConn(); } function initConn() { conn.on ('open', function () { //  addMess("<div><h4> </h4></div>"); conn.on ('data', function (data) { //  addMess("<div><b>: </b>"+data+"</div>"); }); }); conn.on('close',function() {addMess('----------- -------------');}); } function sendMess(elem) { addMess("<div><b>: </b>"+elem.value+"</div>"); conn.send(elem.value); elem.value=""; } </script> </body>

Source: https://habr.com/ru/post/id470189/

More articles:


All Articles