实时通信 | pusher 入门教程（一）

2022-01-29 01:03:21 阅读：152 来源： 互联网

标签：Web pusher 入门教程实时 my event channel 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 production
    Pusher.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);

运行以上脚本代码

客户端弹框提示

标签：Web,pusher,入门教程,实时,my,event,channel,Pusher
来源： https://www.cnblogs.com/tinywan/p/15854177.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

实时通信 | pusher 入门教程（一）

介绍

入门参考

（1）在客户端订阅事件

（2）从服务器发布事件