“練習3-1”演示了使用Pusher接收事件是多么容易，但是發(fā)送事件又如何呢？

由于Pusher有豐富的API庫，因此發(fā)送事件和接收事件一樣容易。我們將使用PHP的API庫。該庫托管在GitHub服務上，地址為https://github.com/pusher/pusher-php-server。

練習3-2　使用Pusher發(fā)布和訂閱

為了熟悉Pusher的服務器端功能，讓我們構建一個簡單的信息系統(tǒng)。

我們將重用第2章中使用過的HTML和CSS的大部分內(nèi)容并以它們作為基礎，以節(jié)約時間。創(chuàng)建新的HTML文件，并輸入下列內(nèi)容：

該代碼創(chuàng)建了一個接收名字和信息的簡單的表單。同時以無序列表的形式顯示所有接收到的信息。

接著，我們添加一些CSS。創(chuàng)建文件夾styles，并在其中添加新文件layout.css。該文件已經(jīng)連接到前面創(chuàng)建的HTML文件中了。在新的CSS文件中添加下面的代碼：

在瀏覽器中載入HTML文件，你將看到有CSS樣式的標記(見圖3-5)。

現(xiàn)在你已經(jīng)有了一個頁面。該頁面包括一個有用戶界面的區(qū)域，可以用來發(fā)送和接收消息。這樣，我們可以開始通過發(fā)布和訂閱添加一些實時功能。在HTML中，我們知道表單會將條目提交到文件post.php，現(xiàn)在我們開始創(chuàng)建那個文件，并包括Pusher的PHP庫。

從https://github.com/pusher/pusher-php-server下載Pusher的PHP庫，并將lib文件夾復制到HTML文件所在的同一文件夾下。

在保存后，可以開始在post.php中添加幾行代碼來創(chuàng)建一個新的Pusher對象并發(fā)送數(shù)據(jù)。

前兩行打開錯誤報告，以使調(diào)試更加容易。(在用于發(fā)布的網(wǎng)站版本中，可以將其關閉。)接下來，包括Pusher的PHP庫，并定義應用程序的證書(請不要忘記使用自己的證書來替換)，并實例化一個Pusher對象并存儲在變量$pusher中。

接下來，腳本檢查兩個需要的表單值：name和message。如果它們存在，將它們存儲在數(shù)組中。接著，用trigger方法將數(shù)組傳遞給Pusher，則會觸發(fā)在“練習3-2”中那個通道的send-message事件。事件數(shù)據(jù)將以JSON的形式傳遞給trigger方法，而對JSON的處理由庫為我們執(zhí)行。

到此為止，提交表單會引起Pusher發(fā)送事件。然而，在我們看到應用程序的效果前，我們需要用JavaScript添加一個事件處理程序。首先，我們還是先用Pusher調(diào)試控制臺手動檢查一下，確認事件可以觸發(fā)(見圖3-6)。

為了在應用程序中以可視化的方式顯示這一消息，我們需要編寫JavaScript來連接Pusher、訂閱通道并綁定事件。

我們的HTML文件包括一個稱為init.js的腳本。因此，讓我們在scripts文件夾下創(chuàng)建那個文件。在該腳本文件中，我們將添加兩個代碼塊，一個會偵聽服務器端腳本觸發(fā)的事件，另一個會捕獲提交的表單并在不刷新頁面的情況下將它們提交給post.php。首先，讓我們?yōu)樽远x的Pusher事件添加一個事件偵聽器：

使用我們的應用程序密鑰創(chuàng)建了一個新的Pusher對象。(與之前一樣，別忘了使用自己的密鑰。)接著，我們訂閱了在“練習3-2”中的服務器端使用的通道。

接下來，我們要對那個通道綁定事件處理程序并捕獲send-message事件。觸發(fā)該事件時，我們將無序列表的消息顯示，并確保去除其中用做占位符的消息。接著，將新消息添加到列表的尾部。

重新載入頁面會失去應用程序之前用JavaScript從瀏覽器添加的所有消息。為了避免重新載入頁面，我們需要添加第二個代碼塊來捕獲表單提交，并通過AJAX提交它們，而不使用頁面刷新。插入下面的粗體代碼來添加這一功能：

這個代碼捕獲submit事件，并將序列化的表單數(shù)據(jù)發(fā)送給post.php，同時清空消息輸入。它保留name字段，使得重復的消息更易發(fā)送。在最后，它還將顯示的焦點移回消息輸入的末尾。

通過返回false，可以防止提交默認的表單，以阻止頁面重新載入。

現(xiàn)在你已經(jīng)可以測試該應用程序了。在瀏覽器中載入HTML文件，并發(fā)送一兩條消息。正如預期的一樣，會在右邊的列表上顯示。但是這還不是最激動人心的部分。

為了查看實時的威力，可以在兩種不同的瀏覽器(或同一瀏覽器的兩個窗口)上載入測試，開始發(fā)送一些消息。在沒有輪詢或頁面刷新的情況下，你會看到一個窗口的事件會影響另一個窗口的顯示(見圖3-7)。這就是實時。

總結

以上是生活随笔為你收集整理的pusher 创建新应用_3.5　使用Pusher发送事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。