Twilio Client PHP Quickstart

Displaying Client Availability with Presence

Great, now you’re able to place calls from one browser to another. Your application is starting to look pretty sweet. There’s only one thing still missing. How will you figure out who is available to receive an incoming call? Furthermore how will you keep this list up-to-date as clients connect and disconnect? Fear not Monkey!

We can show a list of people available to be called in a few easy steps:

Register a handler function for presence events with Twilio.Device.presence().
When a presence event is received, add or remove that client from a list in the UI.
When the client name is clicked in the list, invoke the previously written call() function.

quickstart/client/hello-client-monkey-6.php

<?php
include 'Services/Twilio/Capability.php';

// put your Twilio API credentials here
$accountSid = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$authToken  = 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy';

// put your Twilio Application Sid here
$appSid     = 'APzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';

// put your default Twilio Client name here
$clientName = 'jenny';

// get the Twilio Client name from the page request parameters, if given
if (isset($_REQUEST['client'])) {
    $clientName = $_REQUEST['client'];
}

$capability = new Services_Twilio_Capability($accountSid, $authToken);
$capability->allowClientOutgoing($appSid);
$capability->allowClientIncoming($clientName);
$token = $capability->generateToken();
?>

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Client Monkey 6</title>
    <script type="text/javascript"
      src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    </script>
    <link href="http://static0.twilio.com/packages/quickstart/client.css"
      type="text/css" rel="stylesheet" />
    <script type="text/javascript">

      Twilio.Device.setup("<?php echo $token; ?>");

      Twilio.Device.ready(function (device) {
        $("#log").text("Client '<?php echo $clientName ?>' is ready");
      });

      Twilio.Device.error(function (error) {
        $("#log").text("Error: " + error.message);
      });

      Twilio.Device.connect(function (conn) {
        $("#log").text("Successfully established call");
      });

      Twilio.Device.disconnect(function (conn) {
        $("#log").text("Call ended");
      });

      Twilio.Device.incoming(function (conn) {
        $("#log").text("Incoming connection from " + conn.parameters.From);
        // accept the incoming connection and start two-way audio
        conn.accept();
      });

      Twilio.Device.presence(function (pres) {
        if (pres.available) {
          // create an item for the client that became available
          $("<li>", {id: pres.from, text: pres.from}).click(function () {
            $("#number").val(pres.from);
            call();
          }).prependTo("#people");
        }
        else {
          // find the item by client name and remove it
          $("#" + pres.from).remove();
        }
      });

      function call() {
        // get the phone number or client to connect the call to
        params = {"PhoneNumber": $("#number").val()};
        Twilio.Device.connect(params);
      }

      function hangup() {
        Twilio.Device.disconnectAll();
      }
    </script>
  </head>
  <body>
    <button class="call" onclick="call();">
      Call
    </button>

    <button class="hangup" onclick="hangup();">
      Hangup
    </button>

    <input type="text" id="number" name="number"
      placeholder="Enter a phone number or client to call"/>

    <div id="log">Loading pigeons...</div>

    <ul id="people"/>
  </body>
</html>

Cool! Now you can see your brand new contact list. Just like in the last example, let’s launch two browser windows: one pointing at hello-client-monkey.php?client=jenny and the other at hello-client-monkey.php?client=tommy.

Now you can simply click on the name of a contact to call that contact's browser client. If you close one browser window you will see that the client is automatically removed from the other browser window's contact list.

Handling Browsers Without Flash

Some browsers may not have the Flash plugin installed. If this is the case, Twilio.Device.setup() will throw an exception. Wrap the setup call in a try-catch block to gracefully handle the error. For example, you could use it like this:

try {
  Twilio.Device.setup("<< put a Twilio capability token here >>");
} catch (err) {
  console.log("Adobe Flash is required to use Twilio Client.");
}

Next Steps

That was it for this quickstart! We hope you had a great time building your first Twilio Client application. If you want to learn more about the JavaScript library that we have been using throughout this document, read the Twilio Client JavaScript API reference.