Cara menggunakan soket php

Salah satu fitur baru yang paling keren dari HTML5 adalah WebSockets, yang memungkinkan kita berbicara dengan server tanpa menggunakan permintaan AJAX. Dalam tutorial ini, kita akan meninjau proses menjalankan server WebSocket di PHP, lalu membangun klien untuk mengirim dan menerima pesan melalui protokol WebSocket.

Table of Contents Show

Apa itu WebSocket?
Apa yang Diganti WebSockets?
Langkah 1. Dapatkan Server WebSocket
Mulai server Apache
Langkah 2. Ubah URL dan Port
Langkah 3. Mulai Membangun Klien
Langkah 4. Tambahkan Beberapa CSS
Langkah 5. Acara WebSocket
Langkah 6. JavaScript
Sangat jauh
Langkah 7. Mengirim Data
Langkah 8. Tutup Soket
JavaScript lengkap
Langkah 9. Menjalankan Server WebSocket
Apa gunanya soket dalam pemrograman?
Apa itu pemrograman soket?
Apa itu soket server?

Apa itu WebSocket?

WebSockets adalah teknik untuk komunikasi dua arah melalui soket tunggal (TCP), sejenis teknologi PUSH. Saat ini masih distandarisasi oleh W3C;

Apa yang Diganti WebSockets?

Soket web dapat menggantikan jajak pendapat panjang. Ini adalah konsep yang menarik; . Ini memiliki manfaat. penurunan latensi adalah salah satunya, karena koneksi yang telah dibuka tidak memerlukan pembuatan koneksi baru. Namun, jajak pendapat panjang sebenarnya bukan teknologi mewah. permintaan juga mungkin habis waktunya, dan dengan demikian koneksi baru masih diperlukan

Banyak aplikasi Ajax memanfaatkan hal di atas - hal ini sering dikaitkan dengan pemanfaatan sumber daya yang buruk

Bukankah lebih bagus jika server dapat bangun pada suatu pagi dan mengirim datanya ke klien yang bersedia mendengarkan tanpa koneksi yang telah ditentukan sebelumnya?

Langkah 1. Dapatkan Server WebSocket

Tutorial ini akan lebih fokus pada pengembangan klien daripada implementasi server

Saya menggunakan XAMPP pada Windows 7 untuk menjalankan server PHP secara lokal. Ambil salinan phpwebsockets yang merupakan server WebSocket di PHP. (Catatan. Saya mengalami beberapa masalah dengan versi ini, saya membuat beberapa perubahan dan akan memasukkannya ke dalam file sumber) Ada berbagai implementasi WebSocket;

jWebSocket (Java)
soket web-ruby (ruby)
Socket IO-node (node. js)

Mulai server Apache

Langkah 2. Ubah URL dan Port

Ubah server sesuai dengan pengaturan Anda, misalnya di setup. kelas. php

public function __construct($host='localhost',$port=8000,$max=100)
{
  $this->createSocket($host,$port);
}

Jelajahi seluruh file dan buat perubahan jika perlu

Langkah 3. Mulai Membangun Klien

Mari dapatkan template dasar; . 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</title>

</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div><!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div><!-- #container -->

</div>
</body>
</html>

Nah pada kode ini kita membuat template sederhana. kami memiliki kotak untuk log obrolan, kotak input, dan tombol akhiri

Langkah 4. Tambahkan Beberapa CSS

Tidak ada yang mewah, hanya beberapa elemen

body {
	font-family:Arial, Helvetica, sans-serif;
}
#container{
	border:5px solid grey;
	width:800px;
	margin:0 auto;
	padding:10px;
}
#chatLog{
	padding:5px;
	border:1px solid black;
}
#chatLog p {
	margin:0;
}
.event {
	color:#999;
}
.warning{
	font-weight:bold;
	color:#CCC;
}

Langkah 5. Acara WebSocket

Pertama, mari kita coba dan pahami ide acara WebSocket

Acara

Kami akan menggunakan tiga acara

membuka. Ketika soket telah dibuka
onmessage. Ketika pesan telah diterima
onclose. Ketika soket telah ditutup

Tapi bagaimana kita bisa menerapkan ini?

Pertama buat objek WebSocket

var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

Dan memeriksa acara sesederhana itu

socket.onopen = function(){
	alert("Socket has been opened!");
}

Tapi bagaimana ketika kita menerima pesan?

socket.onmessage = function(msg){
	alert(msg);	//Awesome!
}

Namun, mari hindari penggunaan kotak pengingat, dan benar-benar integrasikan apa yang telah kita pelajari ke dalam halaman klien

Langkah 6. JavaScript

Oke, jadi mari kita mulai. Pertama kita meletakkan kode kita di fungsi document ready dari jQuery, lalu kita periksa apakah pengguna memiliki browser yang mendukung WebSockets. Jika tidak, kami menambahkan tautan ke Chrome di HTML

$(document).ready(function() {
	if(!("WebSocket" in window)){
		$('#chatLog, input, button, #examples').fadeOut("fast");
		$('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
	}else{

	//The user has WebSockets

	connect();

	function connect(){
    	//the connect function code is below

	}
});

Seperti yang Anda lihat, jika pengguna memiliki WebSockets maka kita memanggil fungsi connect(). Ini adalah inti dari fungsinya. kita akan mulai dengan membuka, menutup, dan menerima acara

Kami akan menentukan URL server kami

var socket;
var host = "ws://localhost:8000/socket/server/startDaemon.php";

Tunggu, di mana

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>WebSockets Client</title>

</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div><!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div><!-- #container -->

</div>
</body>
</html>

_6 di URL itu? . Berikut ini rincian cuplikan URL kami

Mari lanjutkan dengan fungsi connect() kita. Kami akan menyertakan kode kami di blok try/catch; . Kami membuat WebSocket baru, dan meneruskan pesan ke fungsi pesan yang akan saya jelaskan nanti. Kami membuat fungsi onopen, onmessage, dan onclose kami. Perhatikan bahwa kami juga menampilkan status soket kepada pengguna;

MENGHUBUNG = 0
TERBUKA = 1
TUTUP = 2

function connect(){
    try{

	var socket;
	var host = "ws://localhost:8000/socket/server/startDaemon.php";
    var socket = new WebSocket(host);

        message('<p class="event">Socket Status: '+socket.readyState);

        socket.onopen = function(){
       		 message('<p class="event">Socket Status: '+socket.readyState+' (open)');
        }

        socket.onmessage = function(msg){
       		 message('<p class="message">Received: '+msg.data);
        }

        socket.onclose = function(){
       		 message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
        }			

    } catch(exception){
   		 message('<p>Error'+exception);
    }
}

Fungsi message() cukup sederhana, dibutuhkan beberapa teks yang ingin kita tampilkan ke pengguna dan ditambahkan ke chatLog. Kami membuat kelas yang cocok untuk tag paragraf di fungsi acara soket, itulah sebabnya hanya ada satu tag paragraf penutup di fungsi pesan

function message(msg){
	$('#chatLog').append(msg+'</p>');
}

Sangat jauh

Jika Anda telah mengikuti sampai titik ini, bagus sekali. Kami telah berhasil membuat template HTML/CSS dasar, membuat dan membangun koneksi WebSocket, dan terus memperbarui pengguna saat kemajuan dibuat dengan koneksi tersebut

Langkah 7. Mengirim Data

Sekarang alih-alih memiliki tombol kirim, kami dapat mendeteksi saat pengguna menekan kembali pada keyboard mereka, dan menjalankan fungsi kirim. Angka '13' yang Anda lihat di bawah adalah kunci ASCII untuk tombol enter

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>WebSockets Client</title>

</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div><!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div><!-- #container -->

</div>
</body>
</html>

Dan inilah fungsi send()

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>WebSockets Client</title>

</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div><!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div><!-- #container -->

</div>
</body>
</html>

Ingat apa yang Anda lihat di atas mungkin merupakan kode yang sedikit gemuk, tetapi pada kenyataannya, kode yang benar-benar kita butuhkan adalah

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>WebSockets Client</title>

</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div><!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div><!-- #container -->

</div>
</body>
</html>

Kode tambahan melakukan sejumlah hal. mendeteksi jika pengguna tidak memasukkan apa pun tetapi masih menekan kembali, mengosongkan kotak masukan, dan memanggil fungsi pesan

Langkah 8. Tutup Soket

Menutup soket cukup mudah. instal penangan klik ke tombol putuskan sambungan kami dan selesai

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>WebSockets Client</title>

</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div><!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div><!-- #container -->

</div>
</body>
</html>

JavaScript lengkap

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>WebSockets Client</title>

</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div><!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div><!-- #container -->

</div>
</body>
</html>

Langkah 9. Menjalankan Server WebSocket

Kami akan membutuhkan akses baris perintah. Untungnya, XAMPP memiliki opsi shell yang praktis. Klik 'Shell' pada panel kontrol XAMPP, dan ketuk

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>WebSockets Client</title>

</head>
<body>
<div id="wrapper">

    <div id="container">

        <h1>WebSockets Client</h1>

        <div id="chatLog">

        </div><!-- #chatLog -->
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

        <input id="text" type="text" />
        <button id="disconnect">Disconnect</button>

    </div><!-- #container -->

</div>
</body>
</html>

Anda sekarang telah memulai server WebSocket

Selesai

Saat halaman dimuat, koneksi WebSocket akan mencoba dibuat (coba edit kode sehingga pengguna memiliki opsi untuk menghubungkan/memutuskan). Kemudian, pengguna dapat memasukkan pesan dan menerima pesan dari server

Itu saja

Terima kasih sudah membaca; . Ingat, semenarik WebSockets, banyak hal bisa berubah. Anda dapat merujuk di sini untuk tetap mendapatkan informasi terbaru tentang W3C WebSocket API

Apa gunanya soket dalam pemrograman?

Penggunaan pemrograman soket memungkinkan komunikasi antara klien dan server. Salah satu contoh sederhana penggunaan pemrograman soket adalah membuat program untuk chatting. Program sebenarnya adalah sebuah bentuk aplikasi berupa komunikasi antar klien dan server.

Apa itu pemrograman soket?

Pemrograman soket adalah pemrograman yang menggunakan soket . Soket ini adalah sejenis terowongan yang dapat digunakan untuk komunikasi/perubahan arah bolak-balik.

Apa itu soket server?

ServerSocket, kelas ini adalah fitur khusus yang ditujukan untuk kelas server . Ketika klien tidak membutuhkan kelas. Socket adalah kelas yang digunakan oleh klien/ server , contoh dari Ini kelas adalah nilai kembalian dari metode accept() yang dimiliki oleh kelas ServerSocket.