Pendahuluan Artikel WebJX: 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 dua arah di antarmuka (TCP)
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. Sejauh ini, versi terbaru browser Chrome dan Safari telah mendukung websockets.
Apa yang akan diganti Websockets?
Websockets dapat menggantikan Panjang Polling (Teknologi Push Server PHP), yang merupakan konsep yang menarik. Klien mengirimkan permintaan ke server. Sekarang, server tidak akan menanggapi data yang belum disiapkan. Ini akan menjaga koneksi tetap terbuka sampai data terbaru siap dikirim. Setelah itu, klien menerima data dan kemudian mengirim 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 berbeda berikut juga dapat mengimplementasikan WebSocket. Jika tidak dapat digunakan, Anda dapat mencoba versi lain atau terus membaca tutorial berikut.
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:
}
Jelajahi file dan buat perubahan jika sesuai.
Langkah 3: Mulailah Membuat Klien
Ini file klien.php saya:
> <>
>
>
>
> misalnya coba 'hai', 'nama', 'usia', 'hari ini'>
> Putuskan sambungan >>
</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
abu-abu
}
Langkah 5: Acara Websocket
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
Kemudian deteksi acara sebagai berikut
stopkontak.
}
Lakukan ini saat kami menerima pesan:
socket.msgmsg); //Luar biasa!
}
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.
$
jendela
$.
$.
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.
Anda mungkin mengetahui mengapa tidak ada HTTP di URL? Ya, ini adalah URL Websocket yang menggunakan protokol yang berbeda. Berikut adalah diagram kerusakan URL: