快速入门：使用 Visual Studio Code 扩展进行开发

Azure Web PubSub 可帮助开发者轻松地使用 WebSocket 和发布-订阅模式生成实时消息 Web 应用程序。

在本教程中，我们在 Visual Studio Code 的帮助下使用 Azure Web PubSub 创建聊天应用程序。

先决条件

• 需要一个具有活动订阅的 Azure 帐户。 如果你没有订阅，可以创建一个试用版订阅。
• Visual Studio Code，可免费下载。
• 已安装以下 Visual Studio Code 扩展：
  • Azure 帐户扩展
  • Azure Web PubSub 扩展

克隆项目

1. 打开新的 Visual Studio Code 窗口。

2. 按 F1 打开命令面板。

3. 输入“Git: Clone”，然后按 Enter。

4. 输入以下 URL 克隆示例项目：

   https://github.com/Azure/azure-webpubsub.git
   

   注意

   本教程使用 JavaScript 项目，但步骤与语言无关。

5. 选择要将项目克隆到的文件夹。

6. 在 Visual Studio Code 中选择“打开”->“打开文件夹”，以便打开到 azure-webpubsub/samples/javascript/chatapp/nativeapi 的位置。

登录 Azure

1. 按 F1 打开命令面板。

2. 选择“Azure: 登录”并按照提示进行身份验证。

3. 登录后，返回到 Visual Studio Code。

创建 Azure Web PubSub 服务

适用于 Visual Studio Code 的 Azure Web PubSub 扩展使用户能够快速创建、管理和利用 Azure Web PubSub 服务及其开发者工具，例如 Azure Web PubSub 本地隧道工具。 在此方案中，请创建一个新的 Azure Web PubSub 服务资源并将其配置为托管应用程序。 安装 Web PubSub 扩展后，可以在 Visual Studio Code 中的 Azure 控制面板下访问其功能。

1. 按 F1 打开命令面板，然后运行“Azure Web PubSub: 创建 Web PubSub 服务”命令。

2. 输入扩展提示的以下值。

   Prompt	值
   选择订阅	选择要使用的 Azure 订阅。
   选择资源组	选择要使用的 Azure 资源组。
   输入服务的名称	输入 my-wps。
   选择一个位置	选择靠近你的 Azure 区域。
   选择定价层	选择要使用的定价层。
   选择单元计数	选择要使用的单元计数。

   Azure 活动日志面板随即打开并显示部署进度。 本过程可能需要几分钟才能完成。

3. 此过程完成后，Visual Studio Code 将显示一条通知。

创建中心设置

1. 打开 Visual Studio Code 左侧的活动栏中的“Azure”图标。

   注意

   如果活动栏处于隐藏状态，你将无法访问扩展。 请通过单击“视图”>“外观”>“显示活动栏”来显示活动栏

2. 在资源树中，找到你创建的 Azure Web PubSub 资源 my-wps，以单击方式将其展开

3. 右键单击“中心设置”项，然后选择“创建中心设置”

4. 输入 sample_chat 作为中心名称，然后创建中心设置。 是否创建额外的事件处理程序并不重要。 等待显示为已完成的进度通知

5. 在“中心设置”项下方，将出现一个新的子项，即“中心 sample_chat”。 右键单击新项，然后选择“附加本地隧道”

6. 系统会弹出一条通知，提醒你创建一个已启用隧道的事件处理程序。 单击“是”按钮。 然后根据扩展的提示输入以下值

   Prompt	值
   选择用户事件	选择“全部”
   选择系统事件	选择“已连接的”
   输入服务器端口	输入“8080”

7. 扩展会创建一个新终端来运行“本地隧道工具”。系统会显示一条通知，提醒你打开“本地隧道门户”。 单击“是”按钮或在 Web 浏览器中手动打开“http://localhost:4000"”来查看门户。

运行服务器应用程序

1. 确保工作目录为 azure-webpubsub/samples/javascript/chatapp/nativeapi

2. 安装 Node.js 依赖项

   npm install
   

3. 打开活动栏中的“Azure”图标并找到 Azure Web PubSub 资源 my-wps。 然后右键单击资源项并选择“复制连接字符串”。 连接字符串会复制到剪贴板

4. 使用复制的连接字符串运行服务器应用程序

   node server.js "<connection-string>"
   

5. 在浏览器中打开 http://localhost:8080/index.html 以尝试聊天应用程序。