Pengenalan kepada API WebSockets HTML5

HTML5 memperkenalkan banyak API novel, termasuk WebSocket. WebSocket membolehkan pemaju membuat aplikasi masa nyata yang kuat dengan mewujudkan sambungan soket antara penyemak imbas dan pelayan. Dalam erti kata lain, disebabkan kewujudan sambungan berterusan, pelanggan dan pelayan boleh menukar data pada bila -bila masa. Tutorial ini akan menerangkan cara membuat aplikasi web masa nyata menggunakan WebSocket.

mata utama

API WebSocket yang diperkenalkan di HTML5 membolehkan pemaju membuat aplikasi masa nyata dengan mewujudkan sambungan soket yang berterusan antara penyemak imbas dan pelayan, membolehkan pelanggan dan pelayan bertukar data pada bila-bila masa.
Sangat mudah untuk membuka sambungan WebSocket, anda hanya perlu menghubungi pembina WebSocket (). Sambungan tetap dibuka sehingga klien atau pelayan memilih untuk menutupnya, dengan itu mengurangkan beban pada pelayan dan menyediakan penyelesaian terbaik untuk aplikasi latency rendah.
Data binari boleh dihantar dan diterima dalam bentuk gumpalan atau arraybuffer menggunakan kaedah Connection.Send (). Mesej yang diterima juga boleh menjadi rentetan atau data binari, yang diterima dalam bentuk gumpalan atau arraybuffer.
Membina aplikasi masa nyata menggunakan WebSocket memerlukan pelaksanaan sisi pelayan dan boleh dilakukan menggunakan pelbagai teknologi (seperti Node.js, Java, .NET, Ruby atau C). API WebSocket boleh digunakan untuk membuat aplikasi masa nyata yang kuat seperti kemas kini sosial masa nyata, permainan multiplayer HTML5, dan aplikasi sembang dalam talian.

Soalan

Dalam aplikasi masa nyata, sambungan antara pelayan dan klien mesti berterusan. Oleh itu, untuk mencipta ilusi bahawa pelayan memulakan penghantaran, pengundian panjang biasanya digunakan. WebSocket menyelesaikan masalah ini dengan mewujudkan sambungan soket yang berterusan antara klien dan pelayan. Sebaik sahaja sambungan itu ditubuhkan, ia akan terus dibuka sehingga klien atau pelayan mahu menutupnya. Ia sangat mengurangkan beban pada pelayan dan paling sesuai untuk aplikasi latency rendah.

pemula

Sangat mudah untuk membuka sambungan WebSocket. Anda hanya perlu memanggil pembina WebSocket () untuk membuat sambungan.

var connection = new WebSocket("ws://localhost:8787", ['soap', 'json']);

WS: dan WSS: Adakah corak URL untuk sambungan WebSocket yang normal dan selamat. Parameter kedua digunakan untuk menentukan nama subprotokol, yang boleh menjadi array rentetan atau rentetan. Walau bagaimanapun, pelayan hanya akan menerima satu subprotokol. Semasa kitaran hayat sambungan, penyemak imbas akan menerima pelbagai acara seperti pembukaan sambungan, penerimaan mesej dan penutupan sambungan. Untuk mengendalikan peristiwa ini, gunakan kod berikut:

var connection = new WebSocket("ws://localhost:8787", ['soap', 'json']);

Selepas sambungan dibuka, penyemak imbas akan menggunakan sambungan.send () untuk menghantar mesej ke pelayan. Jika ralat ditemui, kod di atas hanya merekodkannya. Jika pelayan menghantar mesej kepada penyemak imbas pada bila -bila masa, panggilan balik OnMessage akan dicetuskan. Pengendali acara memperoleh objek acara yang atribut datanya mengandungi mesej yang diterima. Kaedah sambungan.send () juga boleh digunakan untuk menghantar data binari. Untuk melakukan ini, anda boleh menggunakan gumpalan atau arraybuffer. Kod berikut menunjukkan cara menggunakan ArrayBuffer untuk menghantar imej yang ditarik pada kanvas ke pelayan.

var connection = new WebSocket("ws://localhost:8787", 'json');
connection.onopen = function() {
  connection.send('Hello, Server!!'); // 连接打开后向服务器发送消息。
};
connection.onerror = function(error) {
  console.log('Error Logged: ' + error); // 记录错误
};
connection.onmessage = function(e) {
  console.log('Received From Server: ' + e.data); // 记录接收到的消息
};

Begitu juga, mesej yang diterima boleh menjadi rentetan atau data binari. Data binari boleh diterima sebagai gumpalan atau arraybuffer.

Aplikasi WebSocket mudah

Untuk membuat aplikasi runnable, anda juga memerlukan pelaksanaan sisi pelayan. Anda boleh menggunakan Node.js, Java, .NET, Ruby atau C untuk membuat pelaksanaan sisi pelayan. Bahagian ini akan menunjukkan kepada anda cara membuat aplikasi mudah menggunakan WebSocket. Aplikasi sampel membolehkan pengguna bertanya soalan khusus kepada pelayan. Pelaksanaan sisi pelayan dilakukan menggunakan kerangka Java JWebsocket pada Windows 7. Oleh itu, untuk menubuhkan persekitaran, ikuti langkah -langkah mudah ini. Saya mengandaikan anda telah memasang JDK terbaru (JDK 7) pada PC Windows 7 anda.

Langkah 1

pergi ke halaman muat turun jwebsocket dan muat turun fail zip pertama yang ditandakan sebagai pelayan.

Langkah 2

Decompress arkib dan letakkan di suatu tempat di C:. Kemudian, buat pembolehubah persekitaran baru yang dipanggil jwebsocket_home yang merujuk direktori root pemasangan jwebsocket. Ini adalah jalan ke folder JWebsocket-1.0. Tambahkan balang berikut ke kelas anda:

• jwebsocket_home/libs/jwebsocketserver-1.0.jar
• jwebsocket_home/libs/jwebsocketserverapi-1.0.jar
• jwebsocket_home/libs/jwebsocketcommon-1.0.jar

Langkah 3

Buat fail sumber Java baru dan namakan socketListener.java. Tambah kod berikut ke fail ini. (Bahagian kod Java ditinggalkan di sini, kerana artikel itu terlalu panjang dan tidak sepadan dengan matlamat asal pseudo, jadi simpan keterangan logik teras)

Langkah 4

Susun socketListener.java dan mulakan pelayan menggunakan perintah Java SocketListener.

Langkah 5

Sekarang anda telah menyelesaikan pelaksanaan sisi pelayan, sudah tiba masanya untuk membuat klien yang akan berinteraksi dengan pelayan. (Bahagian kod HTML dan JavaScript ditinggalkan di sini, kerana artikel itu terlalu panjang dan tidak sepadan dengan matlamat asal pseudo, jadi anda hanya dapat mengekalkan keterangan logik teras)

Kesimpulan

Menggunakan API WebSocket, anda boleh membuat aplikasi masa nyata yang sangat kuat. Walau bagaimanapun, ingat bahawa WebSocket membolehkan komunikasi silang domain. Oleh itu, anda hanya perlu berkomunikasi dengan pelayan dan pelanggan yang anda percayai. Berikut adalah beberapa aplikasi sampel yang boleh anda buat menggunakan API ini:

• kemas kini sosial masa nyata
• HTML5 Multiplayer Game
• aplikasi sembang dalam talian

Lihat Rangkaian Pemaju Mozilla untuk maklumat lanjut mengenai API WebSocket. (Bahagian Soalan Lazim ditinggalkan di sini, kerana artikel itu terlalu panjang dan tidak sepadan dengan matlamat asal pseudo, jadi simpan keterangan logik teras)

Atas ialah kandungan terperinci Pengenalan kepada API WebSockets HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!