Menjadi Real-Time dengan Pusher

Apakah Anda ingin membumbui aplikasi web Anda dengan membuat mereka real-time — tetapi tidak ingin membuat infrastruktur baru dengan tujuan mendapatkan web soket untuk bekerja? Dalam artikel ini, kita akan menjelajahi bagaimana menggunakan dan menerapkan Pusher, bertenaga HTML5 WebSocket real-time messaging service untuk aplikasi Anda.

Pengenalan

Apa itu WebSockets?

Menurut halaman WebSocket Wikipedia, WebSocket adalah sebuah teknologi yang menyediakan saluran komunikasi dua arah, full-duplex, atas soket TCP tunggal.

Dalam istilah awam, WebSockets memungkinkan klien dan server untuk berkomunikasi dalam dua arah. Hal ini memungkinkan server yang mengirim pesan ke klien, dan sebaliknya.

Bagaimana Apakah ini relevan dengan aplikasi web saya?

Selama bertahun-tahun, data kadaluarsa selalu menjadi masalah dengan aplikasi web, khususnya mereka yang memiliki beberapa orang masuk dan bekerja pada hal yang sama. Misalnya, dalam aplikasi manajemen proyek, pengguna kadang-kadang membuat item agenda yang anggota tim mereka menciptakan pada waktu yang sama. Dengan WebSockets, ini dapat dikurangi dengan memungkinkan server untuk push pemberitahuan untuk semua pihak yang terkait, memungkinkan browser untuk menerima data baru secara real-time. Akibatnya, sebelum membuat duplikat to-do item, Anda akan melihat bahwa seseorang sudah telah menciptakannya.

Apa itu Pusher?

Pusher adalah API host untuk cepat, mudah dan aman menambahkan fungsionalitas real-time scalable melalui WebSockets untuk web dan aplikasi mobile.

Pada dasarnya, Pusher merangkum implementasi WebSockets, fungsi, debugging, dan hosting untuk Anda.
Daripada harus menjalankan server WebSockets sendiri, hal ini memungkinkan Anda untuk offload seluruh proses untuk Pusher di server, menghemat waktu dan uang.

Pusher adalah API host untuk cepat, mudah dan aman menambahkan fungsionalitas real-time terukur melalui WebSockets untuk web dan aplikasi mobile.

Untuk Pusher untuk bekerja, Anda akan memerlukan sebuah klien Perpustakaan dan Perpustakaan penerbit. Perpustakaan klien digunakan dengan klien yang berinteraksi dengan aplikasi Anda. Ini mungkin sebuah browser (melalui JavaScript), sebuah iPhone app (melalui Objective-C), atau aplikasi Flash (melalui ActionScript). Penerbit Perpustakaan digunakan pada server Anda untuk mengirim event ke klien Anda.

Saat ini, Pusher memiliki perpustakaan klien untuk JavaScript, Objective-C, ActionScript, .NET dan Silverlight, Ruby dan Arduino. Ini memiliki penerbit perpustakaan untuk Node.js, Java, Groovy, Grails, Clojure, Python, VB.NET, C#, PHP, Ruby, Perl, dan ColdFusion.

Untuk tujuan dari tutorial ini, kita akan menggunakan JavaScript client Perpustakaan dan penerbit PHP perpustakaan. Pelaksanaan seharusnya tidak terlalu berbeda jika Anda menggunakan bahasa pemrograman lain.

Aku merasa seperti membangun sebuah widget live chat sehingga orang dapat chatting di real-time pada sebuah situs web. Dengan ini dalam pikiran, mari kita lanjutkan.

Menyiapkan Pusher

Langkah 1: Mendaftar untuk akun pengembang Pusher gratis

Untuk memulai, pergi ke website Pusher dan mendaftar untuk account Anda. Mereka menawarkan account gratis untuk pengguna rencana Sandbox, yang mencakup 20 koneksi dan 100.000 pesan per hari. Saat Anda siap, Anda selalu dapat upgrade rencana dibayar, tapi karena kami hanya akan menggunakannya untuk aplikasi contoh kita, rencana Sandbox gratis akan melakukan trik!

Pusher pendaftaran

Pada situs, klik tombol Sign Up bahwa Anda akan menemukan di sudut kanan atas dan masukkan rincian yang dibutuhkan. Setelah selesai, klik tombol Sign Up lagi untuk menyelesaikan pendaftaran Anda.

Langkah 2: Login untuk pertama kalinya

Setelah Anda mendaftar, Anda akan diarahkan ke halaman Pusher administrasi Anda. Ini adalah tempat Anda dapat mengelola semua aplikasi yang ambisius. Satu account dapat meng-host beberapa aplikasi.

Pusher admin.

Di atas, Anda memiliki bar navigasi Anda, mana Anda akan menemukan bagian berikut:

• Dashboard - ini adalah di mana Anda akan melihat aplikasi pendorong Statistik. Anda dapat melihat Message Rate (jumlah pesan yang dikirim per menit), Connection (jumlah membuka koneksi pada waktu tertentu), dan Messages (total pesan mengirim aplikasi Anda setiap hari).
• Edit - di sini, Anda dapat mengubah nama aplikasi saat ini dan memilih apakah atau tidak untuk menggunakan enkripsi SSL.
• API Access - ini berisi aplikasi Anda API Credential, yang kita akan membutuhkan kemudian.
• Debug - ini akan menampilkan semua peristiwa-peristiwa yang dipicu dan pesan dikirim oleh aplikasi pendorong ketika klien terhubung atau putus. Hal ini sangat berguna ketika mengembangkan aplikasi web Anda, karena Anda dapat melihat di sini persis apa Pusher kirim dan menerima dan siapa online untuk menerima mereka.
• Acara pencipta - ini adalah alat yang berguna untuk mengirimkan peristiwa tes untuk klien Anda terhubung — tanpa harus memicu peristiwa diri dari aplikasi web Anda.

Sekarang Anda siap untuk mulai mengembangkan dengan Pusher!

Pengembangan dengan Pusher

Langkah 1: Buat HTML, CSS, JavaScript, dan PHP

Mari kita mulai mengembangkan widget live chat kami dengan menciptakan HTML. Apa yang ada dalam pikiran adalah sebuah widget yang akan muncul di bagian bawah layar, "Who's Online" daftar di samping, seperti IRC.

1

<!DOCTYPE HTML>

2

<html>

3

<body>

4

  <div id="chat_widget_container">

5

		<div id="chat_widget_login">

6

			<label for="chat_widget_username">Name:</label>

7

			<input type="text" id="chat_widget_username" />

8

			<input type="button" value="Login!" id="chat_widget_login_button" />

9

			<img src="http://nettuts.s3.amazonaws.com/1059_pusher/loading.gif" alt="Logging in..." id="chat_widget_login_loader" />

10

		</div>

11

12

		<div id="chat_widget_main_container">

13

			<div id="chat_widget_messages_container">

14

				<div id="chat_widget_messages">

15

					chat messages go here

16

				</div>

17

			</div>

18

			<div id="chat_widget_online">

19

				<p>Who's Online (<span id="chat_widget_counter">0</span>)</p>

20

				<ul id="chat_widget_online_list">

21

					<li>online users go here</li>

22

				</ul>

23

			</div>

24

			<div class="clear"></div>

25

			<div id="chat_widget_input_container">

26

				<form method="post" id="chat_widget_form">

27

					<input type="text" id="chat_widget_input" />

28

					<input type="submit" value="Chat" id="chat_widget_button" />

29

					<img src="http://nettuts.s3.amazonaws.com/1059_pusher/loading.gif" alt="Sending..." id="chat_widget_loader" />

30

				</form>

31

			</div>

32

		</div>

33

	</div>

34

</body>

35

</html>

Beberapa CSS untuk style HTML kita:

1

#chat_widget_container{padding:20px 20px 5px 20px; background-color:#F2F2F2; border:5px solid #AFAFAF; 

2

border-bottom:0px; width:333px; font-size:11px; font-family:"Lucida Grande",Arial,Helvetica,sans-serif;

3

position:fixed; bottom:0px; right:20px}

4

5

#chat_widget_login{width:333px; text-align:center; height:166px; margin-top:80px}

6

7

#chat_widget_main_container{display:none}

8

9

#chat_widget_messages_container{float:left; width:200px; border:1px solid #DDD; height:200px; overflow:auto;

10

padding:5px; background-color:#FFF; position:relative}

11

12

#chat_widget_messages{overflow-x:hidden; overflow-y:auto; position:absolute; bottom:0px}

13

14

#chat_widget_online{width:100px; height:210px; float:left; padding:0px 10px; border:1px solid #DDD;

15

border-left:0px; background-color:#FFF; overflow: auto;}

16

17

#chat_widget_online_list{list-style:none; padding:0px}

18

19

#chat_widget_online_list >li{margin-left:0px}

20

21

#chat_widget_input_container{margin-top:10px; text-align:left}

22

23

#chat_widget_input{width:260px; margin-right:10px; border:1px solid #DDD; padding:2px 5px}

24

25

#chat_widget_loader{display:none}

26

27

#chat_widget_login_loader{display:none}

28

29

.clear{clear:both}

Gabungan HTML dan CSS di atas harus membuat sesuatu seperti ini:

Demo Login

Kita harus membuat sebuah fungsi yang memicu ketika kita klik tombol Login dan cek nilai yang dimasukkan, jadi mari kita melakukannya:

1

$('#chat_widget_login_button').click(function() {

2

	$(this).hide(); //hide the login button

3

	$('#chat_widget_login_loader').show(); //show the loader gif

4

	username = $('#chat_widget_username').val(); //get the username

5

	username = username.replace(/[^a-z0-9]/gi, ''); //filter it

6

	if( username == '' ) { //if blank, then alert the user

7

		alert('Please provide a valid username (alphanumeric only)');

8

	} else { //else, login our user via start_session.php

9

		ajaxCall('start_session.php', { username : username }, function() {

10

			//We're logged in! Now what?

11

		});

12

	}

13

});

Selanjutnya, kita perlu memberitahu server ketika kita telah masuk. Untuk melakukan ini, kami akan membuat sebuah file start_session.php yang pada dasarnya akan login pengguna.

1

<?php

2

//Start a PHP session

3

session_start();

4

5

//Get the username sent from the user

6

$username = $_REQUEST['username'];

7

8

//filter it

9

$username = trim(filter_var($username, FILTER_SANITIZE_STRING, FILTER_FLAG_NO_ENCODE_QUOTES));

10

11

//set the username for the session

12

$_SESSION['username'] = $username;

13

14

//set a unique id for the user. since we don't have a working user system, we'll just use the time()

15

//variable to generate a unique id, and add the user's name to it and the user's session id, then 

16

//MD5 the whole thing

17

$_SESSION['userid'] = md5(time() + '_' + $username + '_' + session_id());

18

19

//echo the json_encoded success message for our ajax call

20

echo json_encode(array('success' => true));

21

exit();

22

?>

Anda akan melihat bahwa saya telah membuat sebuah fungsi ajaxCall, yang pada dasarnya hanya membungkus di sekitar jQuery $Ajax fungsi. Hanya menambahkan ini sebelum baris $(document).ready().

1

function ajaxCall(ajax_url, ajax_data, successCallback) {

2

	$.ajax({

3

		type : "POST",

4

		url : ajax_url,

5

		dataType : "json",

6

		data: ajax_data,

7

		time : 10,

8

		success : function(msg) {

9

			if( msg.success ) {

10

				successCallback(msg);

11

			} else {

12

				alert(msg.errormsg);

13

			}

14

		},

15

		error: function(msg) {

16

		}

17

	});

18

}

Sekarang, mari kita memuat Perpustakaan Pusher JavaScript dan jQuery juga. Tempat script berikut referensi dalam<head>HTML Anda:

1

<script src="http://js.pusherapp.com/1.9/pusher.min.js"></script>

2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Langkah 2: Perhatikan kredensial API

Ingat halaman akses API dari atas? Kembali ke sana dan mencatat kredensial API. Kita akan membutuhkan nilai-nilai ini ketika kami mendirikan Perpustakaan klien dan penerbit.

Kredensial Pusher API

Merasa bebas untuk menggunakan punya saya, namun, saya sangat menyarankan Anda mendapatkan Anda sendiri, karena account gratis terbatas dan Anda mungkin memotong midstream.

Langkah 3: Menerapkan kode Pusher

Sebelum kita mulai menerapkan Pusher ke dalam aplikasi kita, kita perlu memahami istilah-istilah Pusher:

• Channel - cara membedakan stream data di dalam aplikasi. Aplikasi dapat memiliki beberapa channel dan satu channel dapat memiliki beberapa klien. Kita dapat membandingkan ini dengan chat room di IRC — semua pesan yang dikirim ke ruang chat tertentu dapat dilihat oleh semua orang yang berada di dalam.
• Events - ini adalah sama dengan server mengirimkan data ke klien sehingga Anda dapat melihat pesan di chat room. Event dipicu oleh penerbit Perpustakaan, dan pelanggan dapat berlangganan untuk event ini. Dalam analogi kita, berlangganan ke event ini mirip mendengarkan ketika orang mengobrol di kamar dan memperhatikan apa yang mereka katakan.

Ada tiga jenis channel:

• Public channel - chnaeel yang siapa pun dapat berlangganan ke, selama mereka tahu nama channel.
• Private Channel - chaneel yang hanya authentikasi pengguna dapat berlangganan.
• Presence channes - mirip dengan private channel, tetapi juga memungkinkan kami untuk memberitahu klien lain terhubung dengan informasi tentang klien yang menghubungkan. Kita akan menggunakan saluran ini di widget obrolan kami.

Presence channel khusus karena mereka membiarkan kami mengirimkan informasi tentang pengguna ketika mereka terhubung. Mereka juga memiliki event khusus yang kita dapat berlangganan untuk mengetahui bila pengguna menghubungkan dan memutuskan hubungan. Presence Channel ideal untuk private channel yang aman, yang perlu tahu Kapan pengguna masuk atau keluar.

Tersambung ke layanan Pusher

Mari kita mulai dengan menghubungkan klien kami untuk layanan Pusher. Untuk melakukannya, kita akan perlu membuat sebuah instance baru dari objek Pusher (dari perpustakaan), dan memanggil fungsi subscribe. Tambahkan kode berikut setelah //We're login! Now what? komentar.

Fungsi Subscribe pada dasarnya membuat klien bergabung dengan channel. setelah di dalam channel, klien akan menerima evebt yang terjadi di dalamnya.

1

pusher = new Pusher('12c4f4771a7f75100398'); //APP KEY

2

Pusher.channel_auth_endpoint = 'pusher_auth.php'; //override the channel_auth_endpoint

3

nettuts_channel = pusher.subscribe('presence-nettuts'); //join the presence-nettuts channel

Apa itu "channel_auth_endpoint"?

Ketika berlangganan presence atau channel private, kita perlu memastikan bahwa pengguna menghubungkan diizinkan untuk mengakses channel. Oleh karena itu, sebelum membiarkan klien sepenuhnya terhubung ke itu, pendorong klien secara otomatis membuat panggilan ke URL yang didefinisikan dalam variabel channel_auth_endpoint dan mengirimkan informasi tentang cara menyambungkan pengguna. Kemudian, melalui channel_auth_endpoint, kita dapat mengetahui jika pengguna yang terhubung itu terauthentikasi.

Secara default, panggilan ini dibuat untuk /pusher/auth, tetapi kita dapat mengganti dengan mengeset variabel channel_auth_endpoint.

socket_id unik yang dihasilkan dan dikirim ke browser pusher. Ketika usaha yang dibuat untuk berlangganan untuk private atau presence-chaneel socket_id dan channel_name yang dikirim ke aplikasi Anda, (1) melalui pos AJAX request yang kewenangan kepada pengguna untuk mengakses channel terhadap sistem otentikasi yang ada. Jika berhasil aplikasi Anda mengembalikan string otorisasi ke browser ditandatangani dengan Pusher secret Anda. Ini dikirim ke Pusher atas WebSocket, yang melengkapi otorisasi (2) jika string otorisasi cocok.

Kembali ke aplikasi kita, kita perlu membuat channel_auth_endpoint kami. Buat file, bernama pusher_auth.php dan tempat ini didalamnya:

1

<?php

2

//Start the session again so we can access the username and userid

3

session_start();

4

5

//include the pusher publisher library

6

include_once 'Pusher.php';

7

8

//These values are automatically POSTed by the Pusher client library

9

$socket_id = $_POST['socket_id'];

10

$channel_name = $_POST['channel_name'];

11

12

//You should put code here that makes sure this person has access to this channel

13

/*

14

if( $user->hasAccessTo($channel_name) == false ) {

15

	header('', true, 403);

16

	echo( "Not authorized" );

17

	exit();

18

}

19

*/

20

21

$pusher = new Pusher(

22

	'12c4f4771a7f75100398', //APP KEY

23

	'51399f661b4e0ff15af6', //APP SECRET

24

	'8896' //APP ID

25

);

26

27

//Any data you want to send about the person who is subscribing

28

$presence_data = array(

29

	'username' => $_SESSION['username']

30

);

31

32

echo $pusher->presence_auth(

33

	$channel_name, //the name of the channel the user is subscribing to 

34

	$socket_id, //the socket id received from the Pusher client library

35

	$_SESSION['userid'],  //a UNIQUE USER ID which identifies the user

36

	$presence_data //the data about the person

37

);

38

exit();

39

?>

Sekarang bahwa kami dapat mengotentikasi pengguna menghubungkan kami, kita akan perlu untuk mengikat beberapa fungsi JavaScript pusher event untuk menunjukkan bahwa kami telah sudah masuk. Memperbarui kode di bawah //We're logged in! Now What? Komentar, seperti:

1

//We're logged in! Now what?

2

pusher = new Pusher('12c4f4771a7f75100398'); //APP KEY

3

Pusher.channel_auth_endpoint = 'pusher_auth.php'; //override the channel_auth_endpoint

4

nettuts_channel = pusher.subscribe('presence-nettuts'); //join the presence-nettuts channel

5

6

pusher.connection.bind('connected', function() { //bind a function after we've connected to Pusher

7

	$('#chat_widget_login_loader').hide(); //hide the loading gif

8

	$('#chat_widget_login_button').show(); //show the login button again

9

10

	$('#chat_widget_login').hide(); //hide the login screen

11

	$('#chat_widget_main_container').show(); //show the chat screen

12

13

	//here, we bind to the pusher:subscription_succeeded event, which is called whenever you

14

	//successfully subscribe to a channel

15

	nettuts_channel.bind('pusher:subscription_succeeded', function(members) {

16

		//this makes a list of all the online clients and sets the online list html

17

		//it also updates the online count

18

		var whosonline_html = '';

19

		members.each(function(member) {

20

			whosonline_html += '<li class="chat_widget_member" id="chat_widget_member_' + 

21

			member.id + '">' + member.info.username + '</li>';

22

		});

23

		$('#chat_widget_online_list').html(whosonline_html);

24

		updateOnlineCount();

25

	});

26

27

	//here we bind to the pusher:member_added event, which tells us whenever someone else

28

	//successfully subscribes to the channel

29

	nettuts_channel.bind('pusher:member_added', function(member) {

30

		//this appends the new connected client's name to the online list

31

		//and updates the online count as well

32

		$('#chat_widget_online_list').append('<li class="chat_widget_member" ' +

33

		'id="chat_widget_member_' + member.id + '">' + member.info.username + '</li>');

34

		updateOnlineCount();

35

	});

36

37

	//here, we bind to pusher:member_removed event, which tells us whenever someone

38

	//unsubscribes or disconnects from the channel

39

	nettuts_channel.bind('pusher:member_removed', function(member) {

40

		//this removes the client from the online list and updates the online count

41

		$('#chat_widget_member_' + member.id).remove();

42

		updateOnlineCount();

43

	});

44

});

Ingat untuk menambahkan updateOnlineCount(); fungsi di atas baris $(document).ready():

1

function updateOnlineCount() {

2

	$('#chat_widget_counter').html($('.chat_widget_member').length);

3

}

Penjelasan tentang apa yang baru saja kita tambahkan

Fungsi pusher.connection.bind memungkinkan kita untuk mengikat fungsi callback setiap kali perubahan status sambungan pusher. Ada banyak kemungkinan status, seperti initialized, connection, unavailable, failed dan disconnected. Kami tidak akan menggunakan mereka dalam tutorial ini, tetapi Anda dapat membaca lebih lanjut tentang mereka dalam dokumentasi Pusher.

Fungsi channel_name.bind memungkinkan kita untuk mengikat fungsi untuk event tertentu yang mungkin terjadi di dalam channel. Secara default, presence channel memiliki event mereka sendiri yang kita dapat mengikat fungsi untuk, seperti event pusher:subscription_succeeded yang kami di atas. Anda dapat membaca lebih lanjut tentang mereka dalam dokumentasi presence event klien.

Mari kita menguji app sekarang dan melihat apa yang terjadi. Untuk melakukannya, buka dua tab dari aplikasi Anda dan masuk dua kali. Anda harus melihat sesuatu seperti ini:

Tes pertama

Ketika Anda menutup satu tab, kedua klien menutup juga, memicu event pusher:member_removed kami, dan mengeluarkan klien dari daftar online:

Tes kedua

Sekarang bahwa itu bekerja, kami akhirnya dapat mengimplementasikan fungsionalitas core dari aplikasi kita-live chat.

Menerapkan fungsi live chat

Mulailah dengan mengikat fungsi untuk event yang menyerahkan form obrolan kami:

1

$('#chat_widget_form').submit(function() {

2

  var chat_widget_input = $('#chat_widget_input'),

3

  		chat_widget_button = $('#chat_widget_button'),

4

  		chat_widget_loader = $('#chat_widget_loader'),

5

6

  		message = chat_widget_input.val(); //get the value from the text input

7

8

	chat_widget_button.hide(); //hide the chat button

9

	chat_widget_loader.show(); //show the chat loader gif

10

11

	ajaxCall('send_message.php', { message : message }, function(msg) { 

12

		//make an ajax call to send_message.php

13

		chat_widget_input.val(''); //clear the text input

14

		chat_widget_loader.hide(); //hide the loader gif

15

		chat_widget_button.show(); //show the chat button

16

17

		newMessageCallback(msg.data); //display the message with the newMessageCallback function

18

	});

19

20

	return false;

21

});

newMessageCallback fungsi:

1

function newMessageCallback(data) {

2

	if( has_chat == false ) { //if the user doesn't have chat messages in the div yet

3

		$('#chat_widget_messages').html(''); //remove the contents i.e. 'chat messages go here'

4

		has_chat = true; //and set it so it won't go inside this if-statement again

5

	}

6

7

	$('#chat_widget_messages').append(data.message + '<br />');

8

}

Setelah itu, kita harus membuat send_message.php untuk menerima panggilan AJAX kami dari atas dan memicu event new_message:

1

<?php

2

//Start the session again so we can access the username

3

session_start();

4

5

//include the pusher publisher library

6

include_once 'Pusher.php';

7

8

$pusher = new Pusher(

9

	'12c4f4771a7f75100398', //APP KEY

10

	'51399f661b4e0ff15af6', //APP SECRET

11

	'8896' //APP ID

12

);

13

14

//get the message posted by our ajax call

15

$message = $_POST['message'];

16

17

//trim and filter it

18

$message = trim(filter_var($message, FILTER_SANITIZE_STRING, FILTER_FLAG_NO_ENCODE_QUOTES));

19

20

//wrap it with the user's name when we display

21

$message = "<strong>&lt;{$_SESSION['username']}&gt;</strong> {$message}";

22

23

//trigger the 'new_message' event in our channel, 'presence-nettuts'

24

$pusher->trigger(

25

	'presence-nettuts', //the channel

26

	'new_message', //the event

27

	array('message' => $message) //the data to send

28

);

29

30

//echo the success array for the ajax call

31

echo json_encode(array(

32

	'message' => $message,

33

	'success' => true

34

));

35

exit();

36

?>

Anda mungkin bertanya-tanya mengapa kami disarikan newMessageCallback ke dalam fungsi tersendiri. Yah, kita bisa menyebutnya lagi ketika kita menerima event new_message dari Pusher. Kode berikut mengikat fungsi sebuah acara yang disebut new_message, yang akan memicu setiap kali pengguna mengirim pesan. Tambahkan kode ini setelah blok kode nettuts_channel.bind('pusher:member_removed'):

1

nettuts_channel.bind('new_message', function(data) {

2

	newMessageCallback(data);

3

});

data variabel dalam fungsi binding di atas akan mengirimkan data server dalam panggilan $pusher->trigger(), yang harus berisi data message.

Pengujian

Mari kita coba kami app lagi dengan dua browser, bukan tab. (Atau mencobanya dengan seorang teman jika Anda upload di suatu tempat.)

Halo teman!

Selamat! Anda telah berhasil membuat sebuah aplikasi bekerja menggunakan Pusher.

Kesimpulan

Di sana Anda memilikinya, aplikasi real-time yang didukung oleh Pusher. Jangan ragu untuk mengunjungi demo live chat yang sudah disetup di sini.

Ada lebih banyak yang saya tidak bahas dalam tutorial ini, seperti debug aplikasi Anda, excluding penerima dari event, dan memicu event sisi klien, tetapi Anda dapat belajar ini hanya dengan membaca dokumentasi pusher. Anda bahkan dapat memeriksa showcase website mereka dan aplikasi yang menggunakan Pusher untuk bekerja secara real-time.

Tutorial ini hanya goresan permukaan Pusher dan WebSockets secara umum. Dengan teknologi semacam ini, apa yang dapat Anda lakukan hanya dibatasi oleh apa yang dapat Anda bayangkan membuat sesuatu.

Apakah Anda mencoba membuat sesuatu dengan pendorong, atau apakah Anda berencana untuk melakukannya segera? Beritahu saya di komentar!

Catatan: Pendorong telah meminta kami untuk mengatur ulang kredensial API yang digunakan oleh akun demo pada tutorial ini sebagai tindakan pencegahan untuk itu diperlakukan. Saya minta maaf kepada kalian dan mudah-mudahan Anda hanya bisa mendapatkan Anda sendiri :) Terima kasih!