实时通信 | pusher 入门教程（一）
介紹
實時通信是Web開發的圣杯，由于有了Web Sockets API，我們終于能夠將其整合到我們的應用程序中。 但是，與大多數瀏覽器API一樣，Web Sockets API的級別也很低，如果您花了很多時間使用它，那么您就會知道有效使用它會有多么困難。
但是，今天，我們口袋里有超級計算機，每天都可以使用，而且用戶希望在Web，移動設備甚至臺式機上都能獲得相同的實時體驗。 在本系列中，您將學習Channels ，該平臺可讓您為用戶提供所需的無縫實時體驗。
入門參考
場景：
1、JavaScript 作為客戶端訂閱頻道
2、PHP 作為服務端發布消息到頻道
(1)在客戶端訂閱事件
創建賬號
創建一個帳戶，然后創建一個 Channels 應用程序。轉到該應用程序的“密鑰”頁面，并記下您的 app_id、密鑰、密鑰和集群。
下載頻道客戶端
在您的頁面上包含 pusher-js 腳本標簽。
<script src="https://js.pusher.com/7.0.3/pusher.min.js"></script>打開與頻道的連接
使用您之前記下的密鑰和集群打開與 Channels 的連接。
var pusher = new Pusher("APP_KEY", {cluster: "APP_CLUSTER", });訂閱頻道
您將很快將一個事件發布到一個名為 my-channel 的頻道，并且您的 Web 應用程序將收到此事件。但要接收此事件，您的 Web 應用首先需要訂閱 my-channel 頻道。使用 pusher.subscribe 執行此操作：
var channel = pusher.subscribe("my-channel");監聽頻道上的事件
每個發布的事件都有一個“事件名稱”。 您將發布的事件將具有事件名稱 my-event。 為了讓您的 Web 應用程序在收到名為 my-event 的事件時執行某些操作，您的 Web 應用程序必須首先將一個函數“bind”到此事件名稱。 使用通道的綁定方法執行此操作：
channel.bind("my-event", (data) => {// Method to be dispatched on trigger. });最后完整的代碼
<!DOCTYPE html> <head><title>Pusher Test</title><script src="https://js.pusher.com/7.0/pusher.min.js"></script><script>// Enable pusher logging - don't include this in productionPusher.logToConsole = true;var pusher = new Pusher('108365f54d1d934e7678', {cluster: 'ap3'});var channel = pusher.subscribe('my-channel');channel.bind('my-event', function(data) {alert(JSON.stringify(data));});</script> </head> <body><h1>Pusher Test</h1><p>Try publishing an event to channel <code>my-channel</code>with event name <code>my-event</code>.</p> </body>(2)從服務器發布事件
使用下面的服務器代碼向您訂閱的客戶端發布一個事件，您打開的任何(和所有)客戶端都會收到該事件，包括此頁面。
安裝服務端SDK
composer require pusher/pusher-php-server
目錄結構
參考偽代碼 server.php
<?php /*** @desc pusher server* @author Tinywan(ShaoBo Wan)* @date 2022/01/29 23:02*/ require_once '../../vendor/autoload.php';$options = array('cluster' => 'ap3','useTLS' => true ); $pusher = new Pusher\Pusher('108365f54d1d934e7678','9cfbfd3b06290c427de6','1339434',$options );$data['message'] = 'hello world Tinywan'; $pusher->trigger('my-channel', 'my-event', $data);運行以上腳本代碼
客戶端彈框提示
總結
以上是生活随笔為你收集整理的实时通信 | pusher 入门教程（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【Ubuntu】检测内存并压力测试
- 下一篇： 解决数字和英文字母结合检索出现高亮重复问