Laksanakan bilik sembang websocket menggunakan kemahiran tutorial html5 websocket_html5

Apakah itu websocket

Protokol WebSocket ialah protokol baharu yang diperkenalkan oleh html5 Tujuannya adalah untuk mencapai komunikasi dupleks penuh antara penyemak imbas dan pelayan. Pelajar yang membaca pautan di atas mesti sudah memahami cara melakukan ini pada masa lalu dengan kecekapan rendah dan penggunaan tinggi (penundian atau komet Dalam API soket web, penyemak imbas dan pelayan hanya perlu melakukan tindakan berjabat tangan, dan kemudian, A saluran pantas dibentuk antara penyemak imbas dan pelayan. Data boleh dihantar terus antara keduanya. Melakukan ini pada masa yang sama mempunyai dua faedah

1. Mengurangkan bait penghantaran komunikasi: Berbanding dengan penggunaan http sebelumnya untuk menghantar data, websocket menghantar maklumat tambahan yang sangat sedikit Menurut Baidu, ia hanya 2k

2. Pelayan boleh menolak mesej secara aktif kepada pelanggan tanpa perlu bertanya kepada pelanggan

Konsep dan faedahnya ada di mana-mana di Internet, jadi saya tidak akan membincangkan secara ringkas lihat prinsip dan kemudian mula menulis versi web ruang sembang

Berjabat tangan

Selain jabat tangan tiga hala bagi sambungan TCP, dalam protokol soket web, pelanggan dan pelayan memerlukan jabat tangan tambahan untuk mewujudkan sambungan Dalam versi terkini protokol, ia kelihatan seperti ini

Pelanggan menghantar permintaan ke pelayan Hantar permintaan

Salin kod

Kodnya adalah seperti berikut:

GET / HTTP/1.1
Naik taraf: websocket
Sambungan: Naik Taraf
Hos: 127.0.0.1:8080
Asal: < a href="http://test.com">http:/ /test.com
Pragma: tiada-cache
Kawalan-Cache: tiada-cache
Sec-WebSocket- Kunci: OtZtd55qBhJF2XLNDRgUMg==
Sec-WebSocket-Versi: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
User-Agent: Mozilla/5.0 (Macintosh 10_ Intel Mac9 OS_0) AppleWebKit/537.36 (KHTML, seperti Gecko) Chrome/31.0.1650.57 Safari/537.36

Pelayan bertindak balas

Salin kod

Kodnya adalah seperti berikut:

HTTP/ 1.1 101 Protokol Penukaran
Naik taraf: websocket
Sambungan: Naik Taraf
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=

API websocket

Selepas berjabat tangan, penyemak imbas dan pelayan mewujudkan sambungan, dan kedua-duanya boleh berkomunikasi antara satu sama lain. API websocket adalah sangat mudah. ​​Lihat definisi W3C

Salin kod Kod tersebut. adalah seperti berikut:

enum BinaryType { "blob", "arraybuffer" };

[Constructor(DOMString url, pilihan (DOMString atau DOMString[]) protokol)]
interface WebSocket : EventTarget {
atribut baca sahaja DOMString url;

// keadaan sedia
const unsigned short CONNECTING = 0;
const unsigned short BUKA = 1;
const unsigned short PENUTUP = 2 ;
const unsigned short CLOSED = 3;
readonly atribut unsigned short readyState;
read only atribut unsigned long bufferedAmount;

// networking
atribut EventHandler onopen;
atribut EventHandler onerror;
atribut EventHandler onclose;
sambungan DOMString atribut baca sahaja;
atribut baca sahaja protokol DOMString;
batal tutup([Clamp] kod pendek tidak ditandatangani pilihan, sebab DOMString pilihan);

// pemesejan
atribut EventHandler onmessage;
atribut BinaryType binaryType;
void send(DOMString data);
batal hantar(Blob data);
batal hantar(ArrayBuffer data);
void send(ArrayBufferView data);


Buat websocket

Salin kod

Kodnya adalah seperti berikut:

ws=new WebSocket(alamat); //ws://127.0.0.1:8080

Panggilnya pembina dan masukkan alamat untuk mencipta soket web, perlu diperhatikan bahawa protokol alamat mestilah ws/wss

Tutup soket

Salin kod

Kod adalah seperti berikut:

ws.close();

Panggil kaedah close() contoh perkhidmatan web untuk menutup perkhidmatan web Sudah tentu, anda juga boleh menghantar kod dan rentetan untuk menerangkan mengapa ia ditutup

Beberapa pengendalian fungsi panggil balik <.>
Oleh kerana pelaksanaannya yang tidak disengajakan, fungsi panggilan balik secara semulajadi. .
onerror: dipanggil apabila ralat berlaku
onclose: Dipanggil semasa menutup sambungan

Anda boleh mengetahui perkara yang dilakukannya dengan melihat nama Setiap fungsi panggil balik akan dihantar dalam objek Acara dan mesej boleh diakses melalui data acara

Menggunakan API

Kita boleh berjaya mencipta soket Kemudian tetapkan nilai kepada fungsi panggil baliknya






Salin kod

Kodnya ialah seperti berikut: ws=new WebSocket(alamat);

ws.onopen=function(e){

var msg=document.createElement('div');

msg.style.color='#0f0';
msg.innerHTML="Server > connection open.";
msgContainer.appendChild(msg);
ws.send('{<' document .getElementById('name').value '> }');


Anda juga boleh menggunakan pengikatan acara

Salin kod

Kod adalah seperti berikut: ws=new WebSocket(alamat);

ws.addEventListener('open',function(e){

var msg=document.createElement('div') ;

msg.style.color='#0f0';
msg.innerHTML="Server > sambungan dibuka.";
msgContainer.appendChild (msg);
ws.send('{ <' document.getElementById('name').value '>}');



Pelaksanaan pihak klien
Malah, pelaksanaan pihak klien agak mudah Kecuali beberapa ayat yang berkaitan dengan soket web, terdapat beberapa fungsi mudah seperti fokus automatik, masukkan pemprosesan acara utama dan kedudukan automatik bagi. kotak mesej ke bawah saya tidak akan menerangkannya satu persatu