Fitur baru yang keren di HTML5 adalah WebSockets, yang memungkinkan kami untuk berbicara dengan server tanpa permintaan AJAX. Hari ini, Bingo akan memungkinkan semua orang menjalankan WebSocket melalui sisi server dari lingkungan PHP, membuat klien, dan mengirim dan menerima informasi sisi server melalui protokol WebSockets.
Apa Websockets?
WebSockets adalah teknologi yang melakukan komunikasi dua arah pada antarmuka (TCP), dan jenis teknologi push. Pada saat yang sama, Websockets masih akan didasarkan pada standar W3C.
Apa yang akan diganti Websockets? Websockets dapat menggantikan Panjang Polling (Teknologi Push Server PHP), yang merupakan konsep yang menarik. Klien mengirimkan permintaan ke server. lalu mengirimkan permintaan lain. Ini memiliki manfaatnya: mengurangi latensi pada kedua koneksi, dan tidak perlu membuat koneksi baru lain ketika satu koneksi sudah terbuka. Tetapi pemungutan suara yang panjang bukanlah teknik mewah, dan masih mungkin bahwa permintaan jeda akan terjadi, sehingga koneksi baru akan diperlukan.
Beberapa aplikasi AJAX menggunakan teknologi yang disebutkan di atas - yang sering dikaitkan dengan pemanfaatan sumber daya rendah.
Bayangkan saja betapa hebatnya jika server akan memulai dan mengirim data ke klien yang ingin menerima tanpa harus mengatur beberapa port koneksi terlebih dahulu! Selamat datang di dunia teknologi push!
Langkah 1: Dapatkan server WebSocket
Tutorial ini akan lebih fokus pada pembuatan klien daripada eksekusi server.
Saya menggunakan XAMPP berdasarkan Windows 7 untuk mengimplementasikan PHP yang berjalan secara lokal. PHPWebSockets adalah server Websocket PHP. (Dalam pengalaman saya, ada beberapa masalah kecil dengan versi ini. Saya telah membuat beberapa modifikasi untuk itu dan mengunggah file sumber untuk dibagikan dengan Anda.) Versi yang berbeda juga dapat mengimplementasikan WebSocket. versi lainnya. atau lanjutkan membaca tutorial di bawah ini.
JWebsocket (Java)
Web-Socket-Ruby (Ruby)
Soket io-node (node.js)
Mulai server Apache
Langkah 2: Modifikasi URL dan port
Menurut instalasi Anda sebelumnya, ubah server, berikut ini adalah contoh dalam setup.class.php:
| fungsi publik __construct ($ host = 'localhost', $ port = 8000, $ max = 100) { $ this-> createCocket ($ host, $ port); } |
Jelajahi file dan buat perubahan jika sesuai.
Langkah 3: Mulailah Membuat Klien
Ini file klien.php saya:
| <! Doctype html> <Html> <head> <Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <title> Websockets Client </iteme> </head> <body> <Div id = "wrapper"> <Div id = "container"> <h1> Klien Websockets </h1> <Div id = "chatlog"> </div> <!-#chatlog-> <p id = "Contoh"> misalnya coba 'hai', 'nama', 'usia', 'hari ini' </p> <input id = "text" type = "text" /> <tombol id = "Disconnect"> Disconnect </button> </div> <!-#container-> </div> </body> </html> |
Kami telah membuat templat dasar: wadah log obrolan, kotak input input dan tombol terputus.
Langkah 4: Tambahkan beberapa CSS
Tidak ada kode mewah, hanya berurusan dengan gaya tag.
tubuh { |
Langkah 5: Websocket
Acara Pertama mari kita coba dan pahami konsep acara WebSocket:
Acara Websocket:
Kami akan menggunakan tiga acara WebSocket:
Onopen: Saat antarmuka dibuka
OnMessage: Saat pesan diterima
Onclose: Saat antarmuka ditutup
Bagaimana kita mencapai ini?
Pertama buat objek WebSocket
var socket = WebSocket baru (& ldquo; ws: // localhost: 8000/socket/server/startdaemon.php & rdquo;);
Kemudian deteksi acara sebagai berikut
| socket.onopen = function () { waspada ("Soket telah dibuka!"); } |
Lakukan ini saat kami menerima pesan:
| socket.onmessage = function (msg) { waspada (msg); // mengagumkan! } |
Tetapi kami masih berusaha menghindari penggunaan peringatan, dan sekarang kami dapat mengintegrasikan apa yang telah kami pelajari ke dalam halaman klien.
Langkah 6: JavaScript
Pertama, kami memasukkan kode ke dalam dokumen. Fungsi jQuery, dan kemudian kami juga perlu memeriksa apakah browser pengguna mendukung WebSocket. Jika tidak didukung, kami akan menambahkan tautan ke halaman browser Chrome.
| $ (dokumen) .ready (function () { if (! ("WebSocket" di jendela)) { $ (' #chatlog, input, tombol, #examples'). fadeout ("fast"); $ ('<p> oh tidak, Anda memerlukan browser yang mendukung websockets. Bagaimana dengan <a href = "google'> http://www.google.com/chrome"> Google chrome </a>? </p > '). appendTo ('#container '); }kalau tidak{ // pengguna memiliki websockets menghubungkan(); fungsi connect () { // Kode fungsi koneksi di bawah ini } }); |
Seperti yang Anda lihat, jika browser pengguna mendukung WebSocket, kami akan menjalankan fungsi Connect (). Berikut adalah fungsi inti, kami akan mulai membuat acara yang terbuka, menutup dan menerima.
Kami akan mendefinisikan URL di server kami.
| var soket; var host = "ws: // localhost: 8000/socket/server/startdaemon.php"; |
Anda mungkin mengetahui mengapa tidak ada HTTP di URL? Ya, ini adalah URL Websocket yang menggunakan protokol yang berbeda.
Mari kita lanjutkan fungsi Connect () di bawah ini. Kami membuat Websocket dan meneruskan informasi ke fungsi pesan (), dan kami akan menjelaskannya nanti. Kami membuat fungsi OnOpen, OnMessage, dan Onclose kami. Perlu dicatat bahwa kami memberi pengguna status port, yang tidak perlu, tetapi kami memasukkannya terutama untuk kenyamanan debugging.
| Menghubungkan = 0 Buka = 1 Ditutup = 2 fungsi connect () { mencoba { var soket; var host = "ws: // localhost: 8000/socket/server/startdaemon.php"; var socket = WebSocket baru (host); pesan ('<p class = "event"> status soket:'+socket.readystate); socket.onopen = function () { pesan ('<p class = "event"> status soket:'+socket.readystate+'(terbuka)'); } socket.onmessage = function (msg) { pesan ('<p class = "pesan"> diterima:'+msg.data); } socket.onclose = function () { pesan ('<p class = "event"> status soket:'+socket.readystate+'(ditutup)'); } } catch (Exception) { pesan ('<p> kesalahan'+pengecualian); } } |
Fungsi pesan () sederhana, mengisi teks yang ingin kami sampaikan kepada pengguna ke dalam wadah log obrolan. Kami membuat kelas yang sesuai untuk tag paragraf (<p>) dalam fungsi acara Socket, dan kami hanya memiliki satu tag akhir paragraf dalam fungsi pesan.
| Pesan fungsi (msg) { $ ('#chatlog'). append (msg+'</p>'); } |
Hasil saat ini
Jika Anda telah mengikuti tutorial di atas langkah demi langkah, itu bagus, kami telah membuat templat HTML/CSS, membuat dan membuat koneksi WebSocket, dan menjaga kemajuan pengguna diperbarui dengan membuat koneksi.
Langkah 7: Kirim Data
Sekarang kami memiliki tombol kirim, tetapi kami masih perlu mendengarkan pengguna yang menekan acara keyboard dan menjalankan fungsi Kirim.
| $ ('#text'). Keypress (function (event) { if (event.keycode == '13') { mengirim(); } }); |
Berikut adalah fungsi Kirim ():
| fungsi kirim () { var text = $ ('#text'). val (); if (text == "") { pesan ('<p class = "peringatan"> Harap masukkan pesan'); kembali ; } mencoba { socket.send (teks); pesan ('<p class = "event"> terkirim:'+teks) } catch (Exception) { pesan ('<p class = "peringatan"> kesalahan:' + pengecualian); } $ ('#teks'). Val (""); } |
Di sini kita membutuhkan:
socket.send ();
Kode tambahan melakukan pekerjaan berikut: Mendeteksi apakah pengguna tidak memasukkan apa pun selain mengklik kembali, menghapus kotak input input, dan menjalankan fungsi pesan ().
Langkah 8: Tutup soket
Operasi untuk menutup soket cukup sederhana, cukup tambahkan acara klik ke tombol Putuskan untuk mendengarkan.
| $ ('#Disconnect'). Klik (function () { socket.close (); }); |
Lengkapi kode JavaScript
| $ (dokumen) .ready (function () { if (! ("WebSocket" di jendela)) { $ (' #chatlog, input, tombol, #examples'). fadeout ("fast"); $ ('<p> oh tidak, Anda memerlukan browser yang mendukung websockets. Bagaimana dengan <a href = "google'> http://www.google.com/chrome"> Google chrome </a>? </p > '). appendTo ('#container '); }kalau tidak{ // pengguna memiliki websockets menghubungkan(); fungsi connect () { var soket; var host = "ws: // localhost: 8000/socket/server/startdaemon.php"; mencoba { var socket = WebSocket baru (host); pesan ('<p class = "event"> status soket:'+socket.readystate); socket.onopen = function () { pesan ('<p class = "event"> status soket:'+socket.readystate+'(terbuka)'); } socket.onmessage = function (msg) { pesan ('<p class = "pesan"> diterima:'+msg.data); } socket.onclose = function () { pesan ('<p class = "event"> status soket:'+socket.readystate+'(ditutup)'); } } catch (Exception) { pesan ('<p> kesalahan'+pengecualian); } fungsi kirim () { var text = $ ('#text'). val (); if (text == "") { pesan ('<p class = "peringatan"> Harap masukkan pesan'); kembali ; } mencoba { socket.send (teks); pesan ('<p class = "event"> terkirim:'+teks) } catch (Exception) { pesan ('<p class = "warning">'); } $ ('#teks'). Val (""); } Pesan fungsi (msg) { $ ('#chatlog'). append (msg+'</p>'); } $ ('#text'). Keypress (function (event) { if (event.keycode == '13') { mengirim(); } }); $ ('#Disconnect'). Klik (function () { socket.close (); }); } // Akhiri koneksi } // Akhir yang lain }); |
Langkah 9: Saat menjalankan server WebSocket, kita perlu memasukkan beberapa baris perintah. Klik tombol "Shell" di panel kontrol XAMPP dan masukkan:
| PHP -Q PATH TO Server.php |
Sekarang Anda menjalankan server WebSocket!
Misi selesai!
Saat halaman dibaca, upaya akan dilakukan untuk membuat koneksi WebSocket, dan pengguna kemudian dapat memasukkan informasi dan menerimanya dari server. Terima kasih atas kesabaran Anda dalam membaca tutorial ini. Anda dapat mempelajari tentang perkembangan terbaru di Websocket HTML5 melalui WebSocket API.