实时通信 | Pusher入门教程实战

Tinywan

发布于 2024-01-10 15:14:17

6530

发布于 2024-01-10 15:14:17

文章被收录于专栏：开源技术小栈

简介

Pusher是什么？

Pusher 是一种实时通信平台，提供了在Web应用程序中实现实时功能的技术。它可以帮助开发者轻松地添加实时数据到应用程序中，实现实时通信、通知、活动更新等功能。Pusher提供了多种API和SDK，支持多种语言和平台，包括JavaScript、PHP、Ruby、Java等。使用Pusher，开发者可以快速构建实时应用程序，提高开发效率和用户体验。

Pusher能做什么？

1. 实时消息更新

使用Pusher，可以实时推送消息到所有连接的客户端，这些消息可以用于实时更新数据、显示聊天消息、活动更新等。

2. 实时数据分析

Pusher可以帮助实时收集和分析应用程序中的数据，并将结果推送给相关用户。

3. 实时通知和提醒

使用Pusher，可以在应用程序中实现实时通知和提醒功能，例如新邮件通知、会议提醒等。

4. 实时数据可视化

Pusher可以与图表库结合使用，实现实时数据可视化，让用户可以实时查看和监控数据变化。

5. 实时参与感

Pusher可以用于实现实时投票、调查等功能，让用户可以实时参与和反馈。如微信朋友圈的点赞和评论，A可以实时看到B的点赞，B可以实时看到A的评论。

Pusher 和 Websocket 区别

Pusher和WebSocket是两种不同的实时通信技术，它们都可以实现实时数据传输，但存在一些不同之处。

Pusher： 是一个实时通信平台，它提供了一种简单的方式来添加实时功能到Web应用程序中。Pusher通过建立一个持久连接，允许服务器向客户端推送数据。Pusher提供了多种API和SDK，支持多种语言和平台，包括JavaScript、Python、Ruby、Java等。它还提供了许多高级功能，如通道订阅、事件触发等。
WebSocket： 是一种在单个TCP连接上进行全双工通信的协议。WebSocket使得客户端和服务器之间可以建立持久性的连接，并进行双向数据传输。WebSocket API也被W3C定为标准。与Pusher相比，WebSocket更加底层，需要开发者自行处理连接的建立和关闭、数据格式化等细节。但是，WebSocket也提供了更灵活和强大的实时通信能力，可以用于各种复杂的应用场景。

总结来说，Pusher和WebSocket都是实现实时通信的重要技术，它们都可以实现实时数据传输，但Pusher更侧重于提供简单易用的实时功能，而WebSocket则更加底层，需要开发者自行处理更多的细节。选择哪种技术取决于具体的应用场景和需求。

使用

使用场景：

JavaScript 作为客户端订阅频道
PHP 作为服务端发布消息到频道

1. 注册账号

打开官网 https://pusher.com/ 可以直接注册或者使用第三方授权登录。注册账号主要是为了获得appid,secret和key这三个认证密钥，同时注册后进入个人页面后，可以使用Pusher的Pusher Debug Console来查看接口调用情况。

注册成功后进入个人后台面板，新建一个频道应用，会有该新建程序的密钥，同时右边第二个tab还有个debug console，用来调试查看接口调用情况，等会会用到：

频道应用说明

频道应用名称：开源技术小栈
前端技术栈：JQuery
后端技术栈：PHP

前端代码：index.html

<!DOCTYPE html>
<head>
  <title>Pusher Test</title>
  <script src="https://js.pusher.com/8.2.0/pusher.min.js"></script>
  <script>

    // Enable pusher logging - don't include this in production
    Pusher.logToConsole = true;

    var pusher = new Pusher('b850eda3f628ec25ee26', {
      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>

后端代码

使用下面的服务器代码向您订阅的客户端发布一个事件，您打开的任何（和所有）客户端都会收到该事件，包括此页面。

composer 依赖包安装

composer require pusher/pusher-php-server

index.php 文件

<?php
  require __DIR__ . '/vendor/autoload.php';

  $options = array(
    'cluster' => 'ap3',
    'useTLS' => true
  );
  $pusher = new Pusher\Pusher(
    'b850eda3f628ec25ee26',
    '3190a52db5cf583f9fae',
    '1735188',
    $options
  );

  $data['message'] = 'Hi 开源技术小栈！';
  $pusher->trigger('my-channel', 'my-event', $data);