Learn Skype Web SDK Day 6 : Getting & Subscribing to Other People’s Presence

[contemplate-1]
View Demo

We’ve already seen how to get and subscribe to our own presence, but you’ll probably also want to be able to subscribe to other people’s presence as well.

If you think about it, you probably won’t have a list of SIP addresses hardcoded in your application which you want to subscribe to. Instead that list of people will come from the server, either from a user’s contact list, or search results etc. But you do have to use a person object – you can’t just supply a sip address like you can in some other APIs.

We’re going to use a simple search to find a user. We’re going to assume that only one record is ever returned. The personsAndGroupsManager object contains a way of searching for people easily by providing a string, which could be their name or SIP address (similar to how you would search for someone using the desktop client).

var query = client.personsAndGroupsManager.createPersonSearchQuery();
query.text(searchString);
query.limit(1);
query.getMore().then(function (results) {
results.forEach(function (result) {
// do something with the user(s) here
});

In this example I’ve limited to possible number of results returned to 1, but you can also use this to implement a user search, listing out search results.

The results contain a list of person objects, which you can then use for presence (or anything else). To just grab the presence once you can just read the value of the status:

person.status.get().then(function(presence) {
// do something with the presence
});

You could also subscribe to updates, in exactly the same way as you did for subscribing to your own presence updates:

person.status.changed(function(newStatus) {
// The presence status has changed. The new presence value is in newStatus.
alert('Status Changed to: ' + newStatus);
});

Be aware of doing this subscription inside the for-loop of the results though. If you do, the person object reference will be lost when the loop finished executing, and your events will be lost with it. If you want to maintain a presence subscription for a user, you’ll need to copy the person object to a longer-lived variable before hooking up to the events.

When you’re done with a subscription, you should unsubscribe it, to converse resources, in the same way that you would for subscriptions to your own presence, by calling dispose() on the subscription.

In the code example below and on the demo page, I’m only getting the presence once. Adding a simple subscription to also receive updates is left as an exercise for the reader!

<div class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="username" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogIn">Log in</button>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button class="btn btn-default" id="btnLogOut">Log out</button>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="text" class="form-control" id="txtUserToSubscribeTo" placeholder="Andy Other">
<button class="btn btn-default" id="btnPresence">Get Presence</button>
</div>
</div>
</div>

<div>
<span id="loginStatus">...</span><br/>
<span id="presenceStatus">...</span>
</div>

<script type="text/javascript">

$(function () {

var client;
$(function () {
'use strict';

Skype.initialize({
apiKey: 'SWX-BUILD-SDK',
}, function (api) {
client = new api.application();

// whenever client.state changes, display its value
client.signInManager.state.changed(function (state) {
$('#loginStatus').text("Login State: " + state);
});

}, function (err) {
alert('Error loading Skype Web SDK: ' + err);
});

$('#btnLogIn').click(function () {

// start signing in
client.signInManager.signIn({
username: $('#username').val(),
password: $('#password').val()
}).then(function () {
//log in worked!
alert('Logged in!');
}, function (error) {
//Something went wrong.
alert(error);
});
});

$('#btnLogOut').click(function () {
// start signing out
client.signInManager.signOut()
.then(function () {
//log out worked!
alert('Logged out!');
}, function (error) {
//Something went wrong.
alert(error);
});
});

$('#btnPresence').click(function () {

SubscribeToUser($('#txtUserToSubscribeTo').val());
});
function SubscribeToUser(searchString)
{
var query = client.personsAndGroupsManager.createPersonSearchQuery();
query.text(searchString);
query.limit(1);
query.getMore().then(function (results) {
results.forEach(function (result) {
var person = result.result;
person.status.get().then(function(presence) {
$('#presenceStatus').text(searchString + " presence: " + presence);
});
});
}).then(null, function (error) {
alert('Error:', error);
});

}

});
</script>

Demo Online

You can try this code out against your own Skype for Business environment by going to the demo page. From here you can also download the code from GitHub if you want to host it locally, or take it and use it in your next project.
[contemplate-2]