Gyorsindítás: Fejlesztés Visual Studio Code Extension-szal

Az Azure Web PubSub segít a fejlesztők számára valós idejű üzenetküldő webalkalmazások fejlesztésében WebSockets és a publish-subscribe minta használatával.

Ebben az oktatóban Azure Web PubSub segítségével hozhatsz létre egy csevegőalkalmazást a Visual Studio Code segítségével.

Előfeltételek

• Aktív előfizetéssel rendelkező Azure-fiókra van szükség. Ha még nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat egy fiókot.
• Visual Studio Code, ingyenesen letölthető.
• A következő Visual Studio Code-bővítmények vannak telepítve:
  • Az Azure-fiók bővítménye
  • Az Azure Web PubSub extension

A projekt klónozása

1. Nyisson meg egy új Visual Studio Code-ablakot.

2. Nyomd meg az F1-et , hogy megnyissad a parancspalettát.

3. Írja be a Git: Klónozás parancsot , majd nyomja le az Enter billentyűt.

4. Adja meg a következő URL-címet a mintaprojekt klónozásához:

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

   Megjegyzés:

   Ez az oktatóanyag JavaScript-projektet használ, de a lépések nyelvi agnosztikusak.

5. Jelöljön ki egy mappát, amelybe klónozni szeretné a projektet.

6. Válaszd ki a Megnyitás -> Megnyitás mappát a azure-webpubsub/samples/javascript/chatapp/nativeapi Visual Studio Code-ba.

Bejelentkezés az Azure-ba

1. Nyomd meg az F1-et , hogy megnyissad a parancspalettát.

2. Válassza az Azure-t: Jelentkezzen be , és kövesse az utasításokat a hitelesítéshez.

3. Miután bejelentkezett, térjen vissza a Visual Studio Code-hoz.

Create an Azure Web PubSub Service

Az Azure Web PubSub kiterjesztés a Visual Studio Code-hoz lehetővé teszi a felhasználók számára, hogy gyorsan létrehozzák, kezeljék és használják az Azure Web PubSub Service-t és fejlesztői eszközeit, például az Azure Web PubSub Local Tunnel Tool-t. Ebben a helyzetben létrehozol egy új Azure Web PubSub Service erőforrást, és konfigurálod arra, hogy az alkalmazásodat hostolja. A Web PubSub bővítmény telepítése után elérhető funkciói az Azure vezérlőpultján keresztül a Visual Studio Code-ban.

1. Nyomd meg az F1 gombot, hogy megnyissa a parancspalettát, és indítsd el az Azure Web PubSub: Create Web PubSub Service parancsot.

2. Adja meg a következő értékeket a bővítmény kérésének megfelelően.

   Haladéktalan	Érték
   Előfizetés kiválasztása	Válassza ki a használni kívánt Azure-előfizetést.
   Erőforráscsoport kiválasztása	Válaszd ki az Azure erőforráscsoportot, amit használni szeretnél.
   Adja meg a szolgáltatás nevét	Adja meg a my-wps.
   Hely kiválasztása	Válasszon ki egy Önhöz közeli Azure-régiót.
   Válassz egy árszintet	Válaszd ki azt az árszintet, amit használni szeretnél.
   Válassz egységszámot	Válaszd ki az egységszámot, amit használni szeretnél.

   Megnyílik az Azure-tevékenységnapló panel, és megjeleníti az üzembe helyezés folyamatát. Ez a folyamat eltarthat néhány percig.

3. A folyamat befejeződése után a Visual Studio Code értesítést jelenít meg.

Készíts egy hub beállítást

1. Nyissa meg az Azure ikont a Visual Studio Code bal oldalán található Activity Bar menüben.

   Megjegyzés:

   Ha az aktivitás sávod el van rejtve, nem fogod tudni hozzáférni a bővítményhez. A Tevékenység Sáv megjelenítése a Megjelenés > Megjelenítése Tevékenység Sáv megtekintése gombra kattintva >

2. Az erőforrásfában keresd meg az általad létrehozott Azure Web PubSub erőforrást my-wps , és kattints rá a bővítéshez

3. Jobb kattintás a Hub beállítások elemre, majd válaszd a Központ beállítás létrehozását

4. Bevitelni sample_chat a hub nevét, és létrehozni a hub beállítását. Nem számít, hogy extra eseménykezelőket kell létrehozni vagy sem. Várd meg, amíg a haladás értesítése befejezettnek jelenik meg

5. Az item Hub beállítások alatt egy új alitem Hub sample_chat jelenik meg. Jobb kattints az új tárgyra, majd válaszd a "Helyi alagút csatolása" opciót.

6. Egy értesítés emlékeztet, hogy hozz létre egy alagút-engedélyezett eseménykezelőt. Kattints Igen gombra. Ezután írja be a következő értékeket, ahogy a kiterjesztés kéri

   Haladéktalan	Érték
   Felhasználói események kiválasztása	Válassz ki mindenkit
   Rendszeresemények kiválasztása	Kapcsolódva válaszd
   Input Server Port	Lépj be a 8080

7. A bővítmény új terminált hozhat létre a Helyi Alagút Eszköz futtatására, és egy értesítés emlékeztet a Local Tunnel Portal megnyitására. Kattints a "Igen" gombra vagy nyisd meg a "http://localhost:4000"Igen" gombot; a webböngészőben manuálisan megtekintheted a portált.

Futtatd a szerveralkalmazást

1. Győződj meg róla, hogy a munkakönyvtár azure-webpubsub/samples/javascript/chatapp/nativeapi

2. Node.js függőségek telepítése

   npm install
   

3. Nyisd meg az Azure ikont az Activity Bar-ban, és keresd meg az Azure Web PubSub resource my-wps. Ezután jobb kattints az erőforrás elemre, és válaszd a Copy Connection String opciót. A csatlakozási láncot lemásolják a clipboardodra

4. Futtatd a szerveralkalmazást másolt kapcsolati stringgel

   node server.js "<connection-string>"
   

5. Nyisd http://localhost:8080/index.html meg a böngészőt, hogy kipróbáld a csevegőalkalmazást.

Jótanács

Problémákat tapasztal? Jelezd nekünk a GitHubon, ha egy problémát nyitsz az Azure Web PubSub repóban.