实时通信 | pusher 入门教程(二、三)

Part1什么是频道?

在编写实时应用程序时,您需要的是可在所有支持的平台上的所有应用程序中使用(和重用)的基础结构。编写该基础结构会很有趣,但是如果您像我一样,您的工作就是构建和生产应用程序-您没有时间推出自己的实时解决方案。

您真正需要的是类似Pusher的名为“ Channels”的产品。Channels是一个平台,它具有将实时通信纳入所有Web,移动和桌面应用程序所需的一切。

通道使用其简单的基于事件的API提供灵活的发布和订阅消息传递。

通过使用它们广泛的服务器库,您可以从服务器应用程序触发事件,并在客户端上监听这些事件。

1特征

频道不仅仅是发布和订阅消息。

您可以创建和使用私人频道,以便只有授权用户才能订阅它们。这意味着您需要对用户进行身份验证,并且可以将Channels身份验证与自己的身份验证方案无缝集成。

您还可以创建专用的专用渠道,称为在线渠道,让您看到订阅了特定渠道的用户,这使得构建协作应用程序,游戏以及您需要知道谁的任何其他类型的应用程序变得异常容易。

实时通信 | pusher 入门教程(二、三)

作为平台,渠道可为您提供监视指标和警报所需的一切。您可以查看有关通过通道发送的消息的各种度量标准,例如消息数,消息类型和大小。您还将获得有关连接以及客户端如何连接到您的应用程序和Channels平台的信息。您还可以将所有这些数据与其他第三方工具(如Datadog和Slack)集成。

当您遇到问题时,有可用的调试工具,并且支持Web挂钩,以便可以在Channel中发生事件时更新和通知服务器。您也可以使用简单的查询API查询已连接用户的状态。

2单个频道上发布事件

在下面的示例中,在名为 my-channel 的通道上触发了一个名为 my-event 的事件。消息负载最终以简单的 JSON 消息 ${'{"message":"hello world"}'} 结束。

require __DIR__ . '/vendor/autoload.php';
$pusher = new Pusher\Pusher('APP_KEY''APP_SECRET''APP_ID'array('cluster' => 'APP_CLUSTER'));
$response = $pusher->trigger('my-channel''my-event'array'message' => 'hello world'));

3多个频道上发布事件

在下面的示例中,一个名为 my-event 的事件被多个通道触发;my-channel-1、my-channel-2 和my-channel-3。消息负载被转换为简单的 JSON 消息 ${'{"message":"hello world"}'}

require __DIR__ . '/vendor/autoload.php';
$pusher = new Pusher\Pusher('APP_KEY''APP_SECRET''APP_ID'array('cluster' => 'APP_CLUSTER'));
$pusher->trigger(
  ['my-channel-1''my-channel-2''my-channel-3'],
  'my-event',
  array'message' => 'hello world')
);

Part2演示与频道实时通信

4创建频道应用程序

您需要做的第一件事是在https://www.pusher.com上创建一个帐户。单击注册按钮,然后选择您要登录到您的帐户的方式。您可以使用GitHub或Google帐户,也可以使用电子邮件地址和密码。创建帐户后,继续并登录。

首次登录时,系统将提示您创建一个新的Channels应用程序。通道将为您的应用程序提供一个默认名称,但是将Channels应用程序命名为类似于您的应用程序更有意义。因为我们将编写一个Node.js控制台应用程序,所以将我的应用程序称为node-console-app 。注意,命名约定是使用破折号代替空格。

接下来,您需要选择集群,并且要选择最接近服务器的集群,因为客户端可以位于世界各地。对我来说,这是俄亥俄州和北弗吉尼亚州之间的一次折腾。我选择了俄亥俄州,因为默认情况下已选择该州。

然后,您可以选择用于编写应用程序的技术。我选择了Node.js,但可以随意使用所需的任何技术。

单击“ 创建我的应用程序”按钮后,您将看到“ 入门”页面。该页面是一个客户端,请注意它表示连接状态为已连接。如果查看“ 概述”页面,则会看到有一个客户端。就是“入门”页面上的此演示客户端。

在“概述”页面的底部,您将找到应用程序ID,密钥,私有密钥和集群。这是从客户端和服务器应用程序连接到Channels应用程序所需的信息。

5入门实战

场景

  • 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.
});

6完整的代码

<!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

实时通信 | pusher 入门教程(二、三)

参考伪代码 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 PusherPusher(
    '108365f54d1d934e7678',
    '9cfbfd3b06290c427de6',
    '1339434',
    $options
);

$data['message'] = 'hello world Tinywan';
$pusher->trigger('my-channel''my-event', $data);

目录结构

实时通信 | pusher 入门教程(二、三)

运行以上脚本代码

实时通信 | pusher 入门教程(二、三)

客户端弹框提示

实时通信 | pusher 入门教程(二、三)


原文始发于微信公众号(开源技术小栈):实时通信 | pusher 入门教程(二、三)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/248455.html

(0)
李, 若俞的头像李, 若俞

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!