JavaScript

Erstellen einer clientseitigen Anwendung

Erstellen Sie eine HTML-Datei mit dem Namen client_js.html. Fügen Sie den folgenden Code ein, aber achten Sie darauf, dass Sie den JWT einfügen, den Sie im vorherigen Schritt für den Benutzer erstellt haben:

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="./node_modules/@vonage/client-sdk/dist/vonageClientSDK.min.js"></script>
  <style>
    input, button {
      font-size: 1rem;
    }
    #call, #hangup {
      display: none;
    }
  </style>
</head>

<body>
  <h1>Call Phone from App</h1>
  <label for="phone-number">Your Phone Number:</label>
  <input type="text" name="phone-number" value="" placeholder="i.e. 14155550100" id="phone-number" size="30">
  <button type="button" id="call">Call</button>
  <button type="button" id="hangup">Hang Up</button>
  <div id="status"></div>

  <script>
    const callButton = document.getElementById("call");
    const hangUpButton = document.getElementById("hangup");
    const statusElement = document.getElementById("status");
    const token = 'ALICE_JWT';
    const client = new vonageClientSDK.VonageClient();
    let callId = null;

    client.createSession(token)
      .then((sessionId) => {
        console.log("Id of created session: ", sessionId);
        callButton.style.display = "inline";
      })
      .catch((error) => {
        console.error("Error creating session: ", error);
      });

    client.on('legStatusUpdate', (callId, legId, status) => {
      if (status === "ANSWERED") {
        callButton.style.display = "none";
        hangUpButton.style.display = "inline";
      }
      if (status === "COMPLETED") {
        callId = null;
        callButton.style.display = "inline";
        hangUpButton.style.display = "none";
      }
    });

    callButton.addEventListener("click", event => {
      const destination = document.getElementById("phone-number").value;
      if (destination !== "") {
        client.serverCall({ to: destination })
          .then((_callId) => {
            callId = _callId;
          })
          .catch((error)=>{
            console.error(`Error making call: ${error}`);
          });
      } else {
        statusElement.innerText = 'Please enter your phone number.';
      }
    });

    hangUpButton.addEventListener("click", () => {
      client.hangup(callId)
        .then(() => {
          hangUpButton.style.display = "none";
          callButton.style.display = "inline";
        })
        .catch(error => {
          console.error("Error hanging up call: ", error);
        });                
    });
  </script>
</body>

</html>

Dies ist Ihre Webanwendung, die das Client SDK verwendet, um einen ausgehenden Anruf an ein Telefon zu tätigen.

Die wichtigsten Merkmale dieses Codes sind:

Eine Taste zum Anrufen.
Eine Taste zum Auflegen.
Der Code erstellt eine Sitzung unter Verwendung des zuvor generierten JWT.
Dann richtet der Code zwei Ereignislisten für die Schaltflächen zum Anrufen und Auflegen ein.
1. Der erste Hörer verwendet die serverCall Funktion, um den ausgehenden Anruf zu tätigen. Ihr Webhook-Server erhält die Zielrufnummer im Anfragetext und leitet den Anruf weiter.
2. Der zweite Hörer ruft hangup um das Gespräch zu beenden.
Ein weiterer Event-Handler wird für die Statusaktualisierung des Anrufers eingerichtet. Sobald der Anrufer antwortet, wird die Schaltfläche "Auflegen" angezeigt und die Schaltfläche "Anrufen" ausgeblendet; nach Beendigung des Anrufs wird dies wieder rückgängig gemacht.