Soket web HTML5 komunikasi dupleks penuh pembelajaran terperinci contoh_html5 kemahiran tutorial

Kebanyakan pelaksanaan semasa aplikasi web masa nyata berkisar pada pengundian dan teknologi tolak sebelah pelayan yang lain, yang paling terkenal ialah Komet. Teknologi komet membolehkan pelayan untuk menolak data secara aktif kepada pelanggan secara tidak segerak.

Apabila menggunakan tinjauan pendapat, penyemak imbas menghantar permintaan HTTP secara berkala dan menerima respons serta-merta apabila menggunakan tinjauan panjang, penyemak imbas menghantar permintaan kepada pelayan, dan pelayan memastikan ia terbuka untuk satu tempoh masa; penyemak imbas menghantar permintaan HTTP penuh, tetapi pelayan menghantar dan menyimpan respons terbuka yang terus dikemas kini dan kekal terbuka selama-lamanya.

Tiga kaedah di atas akan melibatkan pengepala permintaan dan respons HTTP apabila menghantar data masa nyata, dan mengandungi sejumlah besar data pengepala tambahan dan tidak perlu, yang akan menyebabkan kelewatan penghantaran.

1. Tafsiran Soket Web HTML5

1. WebSocket berjabat tangan

Untuk mewujudkan komunikasi WebSocket, pelanggan dan pelayan menaik taraf protokol HTTP kepada protokol WebSocket semasa jabat tangan awal. Setelah sambungan diwujudkan, mesej WebSocket boleh dihantar berulang-alik antara klien dan pelayan dalam mod dupleks penuh.

Nota: Dalam rangkaian, setiap mesej bermula dengan 0x00 bait dan berakhir dengan 0xFF, dan data perantaraan menggunakan format pengekodan UTF-8.

2. Antara muka WebSocket

Selain takrifan protokol WebSocket, antara muka WebSocket untuk aplikasi JavaScript juga ditakrifkan.

Salin kod

Kod tersebut adalah seperti berikut:

antara muka WebSocket{
URL DOMString atribut baca sahaja;
//Keadaan sedia
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
read only atribut unsigned short readyState ;
baca sahaja atribut tidak ditandatangani short bufferedAmount;
//Rangkaian
Fungsi atribut tidak dibuka;
Fungsi atribut padamesej;
Fungsi atribut pada tutup;
hantaran boolean(dalam data DOMSString);
void close ();
};
WebSocket melaksanakan EventTarget;

Nota: Awalan ws:// dan wss:// masing-masing mewakili sambungan WebSocket dan sambungan WebSocket selamat.

2. HTML5 WebSockets API

Bahagian ini membincangkan cara menggunakan Soket Web HTML5

1. Semak sama ada penyemak imbas menyokongnya

Gunakan window.WebSocket untuk menentukan sama ada penyemak imbas menyokongnya.

2. Penggunaan asas API

a. Penciptaan objek WebSocket dan sambungan ke pelayan WebSocket

Salin kod

Kodnya adalah seperti berikut:

url = "ws:/ /localhost: 8080/echo";
ws = WebSocket(url) baharu;

b. Tambahkan pendengar acara

WebSocket mengikut model pengaturcaraan tak segerak Selepas membuka soket, anda hanya perlu menunggu peristiwa berlaku tanpa mengundi pelayan secara aktif. Oleh itu, anda perlu menambah fungsi panggil balik untuk mendengar acara.

Objek WebSocket mempunyai tiga acara: buka, tutup dan mesej. Acara terbuka dicetuskan apabila sambungan diwujudkan, acara mesej dicetuskan apabila mesej diterima, dan acara tutup dicetuskan apabila sambungan WebSocket ditutup.

Salin kod

Kod tersebut adalah seperti berikut:

ws.onopen = function( ){
log("open");
}
ws.onmessage = function(){
log(e.data);
}
ws.onclose = function( ){
log("ditutup");
}

c. Hantar mesej

Apabila soket terbuka (iaitu, selepas memanggil pendengar onopen dan sebelum memanggil pendengar onclose), anda boleh menggunakan kaedah hantar untuk menghantar mesej.

ws.send("Hello World");

3. Contoh aplikasi HTML5 WebSockets

Bahagian ini akan menggabungkan antara muka Geolokasi yang diterangkan sebelum ini untuk mencipta aplikasi yang mengira jarak terus dalam halaman Web.

1. Tulis fail HTML

Salin kod

Kod tersebut adalah seperti berikut:

Soket Web HTML5 / Penjejak Geolokasi

Geolokasi:

Pelayar anda tidak menyokong Geolokasi HTML5

WebSocket:

Pelayar anda tidak menyokong Soket Web HTML5

2. Tambahkan kod WebSocket

Salin kod

Kod adalah seperti berikut:

function loadDemo(){
//Pastikan penyemak imbas menyokong WebSocket
if(window.WebSocket){
url = "ws://localhost:8080";//broadcast WebSocket server location
ws = new WebSocket(url );
ws.onopen = function(){
updateSocketStatus("Sambungan diwujudkan");
}
ws.onmessage = function(e){
updateSocketeStatus("Kemas kini data lokasi: " dataReturned( e.data));
}
}
}

3. Tambah kod Geolokasi

Salin kod

Kod adalah seperti berikut:

var geo;
if(navigator .geolocation){
geo = navigator.geolocation;
updateGeolocationStatus("Pelayar menyokong Geolokasi HTML5");
}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//Kemas kini setiap 20s

kemas kini fungsiLokasi(kedudukan){
var latitud = position.coords.latitud;
var longitud = position.coords.longitud;
var timestamp = position.timestamp;
updateGeolocationStatus(" Masa kemas kini lokasi: " cap waktu);
var toSend = JSON.stringify([myId,latitud,longitud]);
sendMyLocation(toSend);
}

4. Gabungkan semua kandungan

Salin kod

Kod tersebut adalah seperti berikut:

HTML5 WebSocket / Geolocation 追踪器

Geolocation:

你的浏览器不支持HTML5 Geolocation

WebSocket:

你的浏览器不支持HTML5 Web Sockets

//Rujukan kepada WebSocket

var ws;

//ID rawak unik yang dijana untuk sesi ini

var myId = Math.floor(100000*Math.random());

//Bilangan baris yang sedang dipaparkan

var rowCount;

fungsi kemas kiniSocketStatus(mesej){

document.getElementById("socketStatus").innerHTML = message;

}

kemas kini fungsiGeolocationStatus(mesej){

document.getElementById("geoStatus").innerHTML = message;

}

fungsi loadDemo(){

//Pastikan penyemak imbas menyokong WebSocket

if(window.WebSocket){

url = "ws://localhost:8080";//siaran lokasi pelayan WebSocket

ws = new WebSocket(url);

ws.onopen = function(){

updateSocketStatus("Sambungan diwujudkan");

}

ws.onmessage = fungsi(e){

updateSocketStatus("Kemas kini data lokasi:" dataReturned(e.data));

}

}

var geo;

if(navigator.geolocation){

geo = navigator.geolocation;

updateGeolocationStatus("Pelayar menyokong Geolokasi HTML5");

}

geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//Kemas kini setiap 20s

kemas kini fungsiLokasi(kedudukan){

var latitud = kedudukan.coords.latitud;

var longitud = kedudukan.coords.longitud;

var cap masa = position.timestamp;

updateGeolocationStatus("Masa kemas kini lokasi: " timestamp);

var toSend = JSON.stringify([myId,latitud,longitud]);

hantarLokasi Saya(untukHantar);

}

fungsi sendMyLocation(newLocation){

jika(ws){

ws.send(newLocation)

}

}

data fungsi Dikembalikan(locationData){

var allData = JSON.parse(locationData);

var incomingId = semuaData[1];

var incomingLat = semuaData[2];

var incomingLong = semuaData[3];

var incomingRow = document.getElementById(incomingId);

jika(!incomingRow){

incomingRow = document.getElementById("div");

incomingRow.setAttribute("id",incomingId);

incomingRow.userText = (incomingId == myId)?"Saya":'User' rowCount;

rowCount ;

document.body.appendChild(incomingRow);

}

incomingRow.innerHTML = incomingRow.userText " \ Lat: "

incomingLat " \ Lon: "

masukLong;

kembalikan incomingRow.userText;

pemegang fungsiLocationError(error){

suis(error.code){

kes 0:

updateGeolocationStatus("Ralat mendapatkan maklumat lokasi: " error.message);

break;

kes 1:

updateGeolocationStatus("Pengguna menyekat akses kepada maklumat lokasi.");

break;

kes 2:

updateGeolocationStatus("Pelayar tidak dapat mengesan maklumat lokasi anda: " error.message);

break;

kes 3:

updateGeolocationStatus("Pelayar tamat masa apabila mendapatkan maklumat lokasi.");

break;

}
}