Pusher入门：演示与通道的实时通信

最新推荐文章于 2024-08-28 09:42:48 发布

cunjie3951

最新推荐文章于 2024-08-28 09:42:48 发布

阅读量1k

点赞数

文章标签： python java vue linux js ViewUI

本文介绍了如何使用Pusher Channels在JavaScript和Node.js中创建实时通信。首先在Pusher平台上创建应用程序，然后创建服务器应用和客户端应用，展示了如何通过触发和监听事件实现两端的交互。

摘要由CSDN通过智能技术生成

Pusher的Channels是一个平台，可轻松将无缝的实时数据添加到您的应用程序中。在本视频中，我将向您展示如何开始使用JavaScript和来自Pusher的频道对客户端和服务器应用之间的实时通信进行编码。

创建频道应用程序

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

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

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

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

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

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

创建服务器应用

在新目录中，使用以下命令创建package.json文件：

npm init --yes

然后，您需要安装Pusher软件包。

npm install pusher --save

接下来，创建一个名为server.js的文件-这是我们的应用程序文件。输入以下代码：

'use strict';



const Pusher = require('pusher');



var pusher = new Pusher({

    appId: '530620',

    key: 'b534d4fac76717b9872e',

    secret: 'f84f62e45f82cc09b8c8',

    cluster: 'us2',

    encrypted: true

});

这段代码通过将具有应用ID，密钥，私有密钥和集群属性的对象传递给构造函数，从而创建了Pusher对象，基本上是我们在概述中看到的所有信息。页面将在这里。还有一个称为encrypted属性，它指定Pusher应该加密我们的服务器应用程序和Channels服务之间的通信。

通过允许我们在控制台窗口中键入内容，我们的简单服务器应用程序将接受用户输入。我们将获取该输入，然后触发消息事件。该代码如下所示：

process.stdin.on('data', (chunk) => {

    const str = chunk.toString().trim();



    if (str === 'exit') {

        process.exit(0);

    }



    pusher.trigger('my-channel', 'my-event', {

        message: str

    });

});



console.log('Type a message...');

在此代码中，我们使用标准输入流并监听数据事件。我们收到的数据是原始数据，因此我们将其转换为字符串并修剪空白。然后，我们检查用户是否键入了单词“ exit”，如果是，则退出程序。

然后，我们使用Pusher对象的trigger()方法来触发my-channel通道中的my-event事件。因此，触发事件涉及以下三个信息：

这个频道
事件
消息有效负载

请务必注意，频道名称不是“频道”应用的名称。相反，它是一个任意名称，希望对我们的应用程序具有某种意义。我们使用默认的my-channel ，因为这就是入门页面已订阅。然后，订阅此频道的客户端可以侦听在my-channel频道中发生的事件。在这种情况下，他们将需要监听my-event事件，因为这是我们在Node.js应用程序的控制台中输入内容时触发的。

消息有效负载可以是任何形状的对象。再次，此代码设置了message属性，因为这是Getting Started客户端正在寻找的属性。

我们通过输出一条消息告诉用户应用程序已准备就绪，结束了我们的应用程序代码。

测试服务器代码

您可以立即测试您的服务器应用程序，因为我们已经有一个客户端：“入门”页面。您可以使用以下命令运行服务器：

node server.js

您在控制台应用程序中键入的消息应显示在“入门”页面上的警报框中。在下一节继续编写客户端应用程序之前，请随意进行操作。

编写客户端应用

使用以下命令在另一个目录中初始化客户端项目：

npm init --yes

然后使用以下命令安装客户端Pusher库：

npm install pusher-js --save

创建一个名为client.js的文件，然后键入以下代码：

'use strict';



const Pusher = require('pusher-js');



let pusher = new Pusher('b534d4fac76717b9872e', {

    cluster: 'us2',

    encrypted: true

});



let channel = pusher.subscribe('my-channel');

channel.bind('my-event', (data) => {

    console.log(data.message);

});



console.log('Listening for messages...');

此代码创建一个客户端Pusher对象。请注意，客户端对象比服务器需要的信息少- 在客户端代码中不要包含密钥或应用程序ID！ 在我们的示例中，我们然后使用Pusher对象的subscribe()方法subscribe() my-channel频道。这使您可以收听该频道中的任何事件。

订阅频道将为您提供一个频道对象，您可以使用该对象来监听该频道中发生的事件，在此代码中，我们使用bind()方法将侦听器绑定到my-event事件。客户端每次处理my-event事件时，都会使用console.log()将消息写入屏幕。

继续并在单独的控制台窗口中运行客户端，以便您可以同时运行客户端和服务器。运行该应用程序的命令是：